Layout di base a tre colonne
Il layout in assoluto più diffuso è quello basato sullo schema a tre colonne: una colonna centrale molto ampia e due colonne laterali più strette. In questo articolo sarà illustrato come creare lo schema di base per la realizzazione di layout a tre colonne.
Prima di iniziare a leggere l'articolo vi consigliamo di guardare il layout che si vuole ottenere.
La struttura
Un layout a tre colonne ha, in genere, la seguente struttura:
- un'intestazione (header) dove inserire il logo e i banner;
- una colonna di sinistra dove generalmente sono posti i link alle sezioni del sito;
- una colonna centrale dove sono inseriti i contenuti principali;
- una colonna di sinistra dove porre sponsor, moduli, sondaggi;
- un pié di pagina (footer) contenente il copyright, gli indirizzi e-mail, la navigazione globale.
La struttura sopra illustrata è mostrata nella seguente immagine:
Come visto nell'articolo Progettare con i CSS, allo schema della pagina deve corrispondere la struttura del codice (X)HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
[...]
</head>
<body>
<div id="header">
[...]
</div>
<div id="colonna-sx">
[...]
</div>
<div id="principale">
[...]
</div>
<div id="colonna-dx">
[...]
</div>
<div id="footer">
[...]
</div>
</body>
</html>
Si è utilizzato un DIV per ogni sezione, ogni DIV è stato identificato con un diverso valore per l'attributo ID. Ogni valore dell'attributo ID indica il compito del DIV nel formare la struttura.
Per creare le tre colonne, si imposterà la larghezza degli elementi associati ai selettori #colonna-sx, #principale e #colonna-dx. La larghezza delle colonne laterali sarà pari al 20% (ciascuna) della larghezza della pagina, la colonna principale occuperà il restante 60%. Affinché le tre colonne risultino affiancate, si imposterà la proprietà float sul valore left. Il codice CSS da utilizzare è il seguente:
#colonna-sx, #colonna-dx {
float: left;
width: 20%;
}
#principale {
float: left;
width: 60%;
}
In realtà c'è un problema: Internet Explorer lascia, sulla destra, un margine di 1px (vedi la figura di seguito riportata). Ciò fa sì che la colonna sulla destra non ha a disposizione il 20% della pagina, ma il 20% meno 1px. La colonna di destra, dunque, non affiancherebbe le altre due, ma verrebbe a trovarsi al di sotto della colonna di sinistra. Per ovviare al problema è sufficiente impostare il margine destro della colonna di destra a -1px.
#colonna-dx { margin-right:-1px; }
Per evitare i problemi descritti nell'articolo "Ripristino dell'allineamento in seguito all'utilizzo della proprietà float", è necessario utilizzare la seguente regola:
#footer { clear: left; }
Affinché il nostro layout occupi tutto lo spazio a disposizione bisogna impostare a zero il margine e il padding del BODY. Bisogna però sottolineare che, avendo posto a -1px il margine destro della colonna di destra, a causa dei soliti problemi nell'interpretazione del box model di IE5/Win, su Internet Explorer 5 apparirà la barra di scorrimento orizzontale. Per ovviare a questo problema è sufficiente impostare il margine destro del BODY a 1px:
body { margin:0 1px 0 0; }
Colori
Per meglio evidenziare la struttura del sito, è bene differenziare il colore di sfondo delle diverse sezioni. Ad esempio:
body { background: #CCC; color: #000 }
#header { background: #999; color: #FFF }
#colonna-sx, #colonna-dx { background:transparent; color: #000 }
#principale { background: #FFF; color: #000 }
#footer { background: #999; color: #FFF }
Bordi e padding
Nel layout realizzato, le sezioni sono separate anche da dei bordi e il testo è da questi distanziato impostando il padding.
Come ampiamente illustrato nell'introduzione ai CSS, se bordi e padding venissero aggiunti associando le proprietà ai selettori #colonna-sx, #principale e #colonna-dx il layout si allargherebbe oltre lo spazio concessogli, poiché, come già detto, la larghezza del padding e di bordi si aggiungerebbe a quella definita con la proprietà width.
La soluzione al problema è semplice: all'interno degli elementi <div id="colonna-sx">, <div id="principale">, <div id="colonna-dx"> vanno aggiunte delle sezioni contraddistinte dalla classe box che serviranno per impostare il padding e i bordi. Il codice (X)HTML è il seguente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
[...]
</head>
<body>
<div id="header">
[...]
</div>
<div id="colonna-sx">
<div class="box">[...]</div>
</div>
<div id="principale">
<div class="box">[...]</div>
</div>
<div id="colonna-dx">
<div class="box">[...]</div>
</div>
<div id="footer">
[...]
</div>
</body>
</html>
Le sezioni header e footer non hanno bisogno di questo espediente poiché la loro larghezza non è fissata. Il codice CSS adottato è il seguente:
#header {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
#colonna-sx .box, #colonna-dx .box {
padding: 10px;
}
#principale .box {
border-style: none solid solid solid;
border-color: #000;
border-width: 1px;
padding: 10px;
}
#footer {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
padding: 2px 10px;
}
Retrocompatibilità
Senza l'adozione dei CSS, la struttura del documento sarebbe poco chiara. A tal fine fra le diverse sezioni del sito conviente introdurre un orizontal-rule (HR) da nascondere ai browser che utilizzono i CSS:
Codice (X)HTML
[...]
<body>
<div id="header">
[...]
</div>
<hr />
<div id="colonna-sx">
[...]
</div>
<hr />
<div id="principale">
[...]
</div>
<hr />
<div id="colonna-dx">
[...]
</div>
<hr />
<div id="footer">
[...]
</div>
</body>
[...]
Codice CSS
hr { display: none }
La pagina senza i CSS sarà comunqe leggibile, come mostrato nel seguente esempio realizzato privando la pagina dei CSS.
Partendo dalla struttura illustrata in questo articolo, è possibile realizzare un gran numero di layout differenti tutti caratterizzati dall'estrema leggerezza del codice e semplicità di modifica, per non parlare dell'usabilità di una pagina che, se priva del layout, risulta comnunque ben strutturata.
File correlati
Articoli correlati:
- Ripristino in seguito all'utilizzo della proprietà float
- Il box model di IE5/Win
- Progettare con i CSS
Strumenti
.ConStile è disponibile anche in XML.
Some Rights Reserved. This work is licensed under a Creative Commons License.
