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.
Un menu per ristoranti
Arriviamo così all'ultimo esempio della serie: un menu per ristoranti. L'implementazione è abbastanza logica e semplice, anche se ci sono alcuni dettagli molto sottili. Per prima cose vediamo l'HTML:
<div id="menu">
<h2>Primi piatti</h2>
<dl>
<dt>Spaghetti allo scoglio</dt>
<dd class="price">9 Euro</dd>
<dd class="ingredients">Spaghetti, cozze...</dd>
</dl>
<dl>
<dt>Tagliatelle ai funghi porcini</dt>
<dd class="price">12 Euro</dd>
<dd class="ingredients">Pasta fresca all'uovo...</dd>
</dl>
</div>
l'intero menu è racchiuso in un div, e ciascuna sezione è anticipata da un h2. Ogni piatto è racchiuso da una lista di definizione dl: il nome viene incluso in un dt, mentre prezzo e ingredienti vengono entrambi sistemati in descrizioni, rispettivamente dd class="price" e dd class="ingredients".
Ora vediamo il CSS passo per passo. Per prima cosa gli stili sul body, il div id="menu" e i titoli h2:
body{background: #FFF;text-align:center}
div#menu{width:550px;margin: 0 auto;
font:85% "Trebuchet MS",Arial,sans-serif;text-align:left}
h2{margin: 1.5em auto 0.3em;color: #09f;
font-size: 250%;text-align:center}
Ora la parte essenziale: a ciascuna dl si attribuiscono le due dichiarazioni per evitare di usare markup aggiuntivo per contenere i float, come abbiamo fatto nell'esempio precedente, e si assegna l'immagine di sfondo, che è una semplice gif trasparente con tre pixel neri che viene ripetuta orizzontalmente:
dl{width:100%;overflow:hidden;margin:0 0 1em;
background: url(dot.gif) repeat-x 0 1.2em}
Il fatto che venga ripetuta a 1.2em sull'asse y è perchè sia i termini che il prezzo verranno resi un po' più grandi del testo normale. Verrà inoltre assegnato uno sfondo bianco così da coprire il tratteggio e verranno resi float ai due estremi. Ecco le regole:
dt,dd.price{background: #FFF;font-size: 130%;font-weight: bold}
dt{float:left;padding-right:3px;color: #F60}
dd{margin:0}
dd.price{float: right;color: #BBB}
Ora la descrizione degli ingredienti: per evitare che subiscano il float di piatto e prezzo, invece di usare la proprietà clear questi verranno resi float con larghezza 100%.
Il risultato è lo stesso, il vantaggio è che però non usando il clear non interferiremo con eventuali altri elementi di pagina (per esempio una colonna di navigazione) in casi in cui il menu venga immerso in pagine che usano i float per il layout. Infine viene usato un testo corsivo serif, ecco la regola:
dd.ingredients{float:left;width: 100%;padding: 3px 0;font-style: italic;
font-family: Georgia,Times,sans-serif;color: #555}
Il risultato anche se ha richiesto un po' di lavoro con i CSS è decisamente ben riuscito (personalmente trovo che il tratteggio aiuti moltissimo la lettura) non fa uso di hack, è robusto e cross-browser: come tutti gli altri esempi è stato infatti testato con successo su IE5.0, IE5.5, IE6, Opera 7.6, Firefox e Safari.
Conclusioni
Termina qui la serie sulle liste di definizione, in cui abbiamo scoperto possibili usi e visto diversi esempi di personalizzazione con i CSS. Un articolo decisamente notevole su cui approfondire è Definition Lists. Alla prossima.
