cadrer des DIV par le bas

cadrer des DIV par le bas - HTML/CSS - Programmation

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 ?
 

Reply

Marsh Posté le 17-11-2005 à 12:27:01   

Reply

Marsh Posté le 17-11-2005 à 12:41:47    

Pourquoi pas une liste de définition ???  
 
html :
 

Code :
  1. <dl class="gallery">
  2. <dt><img src="images/peche-avec-yo.jpg" alt="peche-avec-yo.jpg" title="peche-avec-yo.jpg" /></dt>
  3. <dd>Pêche</dd>
  4. </dl>
  5. <dl class="gallery">
  6. <dt><img src="images/peche-3.jpg" alt="peche-3.jpg" title="peche-3.jpg" /></dt>
  7. <dd>Pêche</dd>
  8. </dl>


 
CSS :
 

Code :
  1. dl.gallery {
  2. border: 1px solid #FFCC00;
  3. background-color: #FFFFFF;
  4. width: 160px;
  5. text-align: center;
  6. padding: 10px;
  7. float: left;
  8. margin-right: 5px;
  9. margin-bottom: 5px;
  10. }
  11. .gallery dt {
  12. font-weight: bold;
  13. }
  14. .gallery dt img {
  15. border: none;
  16. }
  17. .gallery dd {
  18. margin: 0;
  19. padding: 0;
  20. }


 
voir ce que ça donne : http://www.assoc-sempe.com/Alpes_2005.asp


Message édité par Flyman30 le 17-11-2005 à 12:59:03
Reply

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.


Message édité par hlelong le 17-11-2005 à 15:17:16
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed