Centrer un menu horizontal déroulant [Résolu/Fermé]

Signaler
-
 Nicoolympe -
Bonjour,

voila j'ai créer un menu horizontal déroulant, qui marche parfaitement, cependant je n'arrive pas à le centrer. J'ai bien réussi à le centrer grossièrement, mais quand je change de résolution, il ne l'est plus. Donc comment faire pour qu'il le soit pour chaque résolution? (avec le code que je vais donné, le menu se trouve à gauche)

Voici le code xhtml:
<div align="center" id="menu_deroulant">
<ul>
<li>
<a href="#">Accueil</a>
</li>
<li>
<a href="#">Membres</a>
<ul>
<li><a href="#">Connexion</a></li>
<li><a href="#">Inscription</a></li>
</ul>
</li>
<li>
<a href="#">Divers</a>
<ul>
<li><a href="#">Forum</a></li>
<li><a href="#">Liens</a></li>
<li><a href="#">Nous contacter</a></li>
<li><a href="#">Recherche</a></li>
</ul>
</li>
<li>
<a href="#">Mythologie</a>
<ul>
<li><a href="#">Grecque</a>
<ul>
<li><a href="#">Zeus</a></li>
<li><a href="#">Hades</a></li>
</ul>
</li>
<li><a href="#">Romaine</a></li>
</ul>
</li>
<li>
<a href="#">Mystères</a>

</li>
</ul>
</div>


Et le code CSS:

#menu_deroulant
{
height: 10px;
margin: 0 auto;
width:100%;
margin-bottom:2%;
font-weight : bold;
font-family : "Comic Sans MS", Arial, "Arial Black", "Times New Roman", Times, serif;
font-size : 12px;
}
#menu_deroulant ul /* Liste */
{
padding : 0;
margin: 0;
list-style-type : none;
line-height : 21px;
text-align : center;
}
#menu_deroulant li /* Elements des listes */
{
float : left;
margin:auto;
padding:0;
background : #003b71;
border-right : 1px solid #fff;
}
#menu_deroulant li a /* Contenu des listes */
{
display : block;
padding : 3px;
color : #fff;
text-decoration : none;
width : 100px;
}
#menu_deroulant li ul
{

position:absolute;
}
#menu_deroulant ul li ul /* Sous-listes */
{
display:none;
position: absolute;

left: -200em;
}
#menu_deroulant ul li:hover ul
{
display:block;
}
#menu_deroulant li:hover ul li
{
float:none;
}
#menu_deroulant li ul li /* Éléments de sous-listes */
{
border-top : 1px solid #fff;
}
#menu_deroulant li ul ul
{
margin : -28px 0 0 106px ;
border-left : 1px solid #fff ;
}
#menu_deroulant a:hover /* Lorsque la souris passe sur un des liens */
{
color: #000;
background: #bfd0ff;
}
#menu_deroulant li:hover ul ul, #menu_deroulant li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
left: -200em;
}

#menu_deroulant li:hover ul, #menu_deroulant li li:hover ul, #menu_deroulant li.sfhover ul, #menu_deroulant li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto;
min-height: 0;
}


Merci.

5 réponses

Messages postés
116
Date d'inscription
mardi 26 janvier 2010
Statut
Membre
Dernière intervention
19 janvier 2011
18
Salut,

Dans ton CSS, change le width de la div de ton menu déroulant, tu met la largeur en pixel de tes menus (5*100px) et tu ajoute les paddings (dans ton exemple ça donne 535px .... après tout roule

#menu_deroulant
{
height: 10px;
margin: 0 auto;
width:535px;
margin-bottom:2%;
font-weight : bold;
font-family : "Comic Sans MS", Arial, "Arial Black", "Times New Roman", Times, serif;
font-size : 12px;
}
C'est parfait, je me suis cassé la tête à savoir qu'est ce qui allait pas alors que c'était juste ca lol, je te remercie!
Juste une dernière chose, comment tu es arrivé à 535px? avec la largeur en pixel de mes menus ok, mais pour les paddings je comprend pas.
Messages postés
116
Date d'inscription
mardi 26 janvier 2010
Statut
Membre
Dernière intervention
19 janvier 2011
18
Pour trouver 535px, j'ai fais comme ça :

Tu as 5 éléments de menu avec 100px de largeur (5x:100 = 500px)
Tu as défini :
{
display : block;
padding : 3px;
Donc 3px de plus à droite et à gauche de chaque élément de menu (5x3x2 =30px)

Tu as aussi défini :
Border : 1px
Donc 5px de plus... (5px)

500+30+5 ....
Je sais pas si c'est complètement exact comme solution mais ça à l'air de fonctionner chez toi !!
Oki j'ai mieux compris maintenant ^^, je te remercie encore, ca m'a bien aidé! (je comprend mieux le fonctionnement aussi).