28221 sujets

CSS et mise en forme, CSS3

[Résolu et encore merci ] Centrer mon menu CSS...

Bonjour,
J'essaye depuis un moment déjà de centrer mon menu en CSS que vous avec le code suivant :
CSS
.menuhaut {width:100%;} 

ul.menu { 
list-style-type: none; 
width: 100%; 
margin:0; 
padding:0; 

} 

ul.menu li { 
float: left;} 


.menu a { 
width: 100px; 
height: 20px; 
display: block; 
text-align: center; 
border: 1px solid gray; 
text-decoration: none; 
color: #000; 
background: #fff; 
} 

li.menu a:hover { 
background: #ccc; 
border: 1px solid gray; 
}

Html :
<div class="menuhaut"> 
<ul class="menu"> 
   <li><a href="">Menu 1</a></li> 
    <li><a href="">Menu 1</a></li> 
   <li><a href="">Menu 2</a></li> 
   <li><a href="">Menu 3</a></li> 
   <li><a href="">Menu 4</a></li> 
   </ul> 
</div>


J'ai essayé les trucs trouvés sur ce site mais rien n'y fait Smiley fache .
Merci de me donner un petit coup de pouce !
Modifié le 10 Dec 2004 - 19:03
Salut, et bienvenue à toi, je t'invite à aller te présenter dans le bar du forum si tu veux Smiley cligne

Il faut utiliser le display: inline sur les <li> et text-align: center ; sur le <ul>

Ou peut être que tu peux tester ceci :

.menuhaut
{
text-align: center ;
}
ul.menu
{
float: left;
text-align: left ;
margin: 0 auto ;
}

Mais à priori ça ne marchera pas, car il faudrait que ton <ul> soit dimenssioné... à tester quand même.
Modifié le 10 Dec 2004 - 18:18
J'ai mis ça pour mes Css :
ul.menu {
list-style-type: none;
width: 520px;
margin:0;
padding:0;
float: left;
margin:0px auto ;
}

ul.menu li {
float: left;
display: inline ;}


.menu a {
width: 100px;
height: 19px;
display: block;
text-align: center;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #fff;
}

li.menu a:hover {

background: #ccc;
border: 1px solid gray; 
}
.menuhautg {float:left;
width:113px;
height:19px;
}
.menuhautd {float:right;
width:115px;
height:19px;
}
.menuhaut{text-align:center;}


Mais ça centre toujours pas Smiley decu
Wé, c'est ce que je te disais, à priori ça n'allais pas marcher mais il fallait tester Smiley cligne
Entre temps, Stephan t'as indiqué un lien, et je t'ai même donné le lien direct vers ce que tu cherches ...
Et au premier post, je t'avais expliqué la méthode.
Je lai vu après le lien Smiley cligne
Bon je vais voir ce que je peux en faire, il faut encore que je l'intégre après ce menu !
Merci en tous les cas, vous êtes très éfficace !
Si j'ai un probléme je reviens après, là je vais me dépatouiller avec ce menu pour l'adpater Smiley cligne
Encore merci
Quand tu considéreras ton problème comme résolut, tu pourras ajouter un [résolu] en titre de sujet en éditant ton premier message.
Sujet clos
Aller à