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