Abbiamo parlato di faux columns (o per dirla
in italiano, false colonne) in diverse occasioni, per esempio
nell'articolo Usare il background e
nella Guida al layout con i CSS.
In questo appuntamento vedremo una tecnica semplice per estendere il
concetto delle false colonne in maniera molto semplice. Niente
di particolarmente innovativo, ma si può presentare come una
soluzione molto pratica in certi casi.
Vediamo subito il primo esempio che accompagna
l'articolo: si tratta di un classico layout a larghezza fissa, con due colonne,
header e footer, in cui tutti gli elementi si presentano con bordi arrotondati
e sfumati.
La costruzione grafica
L'impostazione dell'esempio è
soprattutto grafica, per ottimizzare il numero di immagini e il numero
di div usati. È infatti questo il punto di forza
dell'esempio, che usa solo tre immagini per l'intero layout,
più una per l'image replacement sul logo.
La base da cui partire è questa immagine
che ho realizzato con Gimp. Ho proceduto quindi a tagliarla in
modo da poter usare gli sfondi per il nostro esempio.
Ecco quindi le tre immagini risultanti:
- immagine per l'header
- immagine per la parte centrale, che si ripete verticalmente
- immagine per il footer
Come si può notare, le immagini per l'header e per il footer includono
rispettivamente apertura e chiusura della parte centrale: questo ci permette
di poter chiudere le false colonne senza troppe complicazioni.
Il markup
Dopo aver visto la costruzione grafica dell'esempio
possiamo procedere con il markup. Una buona regola da tener presente in generale
è che il markup deve adattarsi inanzittutto a contenuti e struttura della pagina,
e, salvo necessità grafiche particolari o problemi di compatibilità cross-browser,
bisognerebbe tenere al minimo il numero di div strutturali.
Nel caso dell'esempio, si sono usati un contenitore
generico per l'intera pagina e uno per le sue quattro sezioni principali, ovvero header,
contenuti, colonna secondaria e footer. Ecco il codice HTML minimale:
<div id="container">
<div id="header"><h1>Header</h1></div>
<div id="content">Contenuto</div>
<div id="sidebar">Navigazione</div>
<div id="footer">Footer</div>
</div>
Il CSS
Dopo aver visto costruzione grafica e markup dell'esempio
possiamo vedere brevemente il suo CSS.
È incorporato nella pagina, ma per agevolarne la consultazione ho preparato una
pagina con il suo foglio di stile commentato.
Il CSS è piuttosto semplice e la sua spiegazione approfondita esula dallo
scopo dell'articolo.
Ci sono però alcune considerazioni sull'implementazione da fare.
Per prima cosa, l'uso degli sfondi: le tre immagini che abbiamo presentato
a inizio articolo vengono assegnate rispettivamente al container, all'header e al footer,
combinati sapientamente con l'uso del padding per dare una continuità grafica.
Per il footer, oltre al padding si è dovuto anche assegnare un'altezza specifica:
in tal caso per evitare problemi di box model di IE5.x
ho utilizzato una variante del box model hack di cui ho parlato
qui sul blog.
Il layout è stato realizzato grazie ai float opposti, di cui si è parlato
nell'articolo Float: teoria
e pratica. Per evitare un annoso bug di
IE6 che raddoppia i margini concordi con il float, citato nella serie sulla
risoluzioni
dei problemi di CSS, si è usata la dichiarazione display:inline
che sistema il bug ma non compromette la resa sugli altri browser.
Infine, per l'header grafico, ho utilizzato
questa tecnica
di cui ho parlato nell'articolo 3
tecniche di image replacement.
Il risultato ha richiesto un po' di lavoro,
e soprattutto è denso concettualmente: ma il codice nel complesso è semplice, logico
e leggero. La compatibilità risultante è decisamente buona: è stato testato con
le versioni di Internet Explorer dalla 5 alla 7, e le ultime versioni di Opera,
Firefox e Safari. Prima di concludere, diamo uno sguardo ad una possibile variante.
Una variante
L'esempio appena visto ha una piccola limitazione:
il footer, avendo altezza fissa, può contenere al massimo due o tre righe. Ecco quindi
una variante che ovvia a questa limitazione. Il CSS
è molto simile a quello del primo esempio, cambiano solo poche dichiarazioni (tra cui
l'altezza del footer che nel secondo caso è stata eliminata) e, ovviamente, i due sfondi
per header e footer. Anche in questo caso, la compatibilità è piuttosto buona. I due
esempi con codice e immagini sono disponibili per il download. Alla prossima.
