Problème menu avec liste

Bonjour,

J'ai d'énormes problèmes afin de réaliser mon menu. Voici la page d'exemple :

http://shunyweb.info/test_v2/

Comme vous pouvez peut-être le voir, ça marche. Enfin, la réalité, c'est que ça marche en apparence. Essayez de redimensionner votre page. Là, en théorie, c'est le drame : Des éléments du menu, plutôt que de se cacher à droite de la page (avec une scrollbar qui va bien pour y accéder), débordent du <ul> et viennent se mettre pile au dessous du premier élément.

Je n'ai rien contre les menu multi-lignes, je pourrais même peut-être lancer une mode, toujours est-il que ce n'est pas vraiment comme ça que j'aimerais que ça réagisse.

J'ai a peu près tout essayer (et parfois, pour être sincère, sans trop comprendre) : Jouer avec le paramètre overflow, float, clear, display:block/inline/inline-block etc ... Je n'ai jamais réussi à garder les éléments dans le <ul> après redimensionnement de la page

Une chose qui m'étonne est que quand vous redimensionnez la page, c'est au moment ou le premier pixel non affichable d'un élément disparaît que l'élément revient à la ligne. (Mais c'est peut-être pas lié)

Bref je dois vous avouer qu'aujourd'hui, je n'aime pas le CSS et il me le rend bien

Merci d'avance

Bonjour,

apparemment tu as mis "width: 100%" pour ton "ul#menu". Donc tu as 2 solutions :
1. soit tu fixes la taille de ta liste :
ul#menu{
width: 800px;/*par exemple*/
}

2. soit tu fixe une taille minimum (egale à la somme des largeurs de tes boutons et de tes séparateurs :
ul#menu{
width: 100%;
min-width: 800px;/*par exemple, attention, non reconnu sous ie*/
}

cela revient au même dans ton cas.

Pour info, si tu fixes à 100% comme tu l'as fait, en redimensionnant la fenêtre, comme les 100% ne sont plus suffisant pour afficher ta liste, elle se place sur plusieurs lignes.

Hello,

proximcreation a écrit :

min-width: 800px;/*par exemple, attention, non reconnu sous ie*/

Non reconnu par IE6 uniquement.

Bonjour et merci pour vos solutions - je n'aurais jamais deviné que ça pouvait venir de là.

Le problème du width: 800px est que si la largeur de l'écran est supérieur à 800px alors le menu ne sera pas visible dans les pixels "en trop". Quant au problème du min-width, c'est évidemment le problème de la compatibilité avec IE6.

Au final ce que j'ai fait : un div, width 100%, background avec l'image de mon choix. Dedans le ul, avec une width a x pixels (ou x sera la taille définitive de mon menu, pas encore fixée), qui contient donc les li.

Ca marche sous FF et IE 8 pour l'instant, à tester sur d'autres navigateurs mais ça me semble bon.

Merci pour votre aide