Bonjour,
Je cherche à centrer mon menu dans ma page (voir image) et pas moyen, j'ai essayé différentes méthodes mais sans succès...
Je fais donc appel à votre aide !
Vous trouverez le code html et le css ci-dessous :
Code HTML :
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> </head> <body> <div id="conteneur"> <div class="container"> <div id="text" align="right"> <i>English version</i> <a href="#"><img src="flag-english.png" width="23px" height="15px" border="0px"></a> </div> <div align="center"> <img src="palmier.jpg" width="780px" height="100px"> </div> <br/> <ul id="navPyra"> <li><a class="active" href="#">Accueil</a></li> <li><a href="chambres_busua.html">Chambres / Tarifs</a></li> <li><a href="resto.html">Bar / Restaurant</a></li> <li><a href="contact.html">Contact / Résèrvation</a></li> <li><a href="acces.html">Accès</a></li> <li><a href="galerie.html">Galerie photos</a></li> <li><a href="#">Brochure</a></li> </ul> <ul id="navPyra2"> <li><a href="#">Surf</a></li> <li><a href="ghana.html">Le Ghana</a></li> <li><a href="#">Région de l'ouest</a></li> <li><a href="liens.html">Liens</a></li> </ul> <br/> </div> </div> </body> </html>
Code css :
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78 .container { width: 780px; padding: 15px; margin: 3px 0 10px 0; border: 1px solid #ccc; background: #fff; } /* pyramid */ #navPyra { margin: 0; padding: 0 0 20px 10px; border-bottom: 1px solid #9FB1BC; } #navPyra li { margin: 0; padding: 0; display: inline; list-style-type: none; } #navPyra a:link, #navPyra a:visited { float: left; font-size: 10px; line-height: 14px; font-weight: bold; padding: 0 12px 6px 12px; text-decoration: none; color: #708491; } #navPyra a:link.active, #navPyra a:visited.active, #navPyra a:hover { color: #000; background: url(pyramid.gif) no-repeat bottom center; } /* pyramid 2 */ #navPyra2 { margin: 0; padding: 0 0 20px 10px; } #navPyra2 li { margin: 0; padding: 0; display: inline; list-style-type: none; } #navPyra2 a:link, #navPyra2 a:visited { float: left; font-size: 10px; line-height: 14px; font-weight: bold; padding: 4px 12px 6px 12px; text-decoration: none; color: #708491; } #navPyra2 a:link.active, #navPyra2 a:visited.active, #navPyra2 a:hover { color: #000; background: url(pyramid2.gif) no-repeat top center; } /* code for presentation purpose (CSS preview) */ body { font-family: verdana, sans-serif; font-size: 11px; background: #EEE8AA; } #conteneur { margin: 20px auto; width: 780px; }
Merci d'avance....
Partager