CocaDozzer
Moderator
 Din: Garda de Fier
Inregistrat: acum 17 ani
Postari: 197
|
|
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:
Figura 1 - Immagine di sfondo dell'header
Ed ecco quella per il footer:
Figura 2 - Imamgine di sfonfo del 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}
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.
_______________________________________
 PM-URI
 
JUST SAY THANKS-it only takes a second!!!!
|
|
№1
