Centrer un menu horizontal

Bonjour,

Je me suis inspiré du tutoriel sur un design complet en 5 étapes (http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/design-css) et je me heurte au problème suivant : je n'arrive pas à centrer mon menu horizontal !
voici le code :

ul#menu
{
	height: 34px ;
	background-color : gold ;
	margin: 0px ;
	margin-left:100px;
	margin-right:64px;
	padding: 2px ;
	list-style-type: none ;
}

ul#menu li
{
	margin-left:2px;
	float: left ;
	text-align: center ;
}

ul#menu li a
{
display:block;
float:left;   
width:150px;
background-color:#6495ED;
color:white;
text-decoration:none;
text-align:center;
padding:5px;
border-width:2px;
border-style:solid;
/*pour avoir un effet "outset" avec IE :*/
border-color:#DCDCDC #696969 #696969 #DCDCDC;
}

ul#menu li a:hover
{
background-color:#1713C1;
color:yellow;
border-color: #696969 #DCDCDC #DCDCDC #696969;
}

J'ai ici joué sur les marges "left" et right" pour aligner au mieux avec le texte en dessous, mais c'est du bricolage !

Merci pour votre aide

Bonsoir,

Tu ne peux pas centrer directement une série de flottants. Tu ne peux que centrer leur conteneur, sous réserve que tu saches exactement quelle sera la largeur totale des éléments du menu.

À vue de nez, chaque item du menu occupera 176px de large en tout.
176px = 2px (margin-left des li) + 2px (bordure gauche) + 5px (padding gauche) + 150px (width) + 5px (padding droite) + 2px (bordure droite)

Si tu as cinq items, ça te fait 5*176= 880px. Il te faut donc un ul#menu de 880px de large et centré via des marges automatiques (margin: 0 auto;).

Une autre option est de ne pas utiliser le positionnement flottant (ni pour les liens, ni pour les li), et de passer simplement les li du menu en display: inline. Il nous faudra ensuite:

ul#menu {
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
}

Voilà pour de premières pistes.
Modifié par Florent V. (06 Feb 2008 - 22:18)