Testo e immagini

17 marzo 2006

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”> </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.

Tutte le lezioni

1 ... 33 34 35 ... 41

Se vuoi aggiornamenti su Testo e immagini inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Testo e immagini

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento dei dati per attività di marketing