Discussion :

[_Mac_]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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".

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

: 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...

[SpaceFrog]

css => float:left ...

[_Mac_]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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]

[SpaceFrog]

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

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

[_Mac_]

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 !!!!

[franculo_caoulene]

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...)

[_Mac_]

"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 ...>".