Creeaza lista de imagini

Pentru o galerie de imagini, este esentiala o lista de imagini, pentru care, in HTML, ar fi logic sa folosesti o lista
neordonata. Pentru fiecare element din lista, imaginea thumbnail are o eticheta si un link catre imaginea mare.
Pentru incepatori sa folosim:

<ul>
<li>
<a href="big-image">
<img src="thumbnail-image" alt="Eticheta" />
</a></li>
...
</ul>

Aranjarea imaginilor in linii si coloane

Pentru a aranja imaginile thumbnail in randuri trebuie sa folosesti urmatorul cod CSS:

li { display: inline; float: left; }

Am fi putut sa folosim si tabele, dar cu CSS numarul coloanelor variaza in functie de latimea disponibila.
Avand in vedere ca imaginile thumbnail pot fi de dimensiuni diferite, poti adauga valori pentru latime si inaltime
astfel incat sa obtii o aranjare uniforma.

li {
display: inline;
float: left;
width: 101px;
height: 101px;
}

Adaugarea unei imagini de fundal

Ca sa faci lucrurile si mai dragute, poti adauga o imagine de fundal in < li >.

li {
display: inline;
float: left;
width: 101px;
height: 101px;
margin: 4px;
background: transparent url(frame.gif) no-repeat top left;
}

Pozitionarea imaginilor thumbnail in centru

Pentru a centra thumbnail-urile, ele pot fi transformate in imagini de fundal pentru tag-ul <a>.
HTML:

<li>
<a href=""
style="background-image: url(thumbnail-image)" /></a>
</li>
CSS:

li a {
display: block;
width: 101px;
height: 101px;
background-position: center;
background-repeat: no-repeat;
text-decoration: none;
}

Afisarea etichetelor
Mutarea unei imagini thumbnail intr-una de fundal duce la pierderea etichetei imaginii din HTML. Pentru a o afisa,
trebuie sa o incluzi intr-un < span > din tagul < a >.
HTML:

<li> < a href=""

style="background-image: url(thumbnail-image)" />
<span>Eticheta</span>
</a></li>
CSS:

li { height: 115px; }
li a span {
font-size: 9px;
position: relative;
top: 103px;
color: #666;
text-transform: uppercase;
display: block;
text-align: center;
}
li a:hover span { color: red; }