il Box Liquido.

Abbiamo visto come si creano i box e come posizionarli 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, 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;
}

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 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. Internet Explorer, quello maggiormente adoperato è anche quello che meno di altri rispetta le regole.

Per evitare, o meglio per arginare questa errata interpretazione è possibile adoperare alcuni "trucchetti", che rendono la visualizzazione quanto più possibile uguale per tutti i tipi di browser.

Per esempio, il browser IE V.5.5 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 con la centratura verticale di un box, 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


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

  Potete fare domande e discutere l'argomento sul Forum