21 novembre 2008

Creare una Galleria di Immagini

Creiamo una galleria simpatica di immagini tramite una semplice lista non ordinata, naturalmente la parte grafica la formatteremo con i css

  • Ora creiamo il codice html, ovvero la lista dove inseriamo le immagini definendo la sola larghezza e altezza.


<ul id="min-gallery">
<li><img src="a.png" width="200" height="150" />immagine01</li>
<li><img src="b.png" width="200" height="150" />immagine02</li>
<li><img src="c.png" width="200" height="150" />immagine03</li>
<li><img src="d.png" width="200" height="150" />immagine04</li>
<li><img src="e.png" width="200" height="150" />immagine05</li>
<li><img src="f.png" width="200" height="150" />immagine06</li>
<li><img src="g.png" width="200" height="150" />immagine07</li>
<li><img src="h.png" width="200" height="150" />immagine08</li>
<li><img src="i.png" width="200" height="150" />immagine09</li>
<li><img src="l.png" width="200" height="150" />immagine10</li>
<li><img src="m.png" width="200" height="150" />immagine11</li>
<li><img src="n.png" width="200" height="150" />immagine12</li>
</ul>


  • Adesso e arrivato il momento di dedicarci alla formattazione css daremo alla pagina uno sfondo nero con il testo in bianco e il padding impostato a zero

  • Nasconderemo il tipo di lista


  • La lista la faremo flottuare a sinistra con un font sns-serif in grassetto 0.8em per la numerazione

  • E in fine bloccheremo le immagini alla pagina con un bordo di 2 pixel il tutto con il codice css sottostante



body {background-color: #000000; color: #ffffff; padding: 0;}
#min-gallery {list-style-type: none;}
#min-gallery li {float: left; margin-right: 6px; margin-bottom: 10px; font: bold 0.8em sans-serif; color: #ffffff;}
#min-gallery img {display: block; border: 2px solid #333300;}

E questo e uno screenshot della galleria che otteniamo

Nessun commento: