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
Se vuoi aggiornamenti su CSS inserisci la tua email nel box qui sotto: