28220 sujets

CSS et mise en forme, CSS3

[Abandonné] Centrage de menu

Salut,

Je n'ai pas voulu empiéter dans le topic précedent sur le même sujet car mon problème est un peu différent. Le menu comporte des sous-menus qui apparaissent sur li:hover.
Le code css:

#navcontent {
border:0;
padding:0;
margin:0;
width:760px;
height:30px;
background:url(images/clip.gif) no-repeat 100% 50%;
text-align:center;
}
#menu {
display:block;
position:relative;
top:0;
margin-left:0;
font:normal 1em/18px Lucida Sans, Trebuchet MS, Tahoma, Geneva, Verdana, Arial, Helvetica, sans-serif;
z-index:15;
text-align:center;
}
#menu ul {
border:0;
padding:0;
margin:0;
list-style-type:none;
}
#menu li {
border-width:0;
padding:0 3px;
display:inline;
float:left;
margin:0;
position:relative;
}
#menu a {
display:block;
}
html #menu li a {
position:relative;
}
#menu li ul {
visibility:hidden;
position:absolute;
}
#menu li li {
width:100%;
}
#menu li li ul {
left:100%;
top:0;
}
div#menu li:hover ul {
visibility:visible;
}
#menu li:hover li:hover ul {
visibility:visible;
}
#menu li:hover li:hover li:hover ul {
visibility:visible;
}
div#menu li:hover li ul {
visibility:hidden;
}
#menu li:hover li:hover li ul {
visibility:hidden;
}
#menu li:hover li:hover li:hover li ul {
visibility:hidden;
}
#menu a:hover {
color:#fff;
background:#339e35;
}
#menu li:hover {
background:#fff url(sit_img/nav.jpg);
color:#fff;
}
#menu a {
padding:1px 15px;
color:#fff;
text-decoration:none;
border:1px solid #fff;
background:#60c659;
}
#menu li ul {
border:1px solid #3a7728;
width:160px;
color:#fff;
background:#fff;
}
#menu li ul a {
text-align:left;
}


Le HTML
<div id="navcontent">
<div id="menu">
<ul>
<li><a title="Accueil du site (Access Key 1)" accesskey="1" href="index.html">Accueil</a> </li>
<li><a title="Etablissements (Access Key 2)" accesskey="2" href="#">Etablissements</a>
<ul>
<li><a href="#" title="Etablissement de La Ferté Saint Aubin">La Ferté</a></li>
<li><a href="#" title="Etablissement de Boigny sur Bionne">La Ferme de Boigny</a></li>
</ul>
</li>
<li><a title="L'association (Access Key 3)" accesskey="3" href="#">L&#39;association</a> </li>
<li><a title="Ecrivez-nous (Access Key 4)" accesskey="4" href="contact.htm">Contact</a> </li>
</ul>
</div>
</div>


Le résultat

upload/1376-bandeau.png
Modifié par papyjo (06 Sep 2005 - 18:37)
Salut,

Je cherche à centrer le menu dans la div #navcontent. Je n'ai pas plus explicité car le titre me semblait suffisant.

J'ai tout essayé et pas de solution.
Regardes du côté des margin:auto pour le bloc menu. Mais en le laissant à 100%, ça ne sera pas possible je pense. Il te faudrait en spécifier sa taille et le positionner dans #navcontent avec des valeurs auto pour la marge gauche et la marge droite.
Sujet clos
Aller à