CSS  »  Articoli  »  Mondo CSS 

Arriviamo così alla terza parte e ultima parte dell'articolo sulle liste di definizione. Come accennato in chiusura del precedente, tratteremo le liste di definizione attraverso la proprietà float. Iniziamo subito.

Una galleria di immagini con didascalie

Il prossimo esempio è una galleria di immagini con didascalie, ottenuta usando una lista di definizione per ogni coppia immagine-didascalia. Vediamo l'HTML:

<div id="gallery">
<dl>
<dt><img src="sea.jpg" alt=""></dt>
<dd>Didascalia prima immagine.</dd>
</dl>
<dl>
<dt><img src="sea2.jpg" alt=""></dt>
<dd>Qui il titolo o una breve descrizione.</dd>
</dl>
</div>

Il risultato presentato con i CSS è decisamente notevole, grazie a un'unica immagine larga 140 pixel per 190 che dà un effetto Polaroid. Vediamola:

Ora il CSS. Per prima cosa il div che contiene la galleria userà la tecnica simple clearing of floats di cui abbiamo anche parlato nell'articolo «Float: teoria e pratica». In questo modo eviteremo di usare elementi aggiuntivi per contenere i float. Verrà inoltre assegnato il carattere:

div#gallery{width: 100%;overflow: auto;
    font: 11px Arial,sans-serif}

Ciascuna lista di definizione, che come abbiamo detto accorpa immagine e didascalia, verrà resa float egli verrà attribuita l'immagine di sfondo:

div#gallery dl{float: left;width: 140px;height: 190px;
    background: url(polaroid.jpg); text-align: center;color: #555}

Ai termini,che contengono le immagini, verrà aggiunto del padding superiore:

div#gallery dt{padding: 15px 0 0}

Le immagini verranno rese block-level e centrate rispetto al loro contenitore, e infine verrà aggiunto un bordo ombreggiato:

div#gallery img{display:block;margin:0 auto;border:1px inset #CCC}

Infine sulle descrizioni verrà rimosso il margine di default e aggiunto del padding orizzontale:

div#gallery dd{margin: 0;padding: 2px 13px 0px}

Tutto qui: un' immagine e poche semplici regole CSS per ottenere una galleria di miniature fluida e accativante: rivediamola.

Altri articoli

Altre guide

Altre newsletter