Galleria fotografica del 2 dicembre 2006.
<ul class="gallery">
<li><a href="2dic05/2dic_1.htm"><img src="2dic05/_minialex_480.jpg" alt="Alessandro di Mantova, formatore fotografo. Link a foto ingrandita 480x270" /></a></li>
<li><a href="2dic05/2dic_2.htm"><img src="2dic05/_minicla_fab480.jpg" alt="Claudia di Como, dal Pessina. Link a foto ingrandita 480x270" /></a></li>
<li><a href="2dic05/2dic_3.htm"><img src="2dic05/_minidan_480.jpg" alt="un sorridente Daniele di Pregnana Milanese. Link a foto ingrandita 480x270" /></a></li>
...
</ul>
La galleria fotografica, il cui codice è ispirato ad analogo lavoro di Elisabetta Corazza che ringraziamo, è realizzata attraverso una lista non ordinata, le cui voci sono le singole immagini.
Si consiglia di utilizzare dimensioni delle immagini uguali (nella pagina di riferimento 80x80) e, se è il caso, di ritagliare l'immagine originale in modo da rappresentare particolari sufficientemente rappresentattivi dell'immagine stessa.
Ogni immagine, inoltre, può venire linkata ad un'altra di maggiori dimensioni. In questo caso è opportuno inserire nell'alt dell'immagine anche l'informazione sul link all'immagine ingrandita.
ul.gallery {
margin:0;
padding:0;
width:100%;
}
ul.gallery li {
list-style-type:none;
display:inline;
}
ul.gallery a:link, ul.gallery a:visited, ul.gallery a:hover, ul.gallery a:active {
text-decoration: none;
}
ul.gallery li img {
border:1px solid #D02B6C;
}
Con il Foglio di Stile definiamo le carattersitiche di visualizzazione della lista.
Il margine e il padding nullo permettono il posizionamento della lista all'inizio del box contenitore, mentre alla singola voce di lista (la singola immagine in questo caso) viene tolto il contrassegno puntato (list-style-type:none) e viene assegnata una disposizione in linea, cioà affiancata (display:inline), modificando il valore di blocco assegnato per default.
Con le ultime due regole si definiscono le carattersitiche dei link, evitando l'evidenziazione del contorno (equivalente della sottolineatura del testo sorgente di link) e inserendo un bordo violaceo continuo di 1 pixel ad ogni singola immagine.