Bonjour à tous, et d'avance, joyeuses fêtes !
J'ai un certain problème métaphysique qui me tourmente depuis 2/3 jours et que je n'arrive pas à résoudre...
J'ai un menu déroulant à un seul niveau, bien évidement en css.
J'ai utilisé comme référence la très bonne explicaiton de Pompage.
Pourtant un problème se pose. Mon menu principal ne pouvant pas avoir de taille fixe (à moins de les définir pour chaque lien), je voudrai que le sous menu n'apparaisse pas sous le début du lien principal (vous suivez ?), et donc décallé vers la droite, mais centré par rapport au lien principal.
Pour l'instant j'ai trucqué en donnant un margin-left:-xxx px; que j'ai spécifié pour chaque ul de sous menu. Mais c'est lourd, pas propre, pas pratique si on modifie quelque chose...
Bref je cherche une solution sans succès. Logiquement il faudrait pouvoir centrer le sous menu par rapport au menu, j'ai bien essayé un text-align:center et autres variantes, mais sans succès.
Et un extrai du html pour l'exemple :
Le site : http://wip.blada.fr
La CSS : http://wip.blada.fr/include/style.css
Merci d'avance à tous les pros qui auraient une idée
Modifié par Daweb (21 Dec 2005 - 19:20)
J'ai un certain problème métaphysique qui me tourmente depuis 2/3 jours et que je n'arrive pas à résoudre...
J'ai un menu déroulant à un seul niveau, bien évidement en css.
J'ai utilisé comme référence la très bonne explicaiton de Pompage.
Pourtant un problème se pose. Mon menu principal ne pouvant pas avoir de taille fixe (à moins de les définir pour chaque lien), je voudrai que le sous menu n'apparaisse pas sous le début du lien principal (vous suivez ?), et donc décallé vers la droite, mais centré par rapport au lien principal.
Pour l'instant j'ai trucqué en donnant un margin-left:-xxx px; que j'ai spécifié pour chaque ul de sous menu. Mais c'est lourd, pas propre, pas pratique si on modifie quelque chose...
Bref je cherche une solution sans succès. Logiquement il faudrait pouvoir centrer le sous menu par rapport au menu, j'ai bien essayé un text-align:center et autres variantes, mais sans succès.
#menu ul { clear:both; height: 24px; margin: 0; padding: 0; background: #0f337f; list-style-type: none; z-index: 10;}
#menu li { float: left; text-align: center; font:bold 9pt/18px Verdana,sans-serif; padding:3px 13px 3px 14px;}
#menu li a { margin:0; color:#fff; text-decoration:none; display:block;}
#menu li a:hover { color:#ffe24e;}
#menu li ul { position: absolute; left: -999em; border:0; background:#0f337f; width:130px; text-align:center; margin-top:3px;}
#menu li:hover ul,
#menu li.sfhover ul { left: auto; margin:auto; }
#menu li ul li { float:none; background:#0f337f; padding:0; font:normal 7pt/22px Verdana,sans-serif; color:#fff; border-bottom:1px solid #9b9b9b;}
#menu li ul li a { width:100%;}
#menu li ul li a:hover,
#menu li ul li a:focus { background:#2b56b1; color:#ffe24e;}
Et un extrai du html pour l'exemple :
<ul id="menu">
<li>
<a href="/" accesskey="1" id="nav1">Accueil</a>
</li>
<li>
<a href="sorties/" id="nav2">Sorties</a>
<ul style="width:140px; margin-left: -46px;">
<li><a href="sorties/prochaines/">Sorties par dates</a></li>
<li><a href="sorties/communes/">Sorties par communes</a></li>
</ul>
</li>
<li>
<a href="boite-aux-lettres/" id="nav6">Boîtes aux lettres</a>
<ul style="width:150px; margin-left: -18px;">
<li><a href="boite-aux-lettres/courrier/lecture.htm">Courrier des lecteurs</a></li>
<li><a href="boite-aux-lettres/annonces/lecture.htm">Petites annonces</a></li>
<li><a href="boite-aux-lettres/emploi-formation/offre.htm">Emploi-Offres</a></li>
<li><a href="boite-aux-lettres/emploi-formation/demande.htm">Emploi-Demandes</a></li>
<li><a href="boite-aux-lettres/infos-citoyennes/communiques.htm">Infos citoyennes</a></li>
</ul>
</li>
</ul>
Le site : http://wip.blada.fr
La CSS : http://wip.blada.fr/include/style.css
Merci d'avance à tous les pros qui auraient une idée

Modifié par Daweb (21 Dec 2005 - 19:20)