Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 12 di 41
  • livello principiante
Indice lezioni

Layout monolitico

Le regole CSS per layout a una colonna che si adattino alla larghezza della finestra del browser
Le regole CSS per layout a una colonna che si adattino alla larghezza della finestra del browser
Link copiato negli appunti

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.


Ti consigliamo anche