Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 14 di 41
  • livello principiante
Indice lezioni

Layout monolitico elastico

Le regole CSS per layout a una colonna con dimensioni espresse in em
Le regole CSS per layout a una colonna con dimensioni espresse in em
Link copiato negli appunti

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.


Ti consigliamo anche