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
30 / 41

Una variante del layout con posizionamenti assoluti

I Video di HTML.it

Telegram: come installare l’app su computer