Div e CSS, la struttura di una pagina Web

In un articolo precedente abbiamo visto come realizzare il markup di base di una pagina web grazie agli elementi div. In questo articolo vediamo come riprodurre gli spazi che avevamo in mente quando abbiamo creato il wireframe.

Figura 1. Il wireframe

Div è un “elemento blocco”

In realtà potremmo dire che div è l’elemento blocco per eccellenza: in effetti questa caratteristica di essere un blocco contenitore è ciò che lo caratterizza di più. Ma in termini di CSS essere un elemento block significa possedere alcune proprietà, le più importanti sono:

• contiene altri elementi block
• possiede margini, bordi e padding: queste dimensioni possono essere definite tramite CSS
• due elementi block adiacenti vengono disposti verticalmente, anche in assenza di <br />

Ecco perché considerare il div lo strumento giusto per definire le aree della nostra pagina. Rivediamo quali sono e quale sarà la forma da dare alla pagina:

<div id="container">
<div id="header">
<div id="navigation"></div><!--#navigation-->
</div><!--#header-->
<div id="main"></div><!--#main-->
<div id="sidebar"></div><!--#sidebar-->
<div id="footer"></div><!--#footer-->
</div><!--#container-->

Centrare un div

La prima cosa che faremo è decidere le dimensioni della pagina e posizionarla al centro della finestra del browser. Per ottenere un div centrato esiste una tecnica molto semplice che consiste in:

• dare una dimensione fissa al nostro div
• assegnare margine destro e sinistro automatici

Per centrare il nostro sito basta agire sul contenitore generale che abbiamo chiamato container. Ecco il codice CSS:

#container { width:970px; margin:0 auto }