Obrázková galerie pomocí CSS
Marek Prokop, vydáno/aktualizováno: 18.3.2002/13.07.2003
Obrázková galerie, to jest stránka s mnoha malými náhledy obrázků, které slouží jako odkaz na jejich plné verze, se obvykle řeší tabulkou (značky <table>, <tr> a <td>). Z pohledu čístoty jazyka HTML však toto řešení není správné. Jak ale tabulku nahradit?
S kaskádovými styly (CSS) to jde překvapivě snadno. Dokonce můžeme udělat i něco, co tabulka neumí — galerii s plovoucí šířkou. Tu vám ukážu v dnešním prvním příkladu. Jako druhý příklad jsem pak připravil „klasickou“ galerii s pevně daným počtem obrázků na řádku, avšak opět bez pomoci tabulek.
Galerie s plovoucí šířkou
Pokud si první příklad otevřete prohlížečem podporujícím CSS (tj. IE 4+, Opera 5+, Mozilla/NN 6), uvidíte 10 malých obrázků. Některé jsou orientovány na šířku, některé na výšku; pod každým je textový titulek.
Důležité je, že stránka se roztahuje podle šířky okna prohlížeče, takže při šířce 800 pixelů uvidíte 2 řady po 5 obrázcích, při šířce 600 pixelů se vejdou na jeden řádek jen 4 obrázky (a řady jsou tedy 3) a při šířce 1000 pixelů se do řady vejde obrázků 7.
Pokud byste se podívali některým starým prohlížečem bez podpory CSS, viděli byste obrázky pod sebou, nikoli v řadách.
Zdrojový kód stránky je velmi jednoduchý. Každý obrázek je uzavřen v prvku <div> takto:
<div class="thumbnail">
<img src="obr1.jpg" alt="Obrázek 1" width="100" height="75" />
<p>Titulek obrázku 1</p>
</div> a tyto bloky jsou řazeny jeden za druhým.
V definici stylů jsou pak třídě thumbnail přiřazeny tyto vlastnosti:
div.thumbnail {
float: left;
width: 120px;
height: 180px;
margin: 1em;
text-align: center;
font-size: 0.8em;
} Podstatná je vlastnost float: left, protože právě ta způsobuje, že se obrázky řadí do řádků (dokud je v okně prohlížeče místo) a ne pod sebe.
Vlastnosti width a height určují rozměry bloku obrázku včetně jeho titulku. Pro všechny obrázky jsou stejné, neboť jinak by náhledy v řádce nepěkně „skákaly“. Důležité je správně dimenzovat výšku (height), aby se do ní vešel i ten nejvyšší obrázek i se svým titulkem.
Vlastnost margin: 1em zajišťuje odstup jednotlivých obrázků od sebe, a to jak horizontálně, tak vertikálně. Vlastnost text-align: center centruje obrázek i titulek v rámci bloku (který je 120 pixelů široký — width: 120px) a vlastnost font-size: 0.8em nastavuje velikost písma titulku na 80% základní velikosti písma stránky.
Důležité je, že galerie musí být ukončena odstavcem (nebo jiným prvkem) s vlastností clear: both.
Galerie s pevnou šířkou
Galerie s pevnou šířkou dá v CSS, ku podivu, o něco víc práce. Pevnou šířkou v tomto případě ale nemyslím šířku stránky (ta je plovoucí jako v předešlém případě), ale počet obrázků na řádek.
V druhém příkladu jsou na řádky vždy dva obrázky a každý je vodorovně vystředěn do bloku, který zabírá 45% šířky okna prohlížeče.
Zdrojový kód stránky je tentokrát složitější. Každý řádek galerie vypadá takto:
<div class="row">
<div class="left">
<img src="obr1.jpg" width="256" height="192" alt="Obr, 1" />
<p>Titulek obrázku 1</p>
</div>
<div class="right">
<img src="obr1.jpg" width="256" height="192" alt="Obr. 2" />
<p>Titulek obrázku 2</p>
</div>
</div> Jak vidíte, jsou zde hned tři třídy — row, která vymezuje blok řádku, left označující levý obrázek a right pro pravý obrázek. Tyto třídy jsou definovány takto:
.row {
clear: both;
width: 90%;
margin: 10px 4%;
}
.left {
float: left;
width: 49%;
text-align: center;
}
.right {
float: left;
width: 49%;
text-align: center;
} Obrázky uvnitř bloků left a right mají navíc nastaveny okraje takto:
.left img, .right img {
margin: 10px auto;
} Přeji vám hezké obrázky ve vaší galerii.
