Navigazione-footer con i CSS

Poco tempo fa D. Keith Robinson di Asterisk ha fatto un redesign del suo sito. Seguendo l'idea di Derek Powazek di cui ho parlato in questo post, ha spostato la navigazione a fondo pagina rivedendo il markup. Dopo una settimana Robinson riporta che il sito ha avuto un calo di visite del 70% (traduco dall'inglese):

Ho il sospetto che potrebbe avere a che fare con il fatto che ho tolto la navigazione dalla cima della pagina. La navigazione conduceva agli archivi tra le altre cose. Ora, non sono un esperto di come Google indicizza le pagine, ma so che di solito ci mette circa tre giorni a indicizzare una nuova pagina. àˆ stato esattamente tre giorni dopo il mio redesign che ho notato il calo.

Ho così preso spunto dalla cosa e mi sono chiesto: è possibile avere una navigazione che sia in cima al codice HTML ma si presenti visivamente a fondo pagina?

Una delle potenzialità  più grandi dei CSS è il fatto che si può agire sulla disposizione del contenuto senza dover toccare il markup. àˆ quindi possibile trasformare un tipico layout a due colonne in un layout a colonna singola con navigazione-quasi-footer. Il codice HTML di partenza è il seguente:


<div id="container">
<div id="nav">navigazione</div>
<div id="content">contenuto</div>
<div id="footer">footer</div>


Si procederà  con i CSS e in particolare con i posizionamenti assoluti, a condizione che sia la navigazione-quasi-footer che il footer vero e proprio abbiano altezza definita. La prima cosa da fare è consentire il posizionamento assoluto all'interno del contenitore principale. Per farlo basterà  posizionarlo relativamente:


div#container{position:relative}


Il secondo passo è aggiungere un padding inferiore al div dei contenuti:


div#content{padding-bottom: 300px}


Abbiamo così lasciato un totale di 300px per la navigazione che verrà  disposta tra i contenuti e il
footer vero e proprio. Ora si stabilisce l'altezza del footer:


div#footer{height: 100px}


Infine non ci resta che usare i posizionamenti assoluti, le cui coordinate si riferiranno al container principale, avendo cura di specificare le dimensioni...


div#navigation{width: 100%;height: 300px;
position: absolute;left: 0;bottom: 100px}


...di modo che la navigazione-quasi-footer vada proprio ad incastrarsi perfettamente tra contenuti e footer. Ho tralasciato gli altri dettagli del layout (potrebbe essere indifferentemente a larghezza fissa o fluido, e si potrebbe ad esempio mantenere una parte del layout nella colonna laterale) per focalizzare l'attenzione sulla tecnica. La logica è semplice ma allo stesso tempo ci sono alcuni aspetti chiave dei posizionamenti assoluti che ho pensato valesse la pena di approfondire.