[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

[Kreton]

Chodzi o to to, że w poziomie możesz bez problemu wyśrodkować obrazek. Jeśli jest elementem blokowym to :

Kod

margin: 0 auto;

.
Problem jest jak chcesz wyśrodkować w pionie. Ważne jest określenie czy to panorama czy pionowe. Załóżmy masz swoje zdjęcie w kontrzenerze o wysokości 300px. Zdjęcia panoramiczne maja 150px wysokosci a pionowe 250px. I teraz aby obrazek był wyśrodkowany w pionie musisz nadac odpowienie marginesy, czyli

Kod

margin: 75px 0

dla panoramicznego i

Kod

margin: 25px 0

dla pionowego.
Wyskokość zdjęcia i marginesu po zsumowaniu wyniesie 300px czyli tylke ile chcesz. Wszystko będzie i w pionie i w poziomie. Rozumiesz o co mi chodzi?

Ten post edytował Kreton 24.07.2008, 15:35:50