[display] Affichage de blocs "en ligne" (inline)

Bonjour à tous,

J'ai un chti pb à soumettre à nos maîtres du CSS : je voudrais afficher des images avec une légende côte à côte, et une ligne en dessous de l'autre.

Pour écrire mes images avec légende, je fais ceci :

Code:

---

1 2 3 4 5

<p> <div><img src="image1.jpg"><br>ma légende 1</div> <div><img src="image2.jpg"><br>ma légende 2</div> ... </p>

---

L'inconvénient est que les images (à cause des DIV) sont mises les unes en dessous des autres. J'ai donc tenté d'utiliser <span> prévu pour le "inline" en HTML :

Code:

---

1 2 3 4 5

<p> <span><img src="image1.jpg"><br>ma légende 1</span> <span><img src="image2.jpg"><br>ma légende 2</span> ... </p>

---

Mais là, c'est pas terrible non plus, car le texte et les images sont mises "n'importe comment".

:idea: D'où l'idée d'utiliser l'attribut CSS display : avec <span style="display: inline-block;">, ça marche nickel avec IE mais pas avec FF :evil:

:?: Alors, que faire ?

Question subsidiaire : comment faire pour afficher la légende en dessous des images de façon pûrement "CSS spirit" ? Pour le moment, je suis obligé de mettre un <br> entre l'image et le texte, mais je ne trouve pas ça terrible...

css => float:left ...

Ah, bien tenté !!! Mais ça ne me va pas, car dans ce cas, si une image est trop haute, je peux me retrouver avec deux images placées verticalement à sa droite. Désolé, mais je ne peux pas faire de capture d'écran pour vous montrer. Ca peut donner ça :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

-------------- -------------- -------------- | | | | | image3.jpg | | | | | | | | image1.jpg | | | -------------- | | | | legende 3 | | | image2.jpg | | | | | -------------- -------------- | | | image4.jpg | legende1 | | | | | | -------------- -------------- legende 4 legende 2

---

Alors que je voudrais ça :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

-------------- -------------- -------------- | | | | | image3.jpg | | | | | | | | image1.jpg | | | -------------- | | | | legende 3 | | | image2.jpg | | | | | -------------- | | legende1 | | | | -------------- legende 2   -------------- | image4.jpg | | | -------------- legende 4

---

ou ça, en fonction de la place disponible en largeur (notez bien l'emplacement de image4.jpg dans l'exemple ci-dessus) :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

-------------- -------------- -------------- -------------- | | | | | image3.jpg | | image4.jpg | | | | | | | | | | image1.jpg | | | -------------- -------------- | | | | legende 3 legende 4 | | | image2.jpg | | | | | -------------- | | legende1 | | | | -------------- legende 2

---

J'ai oublié de précisé que j'avais fait le test dans mon premier post. C'est d'ailleurs la solution temporaire que j'utilise actuellement.[/code]

alors là c'est un cas pour SIBELIUS ...

j'aurais bricolé avec la taille des divs ...

Je m'en remets à vous. Si j'ai bien compris les CSS, "display: inline-block" devrait résoudre mon pb, mais c'est frustrant de voir que seul IE y arrive !!!!

Salut,

As-tu toujours 4 images? Sont-elles toujours les mêmes? Je pense que la réponses aux deux questions est non. Si c'est le cas, cette formulation est-elle correcte? "mettre sur la même ligne autant d'images que possible selon la taille de l'écran et aller automatiquement à la ligne" (remarque je ne sais pas si ma formulation est claire...)

Citation:

---

Envoyé par franculo_caoulene

"mettre sur la même ligne autant d'images que possible selon la taille de l'écran et aller automatiquement à la ligne"

---

C'est tout à fait ça, sauf que je rajoute du texte en dessous des images. Sinon, effectivement, y a pas de pb car "<img ...> <img ...>" fait exactement ce que je veux. Du coup, ça résume bien mon pb : pouvoir ajouter du texte en dessous des images tout en conservant le mécanisme native "<img ...> <img ...>".