Menu horizontal CSS: Passage à la ligne des boutons

Bonjour,

J'ai commencé à réaliser un menu horizontal en CSS, composé de boutons.

Pour faire les boutons, j'ai crée l'image de fond arrondie du bouton avec
un logiciel de retouche d'image et j'utilise la technique hybride text/CSS.
Au survole du bouton, la couleur du bouton change.

Pour le menu, j'ai utilisé une liste, et j'ai procédé comme décrit dans les tutoriels
sur les menus, dans ce site. Etant donné que le fond de mes bouton est une
image, j'ai utiliser display:block; et float: left;

L'alignement et le fonctionnement des boutons sont parfait, mais le soucis
apparaît avec firefox losque la taille de la fenètre est insuffisement agrandie
pour permettre d'y voir tous les boutons. A ce moment là, les boutons
invisibles passent à la ligne, ce qui me gène estètiquement parlant.

J'ai remarqué que celà se produisait aussi avec les exemples présents
de vos tutoriels: lorsque l'on diminue la fenètre de firefox, les boutons
de l'exemple ne pouvant être affiché dans la fenètre sont automatiquement
mis à la ligne.

Je suis à la recherche d'un moyen d'éviter celà sur mon site car mon menu
est déjà sur 2 lignes et lorsque celà ce produit, le menu passe alors sur 4 lignes.

En gros, je souhaiterais que les boutons restent sur la ligne, même si on
diminue la taille de la fenètre de firefox.
J'ai essayer de fixer white-space à nowrap mais celà n'y change rien.

Je pense que celà est du à l'usage de float.

Bonjour,

Dans ce cas, donner une largeur fixe en pixels au conteneur des boutons (à priori ul, correspondant à la largeur désirée pour la ligne de menu. Si besoin, on pourra aussi positionner en absolu ce conteneur.

Sinon, à partir de quelle largeur ce problème se pose-t-il? Parce qu'il est possible de préciser une largeur minimale (par exemple: 700px) pour un site, via la propriété min-width.

Merci pour votre réponse,

J'ai déjà tenté de mettre une largeur maximale pour ul, mais visiblement, çà
ne résoud pas le problème.

Je vais tenter de positionner le conteneur en absolu...

Le passage à la ligne se produit quelque soit la largeur. Dès que l'on diminue
la largeur de la fenètre de firefox, les boutons qui ne sont plus visibles dans
la fenètre passent à la ligne.

Bonjour,

Florent V. dit :

a écrit :
il est possible de préciser une largeur minimale (par exemple: 700px) pour un site

Il te propose donc de limiter la largeur du conteneur global du site.

Tu réponds :

a écrit :
J'ai déjà tenté de mettre une largeur maximale pour ul

Modifié par Gihef (11 Aug 2007 - 22:47)

etux a écrit :
Le passage à la ligne se produit quelque soit la largeur.

C'est à dire aussi bien en 400px de largeur qu'en 1600px de largeur?
Ça m'étonne un peu, là...

etux a écrit :
Dès que l'on diminue la largeur de la fenètre de firefox, les boutons qui ne sont plus visibles dans la fenètre passent à la ligne.

Quand tu dis « les boutons qui ne sont plus visibles», tu penses aux boutons qui ne tiennent pas dans la largeur normale de leur conteneur?

Sinon, je crois qu'avec une page en ligne ça serait plus explicite, et plus simple pour voir ce que tu as fait et proposer des solutions.

a écrit :

Gihef a dit:
Il te propose donc de limiter la largeur du conteneur global du site.

En fait je ne faisais pas référence à celà dans ma réponse, c'étais juste une précision que je donnais sur quelque chose que j'avais tenté, je faisais référence à une partie de sa phrase :

a écrit :

Florent V. a dit:
à priori ul, correspondant à la largeur désirée pour la ligne de menu. Si besoin, on pourra aussi positionner en absolu ce conteneur."

J'ai ensuite essayer ce qu'il m'a proposé et il semble en effet que çà fonctionne.

Sinon,

a écrit :

Florent V. a dit:
Quand tu dis « les boutons qui ne sont plus visibles», tu penses aux boutons qui ne tiennent pas dans la largeur normale de leur conteneur?

Sinon, je crois qu'avec une page en ligne ça serait plus explicite, et plus simple pour voir ce que tu as fait et proposer des solutions.

Pour une page d'exemple, c'est simple, çà le fait avec la page du tutoriel sur
les menu css.
http://css.alsacreations.com/xmedia/exemples/menunew/menu3.html

J'ai essayer sur un internet explorer et ce problème ne se produit pas, il semble
que ce soit propre à firefox.
Je pensais avoir été clair, je vais essayer d'expliquer autrement:

Quand on prend par exemple la page d'exemple de menu ci dessus, avec firefox
et que l'ont a une taille de fenètre insuffisante, le bouton "Item 5" va passer
à la ligne et se retrouver en dessous du bouton "Item 1", et quand si on diminue encore la fenètre, le bouton "Item 4" passera aussi à la ligne.

En gros quand je parle de boutons non visible, en effet, je parle des boutons
qui ne rentre plus dans le conteneur lorsque la taille de la fenètre de firefox
est insuffisement grande pour contenir tout les boutons visible sur la même
ligne. A ce moment là, les dits boutons passent à la ligne.

Je viens d'essayer de déterminer la taille du conteneur et en effet celà
semble fonctionner, les boutons ne passent plus à la ligne.

Je pense que c'est un problème qu'il pourrait être interessant de préciser dans
le tutoriel.

Merci pour votre aide.
Modifié par etux (12 Aug 2007 - 01:25)

etux a écrit :
Je viens d'essayer de déterminer la taille du conteneur et en effet celà semble fonctionner, les boutons ne passent plus à la ligne.

Oui. Sur l'exemple du tutoriel, il suffit de déclarer ceci:

#nav {width: 766px;}

Le positionnement absolu étant ici inutile (je précise parce que je l'évoquais plus haut).

etux a écrit :
Je pense que c'est un problème qu'il pourrait être interessant de préciser dans le tutoriel.

Hmm... faut voir. Pour ma part, je préfère que les boutons passent à la ligne et restent facilement utilisables, surtout s'ils sont prévus pour tenir dans la largeur sur un écran en 1024 mais pas en 800x600.
Modifié par Florent V. (12 Aug 2007 - 11:34)