- Learn
- Guida Layout dei siti con i CSS
- Layout a tre colonne con i posizionamenti assoluti
Layout a tre colonne con i posizionamenti assoluti
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 Layout a tre colonne con i posizionamenti assoluti inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Eliminare Malware con Spybot – Search & Destroy
Spybot – Search & Destroy è un programma gratuito in grado di rilevare ed eliminare diversi malware presenti nei PC […]