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ł

ja bym to uznał za dane tabelowe i obsadził w tabelce

Ale nie są danymi tabelarycznymi. A możesz oznaczać zdjęcia klasami ? Odzdielając panoramiczne od robionych pionowo ? Czy nie chcesz się babrać bo nikt za Ciebie takiego kodu nie wygeneruje ?

Piotrwusek
No tak na łatwiznę to nie można iść.

Kreton
No da się. Wszystko z automatu leci, więc coś tam się wymyśli, żeby określić, czy panoramiczne, czy nie. A jeżeli już będą dwie różne klasy to wtedy co?

poczytaj http://kurs.browsehappy.pl/CSS/Table

da sie zrobic

Bo wtedy będziesz mógł sobie ładnie wyrównać obrazki w pionie i w poziomie. Bez tych klas się nie da bo vertical-align nie działa ani sztuczka z line-height na obrazku, który dostał w stylach display: inline. Sprawdzałem w Operze.

Rozumiem, że generujesz miniaturki i wszystkie maja takie same rozmiary, w sensie. Np. panoramiczne: 150x250 a pionowe 250x150 przykładowo ?

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 

Dobrze było by się zorientować czy działa to na IE 6 i 7 , nie ?

No na razie to się tym nie martwię. Najpierw ma działać na normalnych przeglądarkach.
A IE6 nawet mi nie chce wyświetlić czegokolwiek bo ma jakiś problem z deklaracjami XML.

A wracając do sedna. Wiesz jak wyśrodkować te obrazki?

Chodzi o to to, że w poziomie możesz bez problemu wyśrodkować obrazek. Jeśli jest elementem blokowym to :
.
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 dla panoramicznego i 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?

Dziękuję za pomoc. Wszystko ładnie śmiga. Choć trochę lipa, że trzeba to taką okrężną drogą osiągać. No i mimo wszystko metoda wciąż jest trochę "na sztywno". Mam nadzieję, że kiedyś doczekam dnia, kiedy będzie można wszystko ładnie w CSSie zrobić i nie będzie już IE Pozdrawiam