Come Creare un sito a 2 colonne tableless
In questo articolo vedremo un esempio pratico e di difficoltà medio bassa di creazione di un layout tableless a due colonne, con header in alto e footer in basso. Chiaramente potrete riutilizzare il codice mostrato per qualsiasi vostro progetto.
Iniziamo a definire la struttura della pagina xhtml, inserendo il giusto doctype per xhtml 1.1, definendo la lingua italiana ed il charset come UTF-8 ed aggiungendo il link al css, inserito nella stessa directory del file e 4 blocchi per header, footer e le due colonne, messi in un blocco contenitore:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
<head>
<title>Prova layout 2 colonne</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="style.css" title="Style" media="all" />
</head>
<body>
<div id="contenitore">
<div id="header"> </div>
<div id="colsx"> </div>
<div id="coldx"> </div>
<div id="footer"> </div>
</div>
</body>
</html>
Modifichiamo il css dando i colori di sfondo ai vari blocchi:
- bianco al body (non è ridondante, visto che molti, me compreso non assegnano colori al css predefinito dal browser)
- #4A2C3E all’header
- #F90 alla colonna sinistra
- #060 a quella di destra
- #999 al footer
- al contenitore non diamo alcun valore lasciando quindi visibile il colore dello sfondo del body.
Il css a questo punto sarà questo:
body {background:white;}
div#contenitore {}
div#header {background:#4A2C3E;}
div#colsx {background:#F90;}
div#coldx {background:#060;}
div#footer {background:#999;}
Ed il risultato sarà questo (clicca sulle immagini per vederle a grandezza maggiore):
Definiamo ora le larghezze dei vari blocchi. Ipotizzo che tutto il sito avrà larghezza totale di 900px (ovviamente potremmo anche definire la dimensione in percentuale o valori diversi):
Il css sarà:
body {background:white;}
div#contenitore {width:900px;}
div#header {background:#4A2C3E;}
div#colsx {background:#F90; width:650px; float:left;}
div#coldx {background:#060; width:250px; float:left;}
div#footer {background:#999; clear:left;}
In rosso le parti aggiunte. Noterete che utilizziamo le proprietà float e clear per far sì che le colonne si affianchino una all’altra ed il footer si riposizioni correttamente al di sotto di entrambe.
Il risultato finora:
Salta subito all’occhio che sotto la colonna sinistra abbiamo dello spazio bianco: ciò è dovuto al fatto che non abbiamo definito un’altezza e quindi il blocco, una volta riempito dal testo fittizio, finirà lasciando intravedere ciò che vi è sotto. Lo stesso problema, inverso avremo nel caso in cui l’altezza della colonna destra sia minore dell’altra.
Soluzioni possibili possono essere:
- definire un’altezza comune ed aggiungere le scrollbar simulando i frame
- definire un’altezza minima ai blocchi con min-height, utilizzando l’hack per i browser di casa Microsoft, tenendo in mente che comunque avremmo problemi con altri browser come safari
- dare un colore di sfondo al contenitore uguale al blocco di minore altezza, avendo ben presente che se l’altro ha altezza maggiore avremo dei problemi.
Seguiremo la strada numero 3 ipotizzando che il blocco di destra abbia altezza maggiore e comunque non preoccupandoci troppo del caso opposto.
Altra cosa che notiamo è che il tutto è allineato a sinistra. Volendo allinearlo al centro dovremmo usare la proprietà margin: 0 auto; al blocco contenitore, proprietà che dice allo stesso di posizionarsi a distanza 0 da sopra e sotto ed automaticamente da destra e sinistra dal contenitore in modo centrato. IE non segue questa proprietà correttamente e per supplire al problema inseriamo nel body: text-align:center, che posiziona tutto ciò che c’è nel body al centro. Successivamente reimpostiamo text-align:left; in contenitore per dare allineamento a sinistra agli oggetti presenti.
Css con le modifiche al momento:
body {background:white; text-align:center;}
div#contenitore {background:#F90; width:900px; margin:0 auto; text-align:left; }
div#header {background:#4A2C3E;}
div#colsx {background:#F90;width:650px; float:left;}
div#coldx {background:#060; width:250px; float:left;}
div#footer {background:#999; clear:left;}
Anteprima:
Ci siamo quasi: impostiamo ora un famiglia ai caratteri, inseriamo il titolo della pagina ed il sottotitolo, il padding ai blocchi e ci fermiamo qui.
body {background:white; text-align:center; font-family:Helvetica, arial, sans-serif;}
div#contenitore {background:#F90; width:900px; margin:0 auto; text-align:left; }
div#header {background:#4A2C3E; height:5em;}
h1 {color:white; text-align:right; padding:1em 1em 0 0; font-family:Georgia, serif;}
div#colsx {width:630px; \width:650px; w\idth:630px; float:left; padding:10px;}
div#coldx {background:#060; width:228px; \width: 250px; w\idth:228px; float:left; padding:10px; border-left:2px solid white;}
div#footer {background:#999; clear:left; border-top:3px solid #4A2C3E; text-align:center; }
In rosso vediamo le ultime modifiche; abbiamo
- impostato la famiglia di caratteri come helvetica, in mancanza del quale vedremo l’arial o il generico bastoni impostato dal browser;
- assegnato un’altezza di 5 volte l’altezza media di una riga all’header;
- creato una regola per l’h1 del titolo del sito: colore bianco, allineato a destra, con padding di 1em da sopra e da destra e con font Georgia o il bastoni di default;
- dato un padding alle due colonne di 10px per lato ed assegnato un bordo sinistro bianco di due pixel alla colonna destra;
- assegnato un bordo di 3 px in alto al footer dello stesso colore dell’header ed impostato un’allineamento al centro.
In azzurro sono presenti le modifiche fatte per evitare un errore di enterpretazione del box model di IE 5 ed in modo limitato del 6 (si verifica l’errore se non si è specificato un doctype). Qual è la logica? Il width, da specifiche del W3C, dovrebbe indicare la larghezza del blocco SENZA padding, bordo e margine, come indicato nell’immagine accanto.
Le vecchie versioni di IE recepiscono come width il width effettivo più il bordo ed il padding.
Noi siamo partiti da una larghezza di 650px per la prima colonna: aggiungendo il padding di 10px a destra ed a sinistra abbiamo dato come larghezza 630px (650-10-10); la seconda colonna era inizialmente di 250px; tolti 20px di padding e 2 di bordo resta una larghezza di 228px. Per le vecchie versioni di IE la larghezza dovrebbe esser immutata a 250. Dato che IE5 non riesce a leggere questa istruzione w\idth a differenza di altri browser, possiamo impostare la larghezza prima e ridefinirla successivamente con un’istruzione che non sarà ripresa dal browser Microsoft. (Approfondiremo questa ed altre tecniche in prossimi articoli.)
Questo sarà il risultato definitivo:
Articolo interessante ed esaustivo, complimenti 🙂
5 novembre, 2006 - 2:50 am[Permalink]