Il sito per imparare gratuitamente a fare pagine Web

Guida XHTML con Style

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



Andrea Bianchi © www.web-link.it  Guida XHTML con Style - Ver. 1.5.1  

il Box Liquido.

Abbiamo visto nelle lezioni precedenti come creare dei 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 del quale ne prende la forma, da qui il nome di box liquido.

Dovendo centrare un box 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 margine ed un padding a 0 pixel

body {
padding: 0;
margin: 0;
}

#box-centrato{
margin: auto;
}
<div id="box-centrato">Testo di prova per riempire il box... </div>

Su questo link il risultato a video.

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

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

#box-centrato{
margin: 0;
width: 100%;
}
<div id="box-centrato">Testo di prova per riempire il box... </div>

Su questo link il risultato a video.


Purtroppo per˛ come abbiamo avuto modo di constatare certi valori sono male interpretati o per nulla supportati da parte di alcuni browser. Internet Explorer, quello a corredo di windows Ŕ anche quello che meno di altri rispetta le regole. Per evitare o arginare questa errata interpretazione Ŕ possibile adoperare certi "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 */
}
<div id="box-centrato">Testo di prova per riempire il box... </div>

Su questo link il risultato a video.


Nota: mi chiedo per˛ se attualmente valga ancora la pena di fare modifiche mirate pensando a versioni di browser cosý lontane, chi ancora ne facesse uso dovrebbe aggiornarsi alla svelta e non solo per un problema di pagine web ma per un problema di sicurezza decisamente molto pi¨ importante.

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

#box-centrato{
position: absolute;
height: 200px;
top: 50%;
margin-top: -100px;
}
<div id="box-centrato">Testo di prova per riempire il box... </div>

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 e per l'esatta centratura deve essere della metÓ esatta dei pixel usati per la dimensione del box (200), in questo caso -100px ed il box risulterÓ perfettamente centrato in senso verticale come Ŕ possibile vedere su questo link


Nella prossima lezione vedremo in pratica il box model fisso e liquido combinato per creare layout che servono ad impaginare tutti i nostri dati.

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



Andrea Bianchi