Forum d'entraide PHPFrance

Bonjour à tous,

j'ai un menu horizontal qui se trouve dans une balise div.
J'ai tenté un centrage horizontal du menu. ça marche sous ie, pas sous ff.

L'exemple est visible ici:
http://82.227.167.30/lrb/livraison/mathias/t1_1/

Mon code HTML pour le menu:

<div id="menu_haut"> <!-- MENU HAUT -->
	<ul class="menu_haut">
		<li><a class="menu_item" href="#">Présentation</a></li>
		<li><a class="menu_item" href="#">Nos Livres</a></li>
		<li><a class="menu_item" href="#">Contact</a></li>
		<li><a class="menu_item" href="#">Les Salons</a></li>
		<li><a class="menu_item" href="#">Informations</a></li>
		<li><a class="menu_item" href="#">Divers</a></li>
		<li><a class="menu_item" href="#">Catalogue</a></li>
		<li><a class="menu_item" href="#">Créer</a></li>
	</ul>
</div> <!-- FIN MENU HAUT -->

Et le css:

#menu_haut
{
	margin-bottom: 20px;
	height: 31px;
	background-image: url(../images/menu_entrebtn.gif);
	background-repeat: repeat-x;
}

ul.menu_haut
{
	margin-left: 0px;
}

a.menu_item 
{
	background-image: url(../images/bouton_off.gif);
	height: 31px;
	line-height: 31px;
	text-align: center;
	text-decoration: none;
	width: 110px;
	display: block;
	margin: 0px;
	padding: 0px;
	float: left; 
	margin-left: 5px;
	color: #7e7e7e;

}

a.menu_item:hover 
{
	height: 31px;
	line-height: 31px;
	text-align: center;
	text-decoration: none;
	background-image:url(../images/bouton_on.gif);
	width: 110px;
	margin: 0px;
	padding: 0px;
	float: left; 
	margin-left: 5px;
	color: #ffffff;

}

Ma question: comment faire pour centrer le menu dans la balise div?
Merci pour vos réponses.

Avec les magin, cela devrait pouvoir se faire ...

Si tu as un nombre de lien fixe, voici comment procéder. J'ai testé ça avec IE7, Firefox et Opera et dans les trois cas, ça fonctionne bien.
-1- Donner une dimension au bloc menu_haut (largeur de chaque lien x nombre de liens) et lui mettre un margin horizontal automatique;
-2- Supprimer toutes les marges (internes comme externes) des éléments contenus dans ce bloc.

J'ai en outre supprimé pas mal de superflu et ajouté quelques détails. Tu ajusteras la couleur d'arrière plan des liens au besoin selon ta charte graphique, mais même si tu as une image en arrière-plan, si tu mets une couleur en avant-plan, afin d'être strictement conforme, il faut une couleur d'arrière-plan, surtout si le lien devient blanc au survol : imagines que pour une raison quelconque l'image n'apparaisse pas, avec un fond de page en blanc, au survol, le lien disparait.

Ça donne ceci :
J'ai noté que tu avais mis une image en arrière-plan du bloc : dans ce cas, elle devient inutile puisque invisible. Si tu veux garder un espace entre tes liens, alors ajoute leur une marge externe horizontale et adapte la largeur du bloc div, sinon, tu auras un retour de ligne pas très esthétique. Si tu veux garder une image en arrière-plan du menu qui couvre la largeur de la page, alors englobe le bloc de menu à l'intérieur d'un autre bloc et mets cette image en arrière-plan de ce contenant parent.