Come per la versione analoga con i float, anche in questo caso è consigliato l'uso di un container aggiuntivo. Ecco quindi il codice HTML base:
<body>
<div id="container">
<div id="container2">
<div id="header"></div>
<div id="content"></div>
<div id="extra"></div>
<div id="navigation"></div>
<div id="footer"></div>
</div>
</div>
</body>
Le regole CSS da aggiungere sono semplici:
div#container{position: relative;
background:url(3rightcol.jpg) repeat-y top right
}
div#container2{background: url(3leftcol.jpg) repeat-y top left}
Anche qui basta semplicemente scegliere il tipo di layout. Ho preparato la versione con layout fisso.
Scarica il file zip di esempio di questa lezione
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 |