J'ai un ensemble d'images que j'affichais dans le temps avec une table :
<tr>
<td>
<a href="slides/lacf.html" title="Click to see lacf.jpg">
<br />
<img src="thumbs/lacf.jpg" alt="image" /><br />
vision du lac
</a></td>
etc...
et le CSS :
/* Align the content of the cells on the index pages to the center and bottom. */
#index td {
text-align: center;
vertical-align: bottom;
width: 160px;
}
il en résultait que les NOM DE L'IMAGE (vision du lac) étaient tous sur la même ligne.
je remplace tout ça par des divisions flotantes gauche, ce qui est quand même nettement mieux, s'adaptant en particulier parfaitement aux différentes tailles d'écran :
<div class="imagfloat">
<a href="slides/lacf.html" title="Click to see lacf.jpg">
<span class="comment">le lac, un soir, t'en souvient-il ? nous voguions en silence</span>
<img src="thumbs/lacf.jpg" alt="image" /><br />
vision du lac
</a>
</div>
<div class="imagfloat">
<a href="slides/eremurus.html" title="Click to see eremurus.jpg">
<span class="comment">Eremurus et autres fleurs sur fond de champs</span>
<img src="thumbs/eremurus.jpg" alt="image" /><br />
eremurus
</a>
</div>
le CSS :
/* floating images */
.imagfloat {
float:left;
width: 11em;
height: 14em;
}
les cases ont bien toutes la même taille, ce qui est important, quand on change la taille de l'écran d'affichage, les divisions se déplacent bien et changent de ligne.
MAIS, cependant, il reste un problème : tout est cadré vers le haut, et donc les étiquettes (vision du lac, eremurus) se retrouvent non alignées , alors que dans les tables elles l'étaient.
bien sûr vertical-align:bottom; ne change rigoureusement rien.
Je ne vois pas comment faire, avez-vous une idée s'il vous plaît ?
