- Learn
- Guida Layout dei siti con i CSS
- Layout monolitico
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.
Se vuoi aggiornamenti su Layout monolitico inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Come creare una texture legno in Photoshop
In questo video vedremo come creare una texture che ricorda delle assi di legno affiancate. Per seguire questo tutorial non […]