28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous, je vais tenter d'être clair dans ma requête:
Disons que j'ai une barre de menu horizontale composée de plusieurs images les unes à la suite des autres à l'intérieur d'une <div>. Jusqu'ici tout va bien.
Le problème c'est que lorsque je réduis la fenêtre de mon navigateur en largeur, la barre se coupe: la ou les dernières images de la barre finissent sur la ligne suivante, alors que je voudrais que tout reste sur une seule ligne, car je veux charger un script javascript de redimensionner à la volée les images qui la composent, de manière à ce qu'elle reste visible entièrement même avec une fenêtre microscopique.

Si j'ajoute:
white-space:nowrap;

à ma <div>, les images restent effectivement collées les unes aux autres, comme je le souhaite.
Mais dans ce cas là, si pour une raison quelconque le visiteur ne pouvait pas afficher lesdites images, les textes alternatifs se retrouveraient collés les uns aux autres, sur une seule ligne, au lieu de s'adapter à la fenêtre.

D'où ma question: y a-t-il une possibilité d'appliquer le "nowrap" uniquement aux images, et pas à leurs textes alternatifs ?
Modifié par Ono (29 Oct 2008 - 17:40)
Salut !

Sauf grosse erreur de ma part , due à l'heure tardive , je dirais complètement impossible à première vue. Tu peux pas "styler" un attribut en css ( quel qu'il soit) et ton texte est le remplacement de ton image , donc il va adopter le même positionnement et styles.

Pour pouvoir faire cette opération, il faudrait être capable de distinguer si les images ont été chargées par le browser, si ce n'est pas le cas , rajouter une classe distincte en JS qui supprime le no-wrap.

Faisable ca ? Je ne maitrise pas assez ce qu'on est capable de savoir a propos des evenements du navigateur pour te donner des conseils là dessus.

En plus , a mon avis y'a plus simple et sans passer par Javascript et des no-wrap pour ce que tu veux faire.......
a écrit :
Sauf grosse erreur de ma part , due à l'heure tardive , je dirais complètement impossible à première vue. Tu peux pas "styler" un attribut en css ( quel qu'il soit) et ton texte est le remplacement de ton image , donc il va adopter le même positionnement et styles.


Effectivement, après avoir bien cherché c'est ce qu'il me semble aussi...

a écrit :
Pour pouvoir faire cette opération, il faudrait être capable de distinguer si les images ont été chargées par le browser, si ce n'est pas le cas , rajouter une classe distincte en JS qui supprime le no-wrap.


Ah oui, je n'y avais pas pensé, le problème c'est que le nombre de boutons de ma barre est variable, ce qui va engendrer pas mal de tests. Est-ce que de multiples onLoad (un pour chaque image de la barre, si je comprends bien) ont un gros impact sur le navigateur du client ? En tout cas oui ça me semble faisable.

a écrit :
En plus , a mon avis y'a plus simple et sans passer par Javascript et des no-wrap pour ce que tu veux faire.......


Je suis ouvert à toutes les suggestions, merci de t'être penché sur ma question.
Bonjour,

Pourquoi ne pas avoir utilisé width pour bloquer la largeur du conteneur des images?
Bonjour,
a écrit :
Pourquoi ne pas avoir utilisé width pour bloquer la largeur du conteneur des images?

Je ne sais plus, il me semble que c'est parce que les images débordaient du div.