Menu horizontal centré

Bonjour, je suis en train de réaliser un site internet et j'aimerais réaliser un menu horizontal centré basé sur une list ul li basé en display: inline.

voici mon code xhtml (seulement le menu) :

<div id="mainMenu">
	<div class="cadre_arrondi-haut"></div>
		<div id="menuContent">
					<ul class="links">
						<li class="menu-114 first"><a href="http://localhost/drupal-6.13/user/" title="Pour ce connecter à  un utilisateur">Connexion</a></li>
						<li class="menu-138"><a href="http://localhost/drupal-6.13" title="">Home</a></li>
						<li class="menu-137"><a href="/drupal-6.13/node/11" title="About">About Us</a></li>
						<li class="menu-124 last"><a href="/drupal-6.13/node/4" title="Product">Produits</a></li>
					</ul>		
		</div>
	</div>
</div>

/* Menu Haut 
------------ */

#mainMenu {
	width: 867px;
	height: 45px;
	margin-left: 133px;
}

.cadre_arrondi-haut {
	margin: 0;
	padding: 0;
	width: 744px;
	height: 4px;
	background: url(../images/menu_haut.jpg) no-repeat;
	background-position: center bottom;
}

.cadre_arrondi-bas {
	margin: 0;
	padding: 0;
	width: 744px;
	height: 4px;
	background: url(../images/menu_bas.jpg) no-repeat;
	background-position: center top;
}

#menuContent {
	margin: 0;
	padding: 0;
	width: 744px;
	height: 37px;
	background: url(../images/menu_bg.jpg) repeat-x;
	background-position: center;
}

merci de votre aide.

Bonjour,

Tu as essayé de mettre un text-align:center (sur ul, ou #menuContent par exemple) ?

Sinon pour ton code, si je peux me permettre une remarque : supprime les titles qui n'apportent rien (saus éventuellement le premier, et encore, l'intitulé du lien est suffisament parlant) et pense à signaler les changement de langue avec lang="en".

Salut

Quel est la question ?

EDIT : ah, le centrage horizontal ?

Prends l'ID de ta div qui comprend le tout.

Applique une largeur fixe, puis

Applique des "margin" "right&left" de valeur "auto"
Modifié par Super_baloo8 (30 Jul 2009 - 11:59)

Miam du drupal ^^,

Tu pourrais fixer la largeur de ton menu et mettre un margin:auto;, ca permettrais de le centrer horizontalement normalement..

Bon je m'en suis sortie tout seul je viens de voir vos message.. MERCI quand même je post mon code pour ceux que ça pourrait aider.

#menuContent {
	margin: 0;
	padding: 0;
	width: 744px;
	height: 37px;
	background: url(../images/menu_bg.jpg) repeat-x;
	background-position: center;
	overflow: hidden;
}

#primary {
	width: 744px;
	height: 20px;
	margin-top: 8px;
}

#primary ul.links{
	margin: 0 auto;
	padding: 0; 
	text-align: center;
	list-style-type: none;
}

#primary ul.links li {
	display: inline;
	margin-right: 1px;
	padding: 0 20px;
}

#primary ul.links li a {
	text-align: center;
	line-height: 1em;
	text-shadow: #5C5C5C 0px 1px 3px;
	color: white;
	text-decoration: none;
}

#primary ul.links li a:hover {
	border-bottom: 3px solid white;
	/*
	background-position:0 -45px !important;
	pour realiser le marquage
	-------------------------
	*/
}

par contre j'ai une autre question concernant ce code, savez vous pourquoi sous internet explorer je n'ai aucune bordure en :hover.