Istituto Cilea, navigazione veloce.
menu principale | contenuto principale | menu secondario | piè di pagina
Benvenuti in Porte Aperte sul Web, Comunità di pratica per l'accessibilità dei siti scolastici - USR Lombardia

link alla home page di  Porte Aperte sul Web [logo]

chi siamo | mappa | guida | faq | contatti

sei in home - tutorial - galleria fotografica


contenuto principale

galleria fotografica

Riferimento

Galleria fotografica del 2 dicembre 2006.

Il codice xhtml

<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.

Foglio di Stile

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.


menu secondario
Creative Commons License
I contenuti di questo sito, salvo diversa indicazione, sono rilasciati sotto una licenza Creative Commons License.
Tutti i marchi sono proprietà dei rispettivi proprietari