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;

Invité · 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

centrer un menu dans une page

Centrer un élément en CSS

Discussions similaires

Partager

Partager