[résolu]Probléme de centrage

Bonjour,

j'ai créer un code pour un menu horizontal tout se passe bien mise a part un problème de centrage de celui-ci. En effet, celui se positionne à gauche alors que je voudrais qu'il soit centé tout comme ma bannière. j'ai eu beau essayé avec le code margin left et right en auto, rien n'y fait.

Voici, les deux code (CSS et HTML)

CSS:
ul#menu2_b {
float:left;
width: 600px;
background:url(images/bg_menu2.jpg) 0 0 repeat-x;
margin:auto;
padding: 0;
list-style: none;
}

ul#menu2_b li {
float: left;
margin:auto; padding: 0;
}

ul#menu2_b li a {
float: left;
padding: 0 15px 0 15px;
color:#FFF;
font-weight:bold;
text-decoration:none;
height:30px;
line-height:30px;
}

ul#menu2_b li a:hover {
background:url(images/bg_menu2.jpg) 0 -30px repeat-x;
}

ul#menu2_b li a:active {
background:url(images/bg_menu2.jpg) 0 -60px repeat-x;
}

ul#menu2_b li .actif_b, ul#menu2_b li .actif_b:hover, ul#menu2_b li .actif_b:active {
background:url(images/bg_menu2.jpg) 0 -90px repeat-x;
}

HTML:
<ul id="menu2_b">
<li><a href="index.html" class="actif_b">Page d'accueil</a></li>
<li><a href="page1.html">Services</a></li>
<li><a href="page2.html">Portfolio</a></li>
<li><a href="page3.html">Partenaires</a></li>
<li><a href="page4.html">Liens</a></li>
<li><a href="page5.html">Contact</a></li>
</ul>

Merci de votre aide.

Cordialement.

Siandaqui
Modifié par siandaqui (11 Nov 2012 - 15:11)

Bonjour, tu utilises le float de manière abusive:
Supprime le dans ul#menu2_b et ul#menu2_b li
Bon courage

Ok j'essaie merci

En effet ca fonctionne, mais ça supprime mon image de fond

Il faut donner une hauteur à ta boite de ul#menu2_b et ça marche.

Merci Beaucoup Rodolpeb!!!!!

j'aurais pu y penser par contre à ça

De rien, marque le en résolu, ça peut toujours aider quelqu'un d'autre.

Bonjour,

pour celles et ceux que ça intéressent, je joins ici le code CSS et HTML de mon menu horizontal.

J'ai tellement apprécié l'aide rapide que l'on m'a fourni, que c'est la moindre des chose que je puisse faire!

Merci encore!

CSS:
ul#menu2_b {
width: 900px;
height:30px;
background:#C90 0 0 repeat-x;
margin:auto;
padding: 0;
list-style: none;
border-left-style:solid;
border-left-color:#C90;
border-left-width:3px;
border-right-style:solid;
border-right-color:#C90;
border-right-width:3px;
border-bottom-style:solid;
border-bottom-color:#C90;
border-bottom-width:3px;
}

ul#menu2_b li {
margin:auto; padding: 0;
}

ul#menu2_b li a {
float: left;
padding: 0 15px 0 15px;
color:#FFF;
font-weight:bold;
text-decoration:none;
height:30px;
line-height:30px;
}

ul#menu2_b li a:hover {
background:url(images/bg_menu2.jpg) 0 -30px repeat-x;
}

ul#menu2_b li a:active {
background:url(images/bg_menu2.jpg) 0 -60px repeat-x;
}

ul#menu2_b li .actif_b, ul#menu2_b li .actif_b:hover, ul#menu2_b li .actif_b:active {
background:url(images/bg_menu2.jpg) 0 -90px repeat-x;
}

HTLM:
<ul id="menu2_b">
<li><a href="index.html" class="actif_b">Page d'accueil</a></li>
<li><a href="page1.html">Qui sommes nous</a></li>
<li><a href="page2.html">Nos prestations</a></li>
<li><a href="page3.html">Nos tarifs</a></li>
<li><a href="page4.html">Nos coordonnées</a></li>
<li><a href="page5.html">Nous écrire</a></li>
</ul>

Pour vos pages suivantes, pensez à modifier le code html.

Exemple:
Pages d'accueil (index) le code sera:
<ul id="menu2_b">
<li><a href="index.html" class="actif_b">Page d'accueil</a></li>
<li><a href="page1.html">Qui sommes nous</a></li>
<li><a href="page2.html">Nos prestations</a></li>
<li><a href="page3.html">Nos tarifs</a></li>
<li><a href="page4.html">Nos coordonnées</a></li>
<li><a href="page5.html">Nous écrire</a></li>
</ul>
alors que pour la seconde page:
<ul id="menu2_b">
<li><a href="index.html">Page d'accueil</a></li>
<li><a href="page1.html" class="actif_b">Services</a></li> (modifier juste l'attribut class)
<li><a href="page2.html">Portfolio</a></li>
<li><a href="page3.html">Partenaires</a></li>
<li><a href="page4.html">Liens</a></li>
<li><a href="page5.html">Contact</a></li>
</ul>
et ainsi de suite sur chaque page.

J'espère avoir été assez clair.

Cordialement

Siandaqui