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.