Per il layout a tre colonne con i posizionamenti assoulti nel codice HTML la sezione dei contenuti deve precedere le due colonne laterali, e deve essere la più lunga.
Ritengo che siano una caratteristica e un limite che si compensano a vicenda: migliore accessibilità e chanche di indicizzazione nei motori di ricerca per un limite accettabilissimo. Infatti, è raro trovare siti in cui i contenuti delle colonne laterali eccedono rispetto alla colonna centrale, e per tali situazioni si può sempre pensare ad uno snellimento o una riorganizzazione (spostando i contenuti nella colonna centrale) dei contenuti delle colonne laterali.
Sull'ordine di codifica HTML delle due colonne laterali non ci sono vincoli: si può quindi scegliere se disporre prima la navigazione oppure la colonna extra. Dovendo effettuare una scelta apparentemente ininfluente, si può optare per avere la seguente disposizione di codice:
<body>
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="extra"></div>
<div id="navigation"></div>
<div id="footer"></div>
</div>
</body>
Vediamo ora gli stili della versione base:
/*stili per il layout fluido*/
html,body{margin: 0;padding:0}
body{font-family: arial,sans-serif; font-size: 76%}
div#container{position: relative}
/*stili specifici per il layout*/
div#navigation{position: absolute;
top: 80px;
left: 0;
width: 160px;
width:170px;
width:160px;
padding: 1em 0 0 10px
}
div#extra{position: absolute;
top: 80px;
right: 0;
width: 160px;
width:170px;
width:160px;
padding: 1em 5px
}
div#content{margin: 0 170px;
padding: 1em 10px
}
div#footer{text-align:center;
padding: 5px 0;
background-color: #69c;
color: #000
}
Ed ecco il risultato del layout a tre colonne con posizionamenti assoluti in versione base.
Anche qui con poche aggiunte al foglio di stile otteniamo un layout a tre colonne con posizionamenti assoluti con colonne separate da bordi fini oppure in colore.
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 |