Iniziamo ad elaborare le regole CSS necessarie per realizzare un layout a colonna
singola fluido. Per prima cosa, agiremo sui tag html
e body, eliminando margini e padding.
Questo perchè tutti i browsers, come spiegato nel mio articolo "Capire
il Box Model", assegnano di default margini e/o padding ad alcuni elementi,
inclusi html e body.
Poi agiremo sul font-size: personalmente
preferisco un carattere proporzionale, e il 76% è la misura ottimale.
Poi il font-family della pagina: basterà
dichiararlo nel body. In questo caso
ho indicato un carattere arial (che è uno tra i più diffusi) e, cosa
importantissima, la famiglia generica a cui appartiene, ovvero sans serif,
nel caso in cui questo font non fosse disponibile sul sistema dell'utente.
Aggiungeremo un background-color
all'header, alla navigazione e al footer. Infine, alcune proprietà di formattazione:
padding, margin e text-align delle varie sezioni. Ecco il css minimale:
html,body{margin:0; padding: 0}
body{font-family: arial,sans-serif; font-size: 76%}
div#container{ /*nessuna regola necessaria*/
}
div#header{background: url(sfondo.gif)}
h1{margin: 0;padding:0}
h2{color:#4078B8; font-size:1.5em; text-align:center}
div#navigation{background-color:#000; color: #fff}
div#content{padding:0 1.5em}
div#content p{line-height:1.3em}
div#footer{padding:0.5em; background-color:#B0D0E8; color:#000; text-align:center}
A queste regole vanno ad aggiungersi quelle per la navigazione e la pagina
è pronta. Spiegare come presentare le liste di navigazione esula dallo scopo di
questa guida, ma ho pensato comunque di aggiungere un po' di stile alla pagina,
giusto per renderla un po' più accattivante: questo
è il risultato. Scarica l'esempio. In questa, come in tutte le pagine di esempio che presenteremo,
è possibile visualizzare il codice CSS utilizzato.