CSS  »  Articoli  »  Effetti con CSS 

Esempio 2: una galleria con miniature centrate

Ho preparato un secondo esempio in cui le miniature sono inserite in una galleria fluida di immagini. Partiamo dal codice HTML: in questo caso la galleria viene rappresentata con una lista di thumbnail:

<ul id="gallery">
  <li><img src="sea.png" alt="immagine" title="mare"></li>
  <li><img src="sunset.png" alt="immagine" title="tramonto"></li>
  <!--seguono altre miniature.. -->
</ul> 

Per prima cosa vengono rimossi margini, padding e marcatore di default da lista e list-item:

ul#gallery, ul#gallery li
{
  margin: 0; padding: 0;
  list-style-type: none
} 

Dato che si userà la proprietà float per affiancare le diapositive, sarà necessario "contenerli" in modo che non influenzino eventuali elementi successivi alla galleria nell'HTML. Ho optato per la tecnica FnE di cui ho parlato nell'articolo Float: teoria e pratica. Ecco la regola:

ul#gallery{ float: left; width: 100% }

A questo punto non ci resta che specificare le regole su list-item e immagini in maniera molto simile a quella dell'esempio precedente. Ecco le due regole:

ul#gallery li{
  float: left; width: 150px; height: 150px;
  line-height: 150px; text-align: center;
  margin: 0 10px 10px 0;
  background: url(bk.png) no-repeat center center
}

ul#gallery img{ vertical-align: middle } 

Ho riportato in grassetto le due dichiarazioni aggiuntive rispetto al primo esempio: i list-item vengono resi float e si attribuisce loro un margine destro e inferiore di 10 pixel. Ora non ci resta che sistemare le cose su Internet Explorer con il commento condizionale. Ecco le righe da inserire nella sezione head della pagina:

Il nostro esempio è così ultimato. Volendo disporre la pagina con ingrandimenti, basterà incorporare le immagini all'interno di link e magari adottare una soluzione del tipo LightBox, uno script abbastanza semplice da usare che consente di avere ingrandimenti a centro pagina.

Il pacchetto zip allegato contiene tutti i file degli esempi visti nel corso dell'articolo.

Altri articoli

Altre guide

Altre newsletter