[CSS 3] centrer un menu dans une page

scoubi77 · 07/02/2012, 20h50

Bonsoir a tous,

De nouveau je rencontre un problème pour centrer un menu
voici le code de ma page

Code :

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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" CONTENT="">
<meta HTTP-EQUIV="IMAGETOOLBAR" content="no" SCROLLING="yes" >
<meta name="keywords" CONTENT="">
<style type="text/CSS">
ul {
 padding:0;
 margin:10;
 list-style-type:none;
 }
li {
 
 margin-left: 2px;
 float:left; /*pour IE*/
 }
ul li a {
 display:block;
 float:left;   
 width:138px;
 background-color:#FFFACD;
 color:black;
 text-decoration:none;
 text-align:center;
   -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
  -moz-box-shadow:0 0 10px #555;
  -webkit-box-shadow:0 0 10px #555;
  box-shadow:0 0 10px #555;
 padding:5px;
 border:2px solid;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#696969 #696969 #696969 #696969;
 
 }
ul li a:hover {
 background-color:#D3D3D3;
 border-color:#696969 #696969 #696969 #696969;
 } 
</style>
</HEAD>
<BODY>
<ul>
 <li><a href="lamer.htm" target="bas">La mer</a></li>
 <li><a href="lesvagues.htm" target="bas">Les vagues</a></li>
 <li><a href="coucher.htm" target="bas">Coucher de Soleil</a></li>
 <li><a href="macro.htm"target="bas">
Macrophotographie</a></li></BR></BR>
 <li><a href="v.htm" target="bas">Village </a></li>
<li><a href="lacst.htm" target="bas">Le lac</a></li>
 <li><a href="contrej.htm" target="bas">Contre jour</a></li>
 <li><a href="cascadrs.htm" target="bas">Cascades</a></li></BR></BR>
<li><a href="mars.htm" target="bas">Mars</a></li>
<li><a href="astro.htm" target="bas">Astronomie</a></li>
<li><a href="mars.htm" target="bas"></a></li>
<li><a href="astro.htm" target="bas"></a></li>
</ul>
 
</body>
</html>

Malgrès beaucoup d'éfforts mon menu est centré vers la gauche de ma page alors que je le voudrais en haut au centre
Merci par avance pour vos aides

redoran · 07/02/2012, 21h38

Salam ; si vous le permettez essaye de mettre le code css dans un fichier.css et le html dans un autre sa allège votre page html est c'est mieux structuré.

pour centré votre menu essaye avec la class menu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
margin-left: auto;
margin-right: auto;

jreaux62 · 08/02/2012, 12h40

Bonjour,
pour utiliser les margin auto, il faut définir la largeur de l'élément.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
ul#menu {
 padding:0;
 width:610px; /* largeur = 4 x li (marges incluses) */
 margin:10px auto;
 list-style-type:none;
 }

Attention : IE et les autres navigateurs ne gèrent pas de la même manière les "margin" et "padding".

Si ta page contient d'autres listes, je te conseille de mettre un id :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<ul id="menu">

buggen25 · 08/02/2012, 13h07

Bonjour;
J'ajoute, pour internet explorer il faut prevoir un div avec un text-align:center et a l'interieur un autre div avec le text centré a gauche par defaut
Code HTML

Code :

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
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" CONTENT="">
<meta HTTP-EQUIV="IMAGETOOLBAR" content="no" SCROLLING="yes" >
<meta name="keywords" CONTENT="">
<style type="text/CSS">
body{
	text-align:center;
}
#MenuNav{
		 width:610px;
       text-align:left;
	   margin:0 auto 0 auto;
 
}
#MenuNav ul {
 padding:0;
 margin:10;
 list-style-type:none;
 }
li {
 
 margin-left: 2px;
 float:left; /*pour IE*/
 }
#MenuNav ul li a {
 display:block;
 float:left;   
 width:138px;
 background-color:#FFFACD;
 color:black;
 text-decoration:none;
 text-align:center;
   -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
  -moz-box-shadow:0 0 10px #555;
  -webkit-box-shadow:0 0 10px #555;
  box-shadow:0 0 10px #555;
 padding:5px;
 border:2px solid;
 /*pour avoir un effet "outset" avec IE :*/
 border-color:#696969 #696969 #696969 #696969;
 
 }
#MenuNav ul li a:hover {
 background-color:#D3D3D3;
 border-color:#696969 #696969 #696969 #696969;
 } 
</style>
</HEAD>
<BODY>
 
<div id="MenuNav">
 <ul>
 <li><a href="lamer.htm" target="bas">La mer</a></li>
 <li><a href="lesvagues.htm" target="bas">Les vagues</a></li>
 <li><a href="coucher.htm" target="bas">Coucher de Soleil</a></li>
 <li><a href="macro.htm"target="bas">
Macrophotographie</a></li></BR></BR>
 <li><a href="v.htm" target="bas">Village </a></li>
<li><a href="lacst.htm" target="bas">Le lac</a></li>
 <li><a href="contrej.htm" target="bas">Contre jour</a></li>
 <li><a href="cascadrs.htm" target="bas">Cascades</a></li></BR></BR>
<li><a href="mars.htm" target="bas">Mars</a></li>
<li><a href="astro.htm" target="bas">Astronomie</a></li>
<li><a href="mars.htm" target="bas"></a></li>
<li><a href="astro.htm" target="bas"></a></li>
</ul>
</div>
</body>
</html>

scoubi77 · 10/02/2012, 10h39

Merci a vous tous je vais essayer cela dès ce soir merci

10/02/2012, 10h39	#5
scoubi77 Invité régulier Inscription : novembre 2009 Messages : 117 Détails du profil Informations forums : Inscription : novembre 2009 Messages : 117 Points : 5 Points : 5	Merci a vous tous je vais essayer cela dès ce soir merci
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email