Galerie obrázků v CSS — příklad 2

Toto je příklad galerie obrázků vytvořené bez tabulek, pomocí čistého XHTML 1.0 Strict a CSS. Ve zdrojovém kódu jdou obrázky volně za sebou, zatímco v prohlížeči, který podporuje CSS, jsou rozmístěny do řádků vždy po dvou.

Obrázek 1

Titulek obrázku 1

Obrázek 2

Titulek obrázku 2

Obrázek 3

Titulek obrázku 3

Obrázek 4

Titulek obrázku 4

Galerie musí být ukončena odstavcem (nebo jiným prvkem) s vlastností clear: both.

Jak je to uděláno

Obrázky jdou ve zdrojovém textu jeden za druhým. Každý obrázek je "zabalen" v prvku <div> spolu se svým titulkem takto:

<div class="thumbnail">
  <img src="obr1.jpg" alt="Obrázek 1" width="100" height="75">
  <p>Titulek obrázku 1</p>
</div>

Jak vidíte, tento <div> má přiřazenu CSS třídu thumbnail, která je definována takto:

div.thumbnail {
  float: left;
  width: 120px;
  height: 180px;
  margin: 1em;
  text-align: center;
  font-size: 0.8em;
}

Aby byl kód funkční, musí být nadefinována pevná šířka a výška divu. Je tedy třeba dát pozor, aby obrázek spolu s titulkem dané rozměry nepřesáhl.

Kompatibilita

Zdrojový kód je plně v souladu s normou XHTML 1.0 a CSS 1 a měl by fungovat ve všech prohlížečích podporujících alespoň CSS 1. Příklad byl testován v Opeře 6.01, K-meleon 0.6 a IE 5.0 pod Windows 98 a v Netscape 6.2.1 a Mozille/5.0 pod Windows NT 4.0.

V prohlížečích založených na vykreslovacím stroji Gecko (Netscape 6, Mozilla, K-meleon) se při zúžení okna začnou obrázky v řádku překrývat. V IE a Opeře se v takovém případě řádek rozdělí a obrázky se zobrazí pod sebou.

Pro staré prohlížeče (typicky např. NN 4) je vhodné použít externí stylesheet a před prohlížečem ho ukrýt příkazem @import, případně pomocí JavaScriptu. Obrázky pak budou zobrazeny pod sebou, místo v řádcích.

Poznatky z dalších prohlížečů uvítáme na adrese redakce@sovavsiti.cz.