|
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, da qui il nome 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 per 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 maggiormente adoperato è 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.
Si conclude 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 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 da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti in apposita area XHTML.
|
Home ·
XHTML con Style ·
Primi Passi ·
Guida HTML ·
Guida CSS ·
Guida PHP ·
F.A.Q. ·
Scripting ·
Applets ·
Grafica Web ·
Forum ·
Comunicazioni 
per stampare questa pagina
Home Page ·
Aggiungi ai preferiti ·
Segnala il sito ai tuoi amici ·