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

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ů podle aktuální šířky okna prohlížeče.

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

Obrázek 5

Titulek obrázku 5

Obrázek 6

Titulek obrázku 6

Obrázek 7

Titulek obrázku 7

Obrázek 8

Titulek obrázku 8

Obrázek 9

Titulek obrázku 9

Obrázek 10

Titulek obrázku 10

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 a IE 5.0 pod Windows 98 a v Netscape 6.2.1 a Mozille/5.0 pod Windows NT 4.0.

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.