CSS  »  Guide  »  Guida Layout dei siti con i CSS 

Vedremo brevemente come sia possibile ottenere una sezione composta da un'immagine, un titolo e un paragrafo. Questa soluzione può essere adottata per esempio per news accompagnate da immagini o per descrivere prodotti commerciali.

Ecco il codice HTML minimale:

<div class="textimage">
<img src="layout.jpg" alt="">
<h2>Layout</h2>
<p>Qui il testo...</p>
<div class="clearer">&nbsp;</div>
</div>

Ed ecco il foglio di stile:

div.textimage{
width: 400px;margin-bottom: 10px;     
border: 1px solid #000;background-color: #eee
}

div.textimage img{
float:left;
margin: 10px
}

div.textimage h2, div.textimage p{
margin:0 10px;
padding: 0
}

div.textimage h2{
margin-top: 10px
}

div.clearer{clear: left}

Ecco il risultato. Il meccanismo è questo: l'immagine viene resa float e distanziata dai bordi del suo contenitore con l'uso dei margini. Vengono impostati i margini del paragrafo e del titolo e il resto viene sistemato di conseguenza. L'uso del div con classe clearer non ha motivo strutturale ma solo di presentazione: nel caso in cui il testo sia troppo corto e non riesce a coprire l'altezza dell'immagine è necessario contenere il float. La tecnica usata qui è presentata da Eric Meyer nell'articolo Containing float.

Questo esempio, immerso nella colonna centrale di un layout con i float, può risultare disastroso per l'uso del clear. Come evitare problemi? In questo caso si può ad esempio fissare l'altezza del contenitore, avendo cura di controllare che il testo ci stia. Sarà però necessario dimensionare testo e altezza del contenitore in maniera concorde: per il testo ridimensionabile, entrambi andranno dimensionati in em, oppure in maniera più sicura e semplice sarà possibile renderli fissi e dimensionarli in pixels.

Altri articoli

Altre guide

Altre newsletter