[HTML][CSS] Galeria zdjęć, Pozycjonowanie miniaturek a'la tabela Opcje

[dyniaq]

W tabeli łatwo sobie wyrównać miniaturki. Ale jak za pomocą CSS'a wyrównać obrazki, żeby były ładnie w wierszach i kolumnach. Zaznaczam, że nie wszystkie obrazki "panoramiczne", niektóre są robione "pionowo" i wtedy się rozjeżdża cały szyk, bo mają inną wysokość niż te "panoramiczne".

[HTML] pobierz, plaintext 
<div id="images">
            <a href="photos/G_4830.JPG" rel="lightbox.roadtrip" title="G_4830"><img src="photos/thumbs/thumb_G_4830.JPG" alt="G_4830"/></a>
            <a href="photos/IMG_1960.JPG" rel="lightbox.roadtrip" title="IMG_1960"><img src="photos/thumbs/thumb_IMG_1960.JPG" alt="IMG_1960"/></a>
            <a href="photos/IMG_1961.JPG" rel="lightbox.roadtrip" title="IMG_1961"><img src="photos/thumbs/thumb_IMG_1961.JPG" alt="IMG_1961"/></a>
            <a href="photos/IMG_1962.JPG" rel="lightbox.roadtrip" title="IMG_1962"><img src="photos/thumbs/thumb_IMG_1962.JPG" alt="IMG_1962"/></a>
</div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
#images{
    border: 2px solid #efefe1;
    background-color: #ffffff;
}
 
#images img{
    margin: 5px;
    padding: 10px;
    border: 1px solid #efefe1;
    background-color: #fafafa;
    float: left;
    width: 15%;
}
 
#images a:visited img {
    border: 1px dashed #fafafa;
    background-color: #fff;
}
 
#images a:hover img {
    border: 1px solid #aa5;
    background-color: #fafaf1;
}
[HTML] pobierz, plaintext 

Czy ktoś poradził sobie kiedyś z tym problemem? Proszę o pomoc.

Z poważaniem, Michał

Ten post edytował dyniaq 22.07.2008, 10:04:43

[dyniaq]

Już prawie wszystko działa (pod FF3.0). Zastosowałem sposób z wykorzystaniem display:table. Wszystko ładnie z tym, że nie wiem, jak wyśrodkować teraz obrazek.

Podsyłam kodziki:

[HTML] pobierz, plaintext 
<div id="images">
        <ul>
          <li><a href="photos/G_4830.JPG" rel="lightbox.roadtrip" title="G_4830"><img src="photos/thumbs/thumb_G_4830.JPG" alt="G_4830" class="vertical" /></a></li>
          <li><a href="photos/IMG_1960.JPG" rel="lightbox.roadtrip" title="IMG_1960"><img src="photos/thumbs/thumb_IMG_1960.JPG" alt="IMG_1960" class="horizontal" /></a></li>
        </ul>
      </div>
[HTML] pobierz, plaintext 

CSS:

[HTML] pobierz, plaintext 
#images ul {
    display:              table;
    table-layout:         fixed;
    background-color:     #fff;
    border:               1px dashed #ddd;
    padding:              0.5%;
}
 
#images li {
    display:              table-cell;
    float:                left;
    width:                150px;
    height:               150px;
    border:               1px dashed #ddd;
    margin:               0.5%;
    overflow:             hidden;
}
 
#images a {
    display: block;
    margin: 0;
    padding: 5px;
    border:               1px solid #aa5;
    background-color:     #fafafa;
    overflow: hidden;
}
 
#images img {
    border: 1px dashed #fafafa;
    display: block;
}
 
#images img.horizontal { width: 100%; }
#images img.vertical { height: 135px; }
 
#images a:visited img {
    border: 1px dashed #fafafa;
    background-color: #fff;
}
 
#images a:hover img {
    border: 1px solid #aa5;
    background-color: #fafaf1;
}
[HTML] pobierz, plaintext