28173 sujets

CSS et mise en forme, CSS3

Bonjour,
Je vous expose mon problème : j'ai un menu horizontal déroulant. Il est prévu pour être sur une seule ligne. Le problème est que si l'utilisateur à une petite résolution ou qu'il agrandit la taille du texte, le menu se retrouve sur deux lignes.
J'aimerais faire en sorte qu'il soit toujours sur une seule ligne sachant qu'il se présente comme ceci :
<ul>
	<li><a href="#">...</a></li>
	<li><a href="#">...</a></li>
	<li><a href="#">...</a></li>
</ul>


Merci d'avance.
Modifié par the_penguin (07 Oct 2006 - 22:21)
< the_penguin

forcer les ascenseurs horizontaux, c'est la seule solution mais c'est moche, donc, impossible.la seule solution est de penser 800x600 et pas plus avec un maximum de 780px de large pour l'ensemble et en laissant une marge gauche et droite de 10px comme sécurité pour le redimensionnement des polices.
Modifié par keran (07 Oct 2006 - 22:39)
J'ai effectivement pensé 800*600 au départ mais maintenant je pense "accessibilité aux personnes qui agrandissent la police et aux résolutions plus petites encore"...
the_penguin a écrit :
J'ai effectivement pensé 800*600 au départ mais maintenant je pense "accessibilité aux personnes qui agrandissent la police et aux résolutions plus petites encore"...

À vue de nez, deux solutions :

1/ Prévoir le passage de la liste sur deux ligne (extensibilité en hauteur obligatoire !), et s'arranger pour que cela reste esthétique/fonctionnel même si pas optimal.

2/ Positionner la liste en absolu, de sorte qu'elle prendra la largeur de son contenu et ne sera plus limitée par la largeur de son conteneur.

La deuxième solution pose plusieurs problèmes, c'est donc à manier avec précautions.
Modifié par mpop (08 Oct 2006 - 13:08)
dans mon cas, la première solution est dificilement envisageable étant donné que c'est un menu graphique...
Pour la deuxième solution, quels sont les problèmes si, par exemple, je positionne en absolue et je ne définie ni left, ni top, ni right, ni bottom ?
the_penguin a écrit :
dans mon cas, la première solution est dificilement envisageable étant donné que c'est un menu graphique...

Des items de menu en images (plus une des techniques qui vont bien pour rendre ça accessible), alors ?

the_penguin a écrit :
Pour la deuxième solution, quels sont les problèmes si, par exemple, je positionne en absolue et je ne définie ni left, ni top, ni right, ni bottom ?

Le principal problème vient du fait que le bloc sort du flux, et donc qu'il faudra bien penser à donner une hauteur fixe (en em, par exemple) au conteneur du menu, ou bien un margin-top qui va bien à l'élément suivant.
Ensuite, il faudra faire attention à la lisibilité du texte qui sortira de la zone du conteneur principal (utiliser une couleur de fond).
Pour le reste... je sais plus exactement, mais bon il faudra tester la viabilité de la solution.
Au hazard comme ça (j'ai pas testé mais on sais jamais)

Si tu definis un attribut
wite-space: no-wrap;
au niveau du UL (et des LI tant qu'à faire) ça fonctionnerais pas ?
pourquoi pas essayer de jouer avec les overflow aussi.
Modérateur
bonjour,

sous IE6 le white space donne le resultat escompté , par contre des listes de menu sur une ligne sans retour , ça peut etre prise tête pour le visiteur:
http://gcyrillus.free.fr/trucs_css/menu_horizontal_sans_retour-a_la_ligne.html

c'est une page test/bricoles ou l'idée etait de s'approcher d'un comportement qui ne "boguer" pas trop.

A prendre pour ce que ça vaut .

++

<edit> jouer sur la largeur de la fenetre pour voir , l'effet desagreable que peut avoir ce genre de liste, pas terrible le scroll ou le debordement </edit>
Modifié par gcyrillus (10 Oct 2006 - 01:24)