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 autoalla proprietà margin
margin: auto;
}
Su questo link il risultato a video
E’ possibile eliminare i bordi perimetrali impostando nel body un margine ed un padding a 0 pixel
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 ottenere un box liquido e flottante.
padding: 5% 5%;
margin: 0;
}
#box-centrato{
margin: 0;
width: 100%;
}
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.
padding: 0;
margin: 0;
text-align: center; /* per il browser IE 5.5 */
}
#box-centrato{
margin: auto;
text-align: left; /* ripristinato allineamento del testo */
}
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.
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 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.