CSS  »  Guide  »  Guida Layout dei siti con i CSS 

Questo tipo di layout è un po' particolare. Iniziamo con il dire che tutte le sezioni di testo di un sito con layout elastico devono essere dimensionate relativamente, così come le eventuali largezze degli elementi. Per un layout monolitico, il contenitore principale viene dimensionato in em così da consentire, modificando la larghezza del carattere tramite le opzioni del browser, di ottenere una sorta di effetto zoom. Ecco il codice CSS:

/*stili per il layout elastico*/
html,body{margin: 0;padding:0}
body{font-family: arial,sans-serif;font-size: 76%;text-align: center}
div#container{width: 60em;margin: 0 auto;text-align: left;
border-left: 2px solid #36c;border-right: 2px solid #36c}

/*stili generici, su header e footer*/
div#header{background-color:#36C;color: #ff0}
h1,h2{margin: 0;padding:0}
h1{padding-left:0.5em;font: bold 2.3em/80px arial,serif}
h2{color: #999;font-size: 1.5em}
div#footer{text-align:center;padding: 0.5em;
background-color: #69c; color: #000}
div#footer a{color: #fff;font-weight: bold;text-decoration: underline}

/*stili specifici per il layout*/
div#navigation{background-color:#9cf}
div#content{padding: 1em}

E l'esempio realizzato di layout a colonna singola elastico. Scarica l'esempio. Anche qui, il mio consiglio è di fare le prove di stampa.

Altri articoli

Altre guide

Altre newsletter