Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 29 di 41
  • livello principiante
Indice lezioni

Layout a tre colonne con i posizionamenti assoluti

La principale alternativa ai float
La principale alternativa ai float
Link copiato negli appunti

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;
;
;
;
padding: 1em 0 0 10px
}

div#extra{position: absolute;
top: 80px;
right: 0;
;
;
;
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


Ti consigliamo anche