In ques ta lezione analizzeremo alcuni dettagli relativi al foglio di stile "mainstyle.css". In particolare spiegheremo in che modo sia stato realizzato il layout senza fare uso di tabelle.
Centrare
Abbiamo visto nella precedente lezione che gli elementi fondamentali del CSS sono i sei #id che definiscono le proprietà di formattazione delle corrispondenti sezioni (identificate con il tag <div> nel documento XHTML). La prima cosa da evidenziare è il metodo usato per centrare il box principale (#sezprinc).
In HTML avremmo inserito una tabella centrandola con l'attributo align:
<table align="center">
Nei CSS non è possibile usare un attributo simile se non per il testo (proprietà text-align). L'ostacolo può essere superato con un uso accorto della proprietà margin. L'id #sezprinc è così definito:
#sezprinc {
background: #FFFFFF;
-------------------
margin : 20px auto;
text-align : left;
width : 574px;
}
Per centrare si procede in questo modo:
- Si assegna al box una larghezza esplicita (width: 574px;)
- Si assegna ai margini sinistro e destro il valore auto. In questo modo essi avranno una larghezza identica.
Nel nostro caso il valore della proprietà margin va così interpretato: il margine superiore è di 20 pixel, quello degli altri lati sarà calcolato automaticamente (auto). Questo è importante, perchè ci consente un design fluido e ci fa essere certi che cambiando risoluzione il box sarà sempre centrato. Alla risoluzione di 800x600 (figura 1), ad esempio, i margini sinistro e destro saranno di 113 pixel (800-574=226/2=113). A 1024x768 di 225 pixel (figura 2).
Però...C'è un piccolo problema nell'uso di questo metodo: Explorer 5 per Windows non interpreta bene la tecnica. Ma il modo per ingannarlo c'è. Il browser di casa Microsoft non gestisce secondo gli standard nemmeno l'attributo text-align. Infatti, applica l'allineamento anche ai box e non solo al testo che contengono. Allora, visto che #sezprinc è contenuto nell'elemento body basta aggiungere tra gli attributi di quest'ultimo l'istruzione "text-align: center;". Ecco il codice del nostro CSS, dove lo stile dell'elemento body occupa infatti il primo posto:
body {
background : #FFFFFF;
-------------------
text-align : center;
}
Tutto bene? Un attimo. Explorer 5 in questo modo centrerà correttamente il box, ma sorge un problema. Se definiamo l'attributo "text-align:center;" per l'elemento body succede che in tutti i box sottostanti il testo sarà centrato. Rimediare è ancora facile. Basta specificare nelle proprietà di #sezprinc l'attributo "text-align:left;", cosa che, come potete osservare sopra, abbiamo fatto puntualmente.
Testata
L'id #testata non presenta particolari problemi. In questo caso abbiamo settato esplicitamente l'altezza (height: 75px;), ma non la larghezza: essa sarà pertanto identica a quella del box parente (#sezprinc).
Menu
Poche osservazioni anche sull'id #menu. Abbiamo voluto che fosse meno ampio della testata. La sua larghezza è infatti di 512px. Con i margini abbiamo quindi impostato la sua posizione rispetto agli altri box:
margin : 0px 26px 1px;
Ricordiamo qui che l'ordine in cui vanno letti i valori di margin è il seguente: TOP, RIGHT, BOTTOM, LEFT. In pratica, bisogna seguire, a partire dall'alto un senso orario. Nel nostrio caso, la sezione menu sarà praticamente unita alla testata (top = 0px), avrà un margine di 26px a destra e di un solo pixel in basso. E a sinistra? Bene, nei CSS esistono delle semplici regole per evitare la replica dei valori. Quando manca il valore per il lato sinistro (dovrebbe essere il quarto), esso sarà uguale a quello del lato destro (il secondo). Quindi, il margine sinistro è di 26px.
Contenuto
Il box #contenuto è una sorta di scatola vuota che serve semplicemente a delimitare la sezione centrale e a stabilirne le misure di base. La larghezza e i margini sono identici a quelli della sezione #menu. La sua utilità consiste anche nel facilitare la gestione dei due box che contiene.
Navigazione
A parte i bordi, il colore di fondo e il padding, il menu di navigazione a sinistra ha due proprietà importanti che influenzano il layout generale della pagina.
La prima è la dichiarazione float: left; . Per capire la proprietà float dovete pensare al modo usato in HTML per far scorrere il testo attorno ad un'immagine. Se si usa l'attributo <img align="left"> l'immagine rimane a sinistra e il testo scorre intorno alla sua destra (figura 3). Allo stesso modo, definendo per l'id #navigazione float: left; facciamo in modo che esso rimanga a sinistra e che gli altri elementi adiacenti vengano spostati alla sua destra, ma non su una riga diversa, cosa che avviene per il box #post. Ecco cosa accade se eliminiamo l'istruzione (figura 4).
La seconda proprietà importante è la larghezza, che è uguale a 140px. Rimane la questione dell'altezza. Vi renderete conto che se non si specifica nessun valore, essa sarà basata sul contenuto. Se volete un'altezza fissa, usate height come per la testata.
Post
Siamo alla fine. L'id #post ha una larghezza di 350px ed è posizionato alla destra di #navigazione. Ma dove va posizionato precisamente? Qui entra in gioco il margine sinistro. Esso ha come valore 142px (margin : 0px 0px 0px 142px;), calcolati a partire dall'elemento parente (l'id #contenuto). Non è casuale. Se avessimo settato una distanza minore esso si sarebbe sovrapposto a #navigazione. Infatti, i 142px non sono altro che uguali alla larghezza di #navigazione + 2 pixel. L'immagine potrà chiarirvi questi particolari che possono sembrare un pò astrusi.
Bene. Il consiglio a questo punto è quello di sbizzarrirvi. Giocate un pò con il foglio di stile. Cambiate colori, margini, bordi, font. Capirete che la creatività si esprime proprio nei CSS, mentre il documento XHTML rimane intatto nella sua struttura.
Ora però dobbiamo riempire X-blog con i nostri post. È il momento di pensare ai contenuti.
