Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Problème avec display: inline

4 réponses
Avatar
Mathieu Goutelle
Bonjour,

J'ai actuellement un album photo avec des vignettes présentées de cette
façon :

<img src="..." [...]>
<img src="..." [...]>
<img src="..." [...]>
<img src="..." [...]>
<img src="..." [...]>
<img src="..." [...]>

L'avantage est que tout est redimensionnable et que je ne fixe pas le
nombre d'images par ligne. Maintenant, je voudrais ajouter des légendes
aux vignettes tout en gardant cette avantage. J'avais pensé à mettre
vignette et légende dans un <div style="display: inline"> mais ça ne
fonctionne pas :

<div style="display: inline">
<img src="..." [...]>
<div class="legende">Lorem Ipsum</div>
</div>
<div style="display: inline">
<img src="..." [...]>
<div class="legende">Lorem Ipsum</div>
</div>

En fait ce que je voudrais, c'est que le bloc image + légende se
comporte comme l'image seule. Le mieux que j'ai trouvé est de mettre
les div en float, avec l'inconvénient d'être obligé de fixer la hauteur
des <div> (sinon, ça peut faire des bizarreries si une des vignettes
est plus haute que les autres). Je ne suis pas satisfait de ça car ça
oblige à réserver de l'espace (au moins 2 lignes) pour la légende ce
qui espace beaucoup trop les lignes (et ne marche pas si la légende
fait 3 lignes ;).

Bref, toute idée sera la bienvenue...
Cordialement,
--
Q: Connaissez-vous la différence entre l'ignorance et l'apathie ?
R: J'en sais rien et je m'en fous.
Mathieu Goutelle - <URL:http://www.cadichonne.net/>

4 réponses

Avatar
O.L.
Le 07/11/2005, Mathieu Goutelle a supposé :
Bonjour,

J'ai actuellement un album photo avec des vignettes présentées de cette
façon :

<img src="..." [...]>
<img src="..." [...]>
<img src="..." [...]>
<img src="..." [...]>
<img src="..." [...]>
<img src="..." [...]>

L'avantage est que tout est redimensionnable et que je ne fixe pas le
nombre d'images par ligne. Maintenant, je voudrais ajouter des légendes
aux vignettes tout en gardant cette avantage. J'avais pensé à mettre
vignette et légende dans un <div style="display: inline"> mais ça ne
fonctionne pas :

<div style="display: inline">
<img src="..." [...]>
<div class="legende">Lorem Ipsum</div>
</div>
<div style="display: inline">
<img src="..." [...]>
<div class="legende">Lorem Ipsum</div>
</div>

En fait ce que je voudrais, c'est que le bloc image + légende se
comporte comme l'image seule. Le mieux que j'ai trouvé est de mettre
les div en float, avec l'inconvénient d'être obligé de fixer la hauteur
des <div> (sinon, ça peut faire des bizarreries si une des vignettes
est plus haute que les autres). Je ne suis pas satisfait de ça car ça
oblige à réserver de l'espace (au moins 2 lignes) pour la légende ce
qui espace beaucoup trop les lignes (et ne marche pas si la légende
fait 3 lignes ;).

Bref, toute idée sera la bienvenue...
Cordialement,



Garde ton idée de display:inline, mais utilise des tableaux avec dex
lignes (image et légende). Ca marche, je viens d'essayer.

<TABLE style="display:inline">
<TR><TD>image</TD></TR>
<TR><TD>légende</TD></TR>
</TABLE>

<TABLE style="display:inline">
<TR><TD>image</TD></TR>
<TR><TD>légende</TD></TR>
</TABLE>

...

--
Olivier Ligny
Créateur web free-lance / www.cyber-tamtam.net
Avatar
ASM
Mathieu Goutelle a écrit :
J'avais pensé à mettre
vignette et légende dans un <div style="display: inline"> mais ça ne
fonctionne pas :



si çà fonctionne impec avec FF
mais pas avec mon IE mac :-(

voci mon pis aller compatible avec IE5.2 Mac :
(laissé class legende au cas où, bien que pas utilisé)

<html>
<head>
<style type="text/css">
.vue {
display: table; /* pour IE */
width: 50%; /* pour IE */
/* hack IE5 */
display: inline;
width: auto;
/* fin hack */
float: left;
border: 1px solid black;
padding: 4px;
margin: 5px;
text-align: center;
}
.vue img, .vue span {
display: table-row; /* pour IE */
white-space: nowrap; /* pour IE */
/* hack IE5 */
display: inline;
/* fin hack */
}
</style>
</head>
<body>
<div id="album">
<span class="vue">
<img src="asm1.gif" /><br>
<span class="legende">Lorem Ipsum</span>
</span>
<span class="vue">
<img src="asm2.gif" /><br>
<span class="legende">Lorem Ipsum</span>
</span>
<span class="vue">
<img src="asm3.gif" /><br>
<span class="legende">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</span>
</span>
<span class="vue">
<img src="asm4.gif" /><br>
<span class="legende">Lorem Ipsum Lorem Ipsum Lorem Ipsum</span>
</span>
<hr style="clear:left;">
</div><!-- fin album -->
<p>pour voir que l'on peut avoir qque chose sous l'album</p>
</body></html>


--
Stephane Moriaux et son [moins] vieux Mac
Avatar
Le Fou
Mathieu Goutelle a écrit :

J'ai actuellement un album photo avec des vignettes présentées de cette
façon :
<img src="..." [...]>
<img src="..." [...]>
<img src="..." [...]>
L'avantage est que tout est redimensionnable et que je ne fixe pas le
nombre d'images par ligne. Maintenant, je voudrais ajouter des légendes
aux vignettes tout en gardant cette avantage.



A cette adresse :
http://ffessm.cd84.free.fr/comite.htm
j'utilise dl, dt, dd (listes de définitions) avec dl en "float: left"
Tu peux adapter ça pour arriver à ce que tu souhaites obtenir.
Je te laisse lire le source et la fds ;-)

--
A'tchao

Le Fou
http://www.ffessm-cd84.com/
http://ehiller.club.fr/
Avatar
ASM
Le Fou a écrit :

A cette adresse :
http://ffessm.cd84.free.fr/comite.htm
j'utilise dl, dt, dd (listes de définitions) avec dl en "float: left"



çà ne fonctionne pas avec mon IE 5.2 Mac

Est-ce OK avec IE5.5 et/ou IE6 ?

--
Stephane Moriaux et son [moins] vieux Mac