Il sito per imparare gratuitamente a fare pagine Web

Il Box Liquido

Questa guida Ŕ stampabile in modo agevole dalla versione off-line scaricabile dal men¨ laterale: Download.zip



Andrea Bianchi © www.web-link.it  Guida CSS Fogli di stile - Ver. 4.8.1   

il Box Liquido.

Abbiamo visto come si creano i box e come si posizionano correttamente, esiste per˛ una tecnica che prende il nome di box liquido che consentirÓ al box di adattarsi alla pagina ridimensionandosi automaticamente, proprio come fosse un liquido versato in un recipiente che ne assume la forma, da qui il nome box liquido.

Dovendo posizionare un box al centro della pagina abbiamo visto che Ŕ sufficiente impostare il valore auto alla proprietÓ margin

#box-centrato{
margin: auto;
}


<div id="box-centrato">Testo di prova per riempire il box...</div>

Su questo link il risultato a video

E' possibile eliminare i bordi perimetrali impostando nel body un margin ed un padding di 0 pixel

body {
padding: 0;
margin: 0;
     }

#box-centrato{
margin: auto;
     }

Su questo link il risultato a video.

Oppure decidere per un bordo fisso (o in percentuale) agendo sul padding nel body per un box liquido e flottante.

body {
padding: 5% 5%;
margin: 0;
}

#box-centrato{
	margin: 0;
	width: 100%
	}

Su questo link il risultato a video.

Purtroppo per˛ certi valori sono male interpretati (o per nulla supportati) da parte di alcuni browser.

Per evitare, o meglio per arginare, questa errata interpretazione Ŕ possibile adoperare alcuni "trucchetti", che rendono la visualizzazione quanto pi¨ possibile uguale per tutti i vari browser.

Per esempio, il browser IE versioni precedenti centra il box assegnando il valore center alla proprietÓ text-align riservata al testo, Ŕ possibile allora impostare questa proprietÓ nel body, per poi ripristinare il normale allineamento del testo nel box con text-align: left, come nell'esempio sotto.

body {
padding: 0;
margin: 0;
text-align: center; /* per il browser IE 5.5 */
}

#box-centrato{
margin: auto;
text-align: left; /* ripristinato allineamento del testo */ 
}

Si conclude il box liquido con la centratura verticale, anche se non sempre Ŕ consigliabile per via di un tipo di browser che taglia la parte superiore del box nel caso in cui questa avesse dimensioni maggiori della finestra del browser che lo visualizza.

#box-centrato{
position: absolute;
height: 200px;
top: 50%;
margin-top: -100px;
}

Si noti la tecnica utilizzata nel css: il box ha una dimensione in altezza (height) di 200 pixel, viene posizionato il suo margine superiore al centro della finestra del browser (top 50%) e poi viene impostato il suo margine superiore con un numero negativo che ne provoca lo spostamento verso l'alto che per l'esatta centratura deve essere della metÓ esatta dei pixel usati per la dimensione del box in altezza(200), in questo caso -100px, il box risulterÓ perfettamente centrato in senso verticale come Ŕ possibile vedere su questo link esempio.


Continua: il box model fisso e liquido
combinato per creare layout che servono ad impaginare tutti i dati.

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.



Andrea Bianchi