OBRÁZKOVÁ GALERIE POMOCÍ CSS
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 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 epě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 příkladu zde
jsou na řádky vždy dva obrázky a každý je vodorvně 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;
}
