Layout monolitico

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.