CSS  »  Articoli  »  CSS Template e layout 

Durante la costruzione di un layout si ricorre comunemente all'utilizzo di un div contenitore, detto wrapper, il cui compito è quello di racchiudere al suo interno tutta la struttura. In questo modo risulta poi semplice modificare la dimensione e la posizione del nostro layout agendo semplicemente sul wrapper senza dover modificare le regole CSS di ogni singolo elemento.

La tecnica classica del wrapper è molto robusta, ma può risultare limitativa in alcuni casi. Ad esempio se si vuole suddividere il nostro layout in bande orrizzontali lunghe quanto tutto il viewport del browser (cioè liquidi, al 100%) mantenendo comunque una dimensione fissa dei contenuti al loro interno. Un trucco comune consiste nel mimare queste bande orizzontali con un immagine di sfondo applicate al body, ma questa piccola tecnica funziona solo se vogliamo ottenere un numero limitato di bande ad altezza fissa (e quindi non ridimensionabili in altezza automaticamente a seconda del contenuto).

Ecco uno schema della struttura che dovremmo cercare di ricreare attraverso i fogli di stile e un po' di sano HTML:

Figura 1 - Struttura layout a bande

Struttura stratificata

Come risolvere dunque per non dover utilizzare le immagini di sfondo? Si cambia metodo di progettazione costruendo il nostro layout per strati: l'idea è quella di creare una struttura che suddivida il layout a bande, e poi, dentro questo nuovo scheletro, applicare i principi del wrapper.

Ecco il codice di base di una pagina suddivisa in tre bande:

<div id="banda1">...</div>
<div id="banda2">...</div>
<div id="banda3">...</div>

Ognuna di queste sezioni deve avere come caratteristica comune quella di essere larga quanto tutto il viewport del browser. La cosa migliore è, quindi,quella di definire una classe CSS che descriva il comportamento delle bande:

.banda { width: 100%; }

e applicarla in questo modo (vedi esempio):

<div id="banda1" class="banda">...</div>
<div id="banda2" class="banda">...</div>
<div id="banda3" class="banda">...</div>

A questo punto, dentro ad ogni banda inseriamo i vari wrapper, che essendo più d'uno andranno descritti attraverso una classe:

<div id="banda1" class="banda">
  <div class="wrapper">...</div>
</div>

<div id="banda2" class="banda">
  <div class="wrapper">...</div>
</div>

<div id="banda3" class="banda">
  <div class="wrapper">...</div>
</div> 

Lato foglio di stile possiamo descriverli come meglio preferiamo, nel nostro caso portiamo avanti l'esempio con un contenuto a larghezza fissa e centrato (con un po di padding, per far respirare il contenuto):

.wrapper { width: 750px; padding: 1.5em 0; margin: 0 auto; }

Anche per quanto riguarda le regole del foglio di stile non ci sono differenze rispetto al classico wrapper utilizzato come punto di partenza di tutti i layout. Siamo perciò liberissimi di dimensionarlo come meglio preferiamo. L'unica differenza da tenere sempre in considerazione è che stavolta ne utilizzeremo più d'uno (e quindi dobbiamo descriverlo attraverso una classe invece del solito id). Ecco l'esempio all'opera.

Altri articoli

Altre guide

Altre newsletter