CSS Fogli di stile per il sito scolastico Bobby WorldWide Approved AAA

UN LAYOUT A DUE COLONNE

Il layout seguente (vedi esempio) è quello classico che il nostro gruppo di lavoro sta utilizzando da alcuni mesi. Esso è composto da un div usato come contenitore principale, al cui interno trovano posto gli altri. La struttura ad albero del documento può essere così schematizzata
STRUTTURA AD ALBERO DI UN LAYOUT A DUE COLONNE

Passiamo adesso a spezzare e commentare il codice CSS che definisce la formattazione del documento. In seguito vedremo come interagisca con il documento html.sia il documento HTML stesso per esaminarne le modalità applicative

html {
height: 100%;
}
Questo è il cosiddetto "elemento radice" che si espanderà per tutto lo sviluppo del documento.
body { background-color: #FFFFFF; text-align: center; margin: 0px; padding: 0px; height: 100%; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 90%; color: #000000; }
L'elemento body, che definisce il corpo del documento, ha delle proprietà facilmente comprensibili: sfondo bianco, testo centrato, margini e padding 0 pixel, lo sviluppo dell'altezza al 100% ed il classico elenco di font, con dimensioni del 90% e colore nero.

#box { background-color: #FFFFFF; text-align: left; width: 100%; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; height: 100%; }
Il div box risulta centrato nella pagina con qualunque risoluzione, questo grazie ai comandi margini destro e sinistro in "auto". Per il resto: colore di sfondo bianco, testo allineato a sinistra, margini superiori ed inferiori a 0 pixel ed altezza e larghezza che si espandono al 100%

#top { background-color: #FFFFFF; }
Per lo spazio dove poi inseriremo il logo ed altre informazioni sul titolo, definiamo esclusivamente il colore di sfondo bianco.
La larghezza non espressa si adegua a quelle dell'elemento parente, l'altezza sarà data dal contenuto

#barretta { background-color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #FFFFFF; border-top: 2px solid #CCCCCC; border-bottom: 2px solid #CCCCCC; padding-left: 1px; padding-top: 2px; padding-bottom: 2px; }
Questo è lo spazio dove potremo inserire informazioni quali l'indirizzo della scuola, l'e-mail, ecc...
Da notare che sia in quest'area che nelle altre possiamo modificare sia il colore di sfondo, sia quello dei bordi, sia quant'altro ci necessita.

#left { background-color: #CCCCCC; float: left; width: 15%; height: 100%; margin: 0px; }
Parte sinistra con inserito il menu.
La proprietà più importante è il float: left che spinge l'attuale box verso il bordo sinistro del box contenitore.
Ricordarsi che quando si usa il float è necessario specificare anche l'altezza.
E' utile quindi stabilire anticipatamente i valori della larghezza. Poichè il box principale è al 100%, impostando una larghezza del left al 15%, ne rimangono disponibili 85%.

.menu { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #000000; background-color: #FFFFFF; }

.menu a { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #000000; text-decoration: none; background-color: #6699FF; display: block; width: auto; border-bottom: 1px solid #000000; border-right: 0px solid #000000; border-left: 0px solid #000000; border-top: 1px solid #FFFFFF; padding: 1px; }

.menu a:hover { background-color: #FFFF66; }
Struttura di un menu con un classico effetto "rollover".
Comunque si può usare qualsiasi modello o modificare il presente nel colore, forma, ecc.. Sottolineamo: l'eliminazione della sottolineatura, il diplay: block, la larghezza auto, i vari bordi ed il padding ad 1 pixel.

#middle { background-color: #FFFFFF; width: 85%; float: left; height: 100%; margin: 0px; }
Parte centrale del documento. Da notare il valore della larghezza (85%) ed il float: left

#contenuto { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; background-color: #FFFFFF; width: 80%; margin-right: 9px; margin-left: 9px; }
Infine il contenuto che impostiamo con larghezza del 90% al quale vanno sommati i margini, destro e sinistro di 15+15=30 pixel.