Effectivement tu réunis beaucoup de contraintes en même temps (texture du background, position variable du menu, ajout de rubriques) la je sèche... Je pense que tu devrais alors simplifier ton design. Si tu veux absolument ce rendu et ne pas utiliser JavaScript, je pense que tu n'as pas le choix, à chaque rajout de rubrique tu devra réadapter ton menu. Maintenant en passant par un peu de JavaScript et en considérant que la largeur de ton <ul class="nav"> est fixe (pour pouvoir le centrer dans ta page) tu devrait peut être réussir à faire quelque-chose. Pour ta bande qui fait la largeur totale, soit effectivement tu l'intègre en background-image centrer avec un "trou" au centre soit tu utilises un tableau (qui doit faire 100% de la largeur de ta fenêtre) ayant dans la 1ère et 3ème colonne ton png transparent.
La logique que j'ai en tête pour la gestion dynamique en JS :
- récupérer la largeur totale de tes <li> (avec Jquery ou mootools c'est relativement simple)
- tu soustrait à la largeur de ton <ul> (en px) le total de la largeur de tes <li> enfants
- tu injectes en JS avant ou après tes <li> (en fonction de l'alignement souhaité de ton menu) un nouveau <li> ayant comme largeur le différentiel calculé précédemment
Voila mon idée qui devrait marcher sans trop de problèmes.
Voici le code source "statique" pour créer ton menu (bien-sûr c'est juste exemple vite fait, que tu peux améliorer, optimiser et comme indiqué précédemment rendre "dynamique" avec JS) :
<table>
<tr>
<td class="col"></td>
<td><ul>
<li><a href="#">Rubrique 1</a></li>
<li><a href="#">Rubrique 2</a></li>
<li><a href="#">Rubrique 3</a></li>
<li><a href="#">Rubrique 4</a></li>
<li><a href="#">Rubrique 5</a></li>
<li class="remplissage"></li>
</ul></td>
<td class="col"></td>
</tr>
</table>
html, body { margin:0; padding:0; width:100%; height:100%; background-image:urlimages/bg.jpg);}
table { width:100%; border-collapse:collapse; margin:50px 0 0 0;}
table td { width:960px; padding:0;}
table .col { width:auto; background-image:url(images/bande-verte-haut.png);}
ul { width:960px; margin:0; padding:0; overflow:hidden;}
li, li.remplissage:hover { float:left; height:30px; line-height:30px; list-style:none inside; background-image:url(images/bande-verte-haut.png); }
li a { color:#FFF; font-size:12px; text-decoration:none; text-align:center; display:block; width:120px;}
li:hover { background:url(images/coche-vert.png) center top;}
li.remplissage { width:360px; /* Largeur restante à combler */}
Je pense que ça devrait le faire !
Tiens moi au courant.
PS : Si quelqu’un à une idée pour faire quelque-chose d’identique sans tableau. Plus trop d'idées là, il est tard je n'arrive plus à réfléchir ! ^^
Youpiii je viens de voir que c'est mon 100ème post, ça se fête non lol
Aller j'arrête la fatigue commence à me faire perdre la raison
Modifié par Spacedementia (29 Jul 2011 - 00:27)
