Sono molti gli articoli sul layout con i CSS presenti qui sulla
sezione di HTML.it dedicata ai fogli di stile. Come alcuni lettori avranno notato, ho
sempre avuto la tendenza a focalizzarli sui concetti alla base del
foglio di stile e sulla struttura portante, tralasciando, a volte volutamente,
l'aspetto grafico a favore dell'aspetto didascalico degli articoli
stessi.
In questo appuntamento vedremo una tipologia di layout piuttosto diffusa
di recente, e in costante espansione, la cui impostazione è principalmente grafica...
anche se piuttosto minimale.
Mancando un termine per definirlo, ho pensato di nominarlo layout falso-liquido.
Vediamo subito l'esempio che accompagna l'articolo. In sostanza
si tratta di un layout a due colonne in cui header e footer si estendono per tutta la larghezza della pagina e la
sezione centrale, composta da contenuti e navigazione, ha larghezza fissa.
Tipicamente, l'effetto di estensione di header e footer è accompagnato da due sfondi, mentre la sezione centrale ne
risulta libera in modo da conferire un'idea di semplicità e allo stesso tempo di pienezza grazie
a quello che nel disegno grafico viene chiamato white space.
Dopo questa breve premessa, possiamo procedere con l'HTML e il CSS dell'esempio.
Il markup
Per prima cosa, vediamo il markup, che si presenta in realtà un po' atipico:
<div id="header">
<h1>Qui il logo</h1>
</div>
<div id="container">
<div id="content">
qui il contenuto
</div>
<div id="menu">
qui il menu
</div>
</div>
<div id="footer">
Qui il footer
</div>
Da notare come, a differenza della maggior parte dei layout visti finora,
in questo caso non c'è un container che racchiude tutti gli elementi di pagina.
Header e footer infatti sono contenuti direttamente nel body, mentre il container
racchiude in realtà solo i contenuti centrali.
Il foglio di stile
Nel preparare l'esempio ho pensato a una pagina che
potesse risultare quasi completa. Il risultato non ha comunque richiesto molto lavoro
e, dato che l'esempio usa due sole immagini per il layout,
direi che nella sua semplicità riesce ad essere accattivante. Ecco l'immagine
usata per l'header:
Ed ecco quella per il footer:
Vedremo qui brevemente le parti essenziali del CSS. Il suo studio per intero è lasciato
al lettore per esercizio. Per agevolare la consultazione del CSS, che è incorporato
nell'esempio, ho pensato di preparare una pagina con il codice
ottimizzato per la lettura.
Di solito quando si inizia con il CSS da zero, si parte con le definizioni generiche
e la tipografia. In questo caso ho usato i font della serie Lucida che si presentano
a parer mio eleganti e leggibili, oltre che ad essere piuttosto diffusi.
Ecco quindi le regole di base per gli elementi html e body:
html,body{margin:0;padding:0}
body{font: 85%/1.45 "Lucida Sans Unicode","Lucida Grande",Lucida,Arial,sans-serif;
background:#FFF url(header.png) repeat-x top;color: #333;text-align: center}
Ora le regole
per l'header. Lo renderemo alto 120 pixel in tutto, per assegnare l'immagine
di sfondo e al suo interno centreremo, sia verticalmente che orizzontalmente, l'h1
che sarà largo 770 pixel (ovvero quanto la sezione centrale) con il testo allineato
a sinistra. Ecco le due regole:
div#header{margin-bottom:1em;padding-bottom:15px;color: #FFF;
background: #A41B1B url(header.png) repeat-x top}
div#header h1{width: 770px;margin:0 auto;text-align: left;
font: lighter 250%/105px "Lucida Sans Unicode","Lucida Grande",Lucida,Arial,sans-serif}
Siamo così arrivati alla sezione centrale. Il div id="container" sarà
dichiarato largo 770px e centrato:
div#container{width: 770px;margin: 0 auto;text-align: left}
Con i float opposti, di cui abbiamo parlato nell'articolo
Float: teoria e pratica,
affiancheremo quindi la sezione dei contenuti e la navigazione, lasciando implicitamente uno spazio
tra di essi piuttosto generoso, ovvero 40 pixel. Ecco le due regole:
div#content{float: left;width: 570px}
div#menu{float: right;width: 160px;padding-top:2.7em}
Infine il footer: per un layout stabile basterà assegnargli il clear
su entrambi i lati. Verrà poi attribuita l'immagine di sfondo che, come per l'header,
si ripete orizzontalmente:
div#footer{clear: both;padding-top: 10px;
background:#95B3B3 url(footer.png) repeat-x top;color: #333}
Il nostro esempio è così sostanzialmente completo:
ho pensato in questo caso di aggiungere una navigazione con marcatore e un'immagine
con effetto ombra per renderlo più completo. Tecniche che si possono approfondire,
rispettivamente negli articoli Grafica per
blog con i CSS e Usare il background.
Una piccola nota finale: il codice CSS dell'esempio è incorporato nella pagina
ma ovviamente in casi reali andrebbe spostato in un file esterno, che peserebbe così com'è all'incirca
1,5kb. Ora è tempo di conclusioni.
Conclusioni
Abbiamo visto in questo articolo come ottenere un layout semplice, accattivante
e soprattutto stabile con due sole immagini e poche regole CSS, senza l'uso di hack
né workaround, che potrà costutire una buona base di partenza o un buono spunto
per i vostri progetti.
Il risultato è stato testato con successo sulle versioni di Internet Explorer
dalla 5 alla 7, oltre che sulle ultime versioni di Opera, Firefox e Safari. Codice
e immagini sono disponibili per il download. Alla prossima.
