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.
Titulek obrázku 1
Titulek obrázku 2
Titulek obrázku 3
Titulek obrázku 4
Titulek obrázku 5
Titulek obrázku 6
Titulek obrázku 7
Titulek obrázku 8
Titulek obrázku 9
Titulek obrázku 10
Galerie musí být ukončena odstavcem (nebo jiným prvkem) s vlastností clear: both
.
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.
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.