cadrer des DIV par le bas - HTML/CSS - Programmation
Marsh Posté le 17-11-2005 à 12:41:47
Pourquoi pas une liste de définition ???
html :
Code :
|
CSS :
Code :
|
voir ce que ça donne : http://www.assoc-sempe.com/Alpes_2005.asp
Marsh Posté le 17-11-2005 à 13:35:30
regarde la troisième ligne de ta page : il y a deux image :
discution
la pêche
les alignements sont fait par le haut : les lignes du bas ne sont pas cadrées, c'est justement ce que je ne veux pas.
bon, j'ai essayé, niet, ça aligne sur le haut.
Marsh Posté le 17-11-2005 à 12:27:01
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 ?