Il layout a due colonne con posizionamenti assoluti presenta dei significati
vantaggi esterni rispetto all'analogo con i float. Questi sono l'accessibilità
e delle migliori chanche di indicizzazione e posizionamento sui motori di ricerca.
Ha però uno svantaggio: non consente di avere la colonna di navigazione più lunga
della colonna dei contenuti se vogliamo avere un footer a larghezza piena. Se
siamo disposti ad accettare questa condizione, a parer mio il layout con posizionamenti
assoluti è da preferire.
Anche in questo caso le sezioni fondamentali sono quattro: header, navigazione,
contenuti e footer. Cambia il codice HTML, in quanto la navigazione deve essere
preceduta dai contenuti. Ecco quindi l'HTML elementare di questo layout:
<body>
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="navigation"></div>
<div id="footer"></div>
</div>
</body>
Ora vediamo quali sono le regole CSS minimali per realizzare un layout a due
colonne con i posizionamenti assoluti:
div#container{
position: relative;
}
div#content{
margin-right: 200px;
}
div#navigation{
position: absolute;
top: 80px; /*l' altezza dell' header*/
right: 0;
width: 180px; /*un
po' di meno per evitare l' uso del padding*/
}
In sostanza il meccanismo è questo: il container viene dichiarato position:relative
per consentire il posizionamento al suo interno. Il div
dei contenuti lascia spazio sulla destra per la navigazione e allo stesso tempo,
implicitamente, permette al footer di disporsi a fondo pagina riprendendosi il
flusso degli elementi; infine la navigazione è posizionata assolutamente.
Anche qui vediamo il risultato.
Allo stesso modo con cui abbiamo realizzato il layout a due colonne cromatiche
con i float, possiamo ottenere il layout a due colonne cromatiche con il colore
e con l' immagine di background.
Scarica il file zip di questa lezione