Centrer menu CSS
Bonjour,
j'aimerais centrer mon menu CSS, mais je n'y arrive pas !
CSS :
HTML :
Merci beaucoup de votre aide, j'ai essayé plusieurs manières, mon CSS n'est plus très propre du coup ...
j'aimerais centrer mon menu CSS, mais je n'y arrive pas !
CSS :
ul {
padding:;
margin:0 auto;
list-style-type:none;
margin-left:3px;
text-align: center;
}
li {
margin-left:2px;
float:left; /*pour IE*/
display: inline;
}
ul li a {
float:right;
width:218px;
height:178px;
background-image:url(menu/cadre.png);
color:white;
text-decoration:none;
text-align:center;
padding:5px;
font-size:36px;
color:#FF8000;
margin-right:-2px;
line-height:178px;
display: inline-block;
text-align:center;
}
ul li a:hover {
background-color:#09F;
color:#09F;
}
HTML :
<p><center><ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Menuiserie</a></li>
<li><a href="#">Vérandas</a></li>
<li><a href="#">Stores</a></li>
<li><a href="#">Volets</a></li>
</ul>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><br />
Site optimisé pour Mozilla Firefox et Adobe Flash Player.<br />
</p>
</center>
</p>
Merci beaucoup de votre aide, j'ai essayé plusieurs manières, mon CSS n'est plus très propre du coup ...
3 réponses
-
bonjour,
je le trouve centré ton menu !!!
qu'es ce qui ne va pas ? -
Salut :)
Et bien, mon menu n'est pas centré ... part de la gauche de la page ... -
j'ai corrigé un peu ton premier code !
tout d'abord, indique une largeur et une hauteur c'est surement ça qui manque et qui t'empêche de le centrer !
rajoute une valeur à ton padding, met lui 0 !
puis tu indique une marge auto, c'est bien et c'est ça qui va te le centrer à condition de lui donner une largeur, mais tu indique aussi une marge gauche de 3px, donc pas bon tu te contredis et les navigateurs en feront qu'a leur tête ;)
autrement dit, tu devrais avoir ça :
ul {
width:1200px;
height:auto;
margin:0 auto;
list-style-type:none;
text-align: center;
}
dis moi si ça marche !
sinon tu peu toujours voir le tuto que j'ai fais pour un menu déroulant, si ça peu t'aider !
http://www.cireasy.com/menu-deroulant/menu-deroulant-en-css/
