Per dare l'idea che le due colonne laterali si estendono fino al footer indipendentemente dalla loro lunghezza rispetto alla colonna centrale, si possono usare le immagini di background: a colore pieno oppure bianche con bordo fine o sfumato, tutto sta alla creatività. Usare immagini di background richiede però l'aggiunta di un contenitore supplementare nel codice HTML, almeno in certi casi. Ecco il codice HTML base per questo tipo di layout:
<body>
<div id="container">
<div id="container2">
<div id="header"></div>
<div id="navigation"></div>
<div id="extra"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</div>
</body>
La questione è che è possibile assegnare una sola immagine di background ad un elemento: i due elementi a cui assegneremo l'immagine di background sono quindi container e container2. In realtà sotto certe condizioni l'uso di un container aggiuntivo è superfluo: una delle due immagini di background si potrebbe assegnare al body solo nel caso in cui la pagina si estende almeno per tutta la lunghezza della finestra e si usi un layout fluido a larghezza totale. La scelta dell'aggiunta di un contenitore supplementare, d'altra parte, consente maggiore possibilità di personalizzazione del layout attraverso l'uso del background: è infatti possibile usare layout semifluidi, fissi o elastici senza dover ritoccare il codice HTML. Ho preparato come esempio una versione fissa, che potrete riadattare a elastica, fluida o semifluida con poche modifiche del CSS. Rivediamo tutte le regole fondamentali del foglio di stile per questo layout:
/*stili per il layout fisso
con background*/
html,body{margin: 0;padding:0}
body{font-family: arial,sans-serif;
font-size: 76%;
text-align:center
}
div#container{width:760px;
margin:0 auto;
border-width: 0 1px;
border-style:solid;
border-color: #ccc;
background: url(3rightcol.jpg) repeat-y top right
}
div#container2{background: url(3leftcol.jpg) repeat-y top left;
text-align: left
}
/*stili specifici per il layout*/
div#navigation{float: left;
width: 120px;
width:130px;
width:120px;
padding: 1em 0 0 10px
}
div#extra{float: right;
width: 190px;
width:200px;
width:190px;
padding: 1em 5px
}
div#content{margin: 0 200px 0 130px;
padding: 1em 10px
}
div#footer{clear:both;
text-align:center;
padding: 5px 0;
background-color: #69c;
color: #000
}
Vediamo il risultato anche nel caso in cui sia più lunga la colonna di sinistra o quella di destra.
Scarica l'esempio in formato zip di questa lezone
Ultimi articoli CSS
Bordi multipli con 'box-shadow' di CSS3Il modo più rapido e semplice per circondare un box con più bordi di... |
Sfumature lineari su IE6-9, linear-gradient CSS3 e un po' di SVGUtilizzare la funzione linear-gradient CSS per creare sfumature... |
Stili specifici per l'orientamento dell'iPad con le Media QueriesGestire con gli stili e le media queries le modalità di... |
Campo per la ricerca con i CSSDedicare la giusta attenzione al modulo per le ricerche, componente... |
Box model 'naturale' con border-boxDimenticare per sempre i problemi legati al box model grazie ad un... |
Guide CSS
Guida CSS3Scoprire e usare al meglio tutte le novità dell'ultima versione dei... |
Guida CSS Tecniche essenzialiTesto, immagini, layout, form, liste, tabelle: soluzioni pronte per... |
Guida CSS di baseI CSS servono per gestire tutto il layout di un sito Web. E'... |
Newsletter @CSS
Ogni mercoledì, direttamente nella tua e-mail: guide, articoli, tutorial, FAQ e approfondimenti tecnici su CSS e Web Design.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |