CSS tutorial: giochiamo con i box e la proprietà overflow:hidden 08/04/08

Visto che qualcuno mi ha fatto delle domande rispetto ai box utilizzati per il mio lifestream, colgo l' occasione per descrivere alcune proprietà dei fogli di stile e giocare un po' con i box, le immagini e le trasparenze. Quello che ci serve è un immagine e poche regole CSS...

» continua

Il nostro obiettivo è quello di mostrare un box di dimensioni stabilite e che contenga un' immagine (di dimensioni variabili) ed un breve testo descrittivo, questo in pratica sarà il nostro codice HTML:

<div class="box">
<img src="lamiafoto.jpg"/>
<p>Breve testo descrittivo</p>
</div>

Ho utilizzato questa foto di Dingo (diciamo un mio assistente) ed il risultato finale sarà questo:

Questo è un breve testo descrittivo

La prima cosa da fare è assegnare la proprietà overflow:hidden alla classe applicata al contenitore, stabilire le dimensioni del box e applicare il valore relative alla proprietà position. Vediamo il foglio di stile:

<style type="text/css">
div.box{
margin: 5px;
overflow: hidden;
display: block;
position: relative;
height: 150px;
width: 200px;
}
</style>

Caricando la mia immagine all' interno del box ecco il risultato:

Come potete vedere l' immagine non è centrata; viene caricata nel box partendo dal vertice superiore sinistro, per risolvere parzialmente questo problema (conoscendo le dimensioni esatte il problema si risolve integralmente) possiamo posizionare in maniera assoluta l' immagine usando valori negativi, scorrendo cioè verso sinistra e verso l' alto. Nel mio caso le dimensioni le conosco quindi il lavoro sarà assai più semplice, aggiungete questo selettore al foglio di stile creato in precedenza:

div.box img{
position: absolute;
left: -130px;
top: -65px;
}

Ed ecco il risultato con il soggetto centrato perfettamente:

Adesso dobbiamo inserire il testo allo stesso modo, aggiungendo anche uno sfondo trasparente. Anche qui posizioniamo il testo in maniera assoluta e applichiamo la trasparenza allo sfondo, aggiungete questa ultima parte al foglio di stile:

div.box p{
margin: 0px;
padding: 10px;
position: absolute;
left: 10px;
top: 10px;
background-color: #000;
color:#FFF;
filter: alpha(opacity=70);
opacity: 0.7;
}

Applicando queste tre regole al codice HTML presente all' inizio di questo tutorial avrete il seguente risultato:

Questo è un breve testo descrittivo

Se volete inserire più box in linea basterà aggiungere alla classe box la proprietà float:left... spero di avere risposto :)