Guida alla creazione di una pagina web con layout a due colonne con intestazione e sommario utilizzando codice XHTML per la struttura e CSS per la costruzione grafica, senza l'uso di tabelle o frame
Una delle strutture più utilizzate su internet è quella che prevede la divisione della pagina sostanzialmente in tre sezioni: l'intestazione, il sommario e la parte principale con il contenuto vero e proprio della pagina. Questa struttura viene chiamata anche "layout a due colonne".
Per realizzare questo tipo di struttura vengono solitamente utilizzate le tabelle, o addirittura i frame. Vediamo ora com'è possibile realizzare una struttura di questo tipo utilizzando solamente i fogli di stile CSS.
Il codice della pagina è molto semplice:
<div id="contenitore">
<div id="intestazione">Intestazione</div>
<div id="sommario">Sommario</div>
<div id="principale">Contenuti</div>
</div>
Il CSS assegnato ai div è altrettanto semplice:
div#sommario {
float: left;
width: 30%;
}
div#principale {
margin-left: 31%;
}
La struttura dipende quindi solamente dall'attributo float: left; assegnato al div sommario ma, come possiamo vedere dal primo esempio la pagina risulta comunque confusa e poco ordinata.
Una prima soluzione potrebbe essere quella di assegnare dei bordi e degli sfondi differenti ai div della struttura per differenziare le varie zone della pagina.
Il risultato che vediamo nel secondo esempio mostra quelle che possono essere le "lacune" di questo sistema: il sommario infatti non segue tutta l'altezza della pagina, ma si ferma alla lunghezza del testo inserito. Inoltre il div sommario non viene contenuto correttamente nel div contenitore quando l'altezza del div principale è minore di quella del sommario, come nel terzo esempio.
Mentre il secondo problema si risolve semplicemente assegnando l'attributo overflow: auto al div contenitore ottenendo questo effetto, per ottenere un sommario che copra tutta l'altezza della pagina bisogna ricorrere a un altrettanto semplice espediente: creare un'immagine di sfondo per il div contenitore che ripetuta verticalmente simuli la presenza del sommario lungo tutta l'altezza.
L'unica difficoltà può essere rappresentata dalla creazione dell'immagine da utilizzare come sfondo.
Questa immagine deve essere larga almeno 1600 pixel in modo da coprire le risoluzioni dello schermo che arrivano al massimo a 1600 pixel di larghezza. L'altezza è varia in base alle esigenze, chiaramente se le due colonne avranno sfondi con colori fissi sarà conveniente realizzare un'immagine con altezza di 1 pixel per non appesantire la pagina. Infine l'immagine deve essere divisa in due parti con colorazioni distinte (al caso anche con un ulteriore pixel di separazione tra i due colori) che abbiano le dimensioni in percentuale pari rispettivamente a quelle del div sommario e del div principale nel nostro caso il 30% e il 70% che su 1600 pixel corrispondono a 480 e 1120 pixel.
Ecco quindi il codice del foglio di stile CSS corrispondente all'esempio finale con l'immagine usata come sfondo del div contenitore.
div#contenitore {
width: 100%;
overflow: auto;
background: url(css_1.gif) repeat-y 24% 0;
border-bottom: 1px solid #f20;
}
div#intestazione {
border-bottom: 1px solid #f20;
background: #09f;
color: #fff;
text-align: center;
}
div#sommario {
float: left;
width: 30%;
padding: 1%;
}
div#principale {
margin-left: 31%;
padding: 1%;
}
In questo caso la sola cosa da notare è l'uso della percentuale usata per definire la posizione iniziale dello sfondo nel div contenitore. Come viene spiegato all'interno del CSS2 Reference la posizione dello sfondo può essere espressa anche tramite valori percentuali, funzione questa molto utile quando si utilizzano layout fluidi. In questo caso la percentuale è data circa dalla dimensione del div sommario. Non è la stessa dimensione precisa perché sui div sono stati applicati dei margini che influiscono in modo diretto sulle dimensioni. Sarà sufficiente fare qualche prova per ottenere il risultato desiderato.