Passiamo quindi ad esaminare gli stili generali che daremo al nostro layout.
Soffermiamoci sulle dichiarazioni date all'elemento body
:
abbiamo impostato un'immagine di sfondo ripetuta in verticale al fine di tracciare lo sfondo della colonna laterale, dando così l'impressione di una colonna che si estende per tutta l'altezza della pagina. Poichè la colonna ha una larghezza pari al 30% della larghezza complessiva della pagina, l'immagine di sfondo è stata posizionata lungo l'asse x ad una distanza pari al 70% della larghezza totale (100 - 70 = 30).
L'immagine è larga 2000 pixel ed è alta 10 pixel. Questa immagine è trasparente ad eccezione di un rettangolo a destra largo 600 pixel e riempito con un colore di sfondo azzurro chiaro ed un bordo sinistro blu scuro. La larghezza del rettangolo colorato deve essere pari al 30% della larghezza complessiva dell'immagine (2000 pixel). Le dimensioni dell'immagine sono tali da permettere allo sfondo di adattarsi anche a risoluzioni di schermo molto elevate.
Abbiamo avuto cura di impostare anche un colore di sfondo per l'elemento body
, in modo da permettere la lettura
qualora l'immagine di sfondo non fosse reperibile.
A questo punto occorre evidenziare un'importante differenza esistente tra il nostro documento servito come application/xhtml+xml
e lo stesso documento servito come text/html
. La differenza viene riassunta
nelle due immagini che seguono.
Figure 2-3: L'immagine di sfondo in HTML (a sinistra) e in XHTML (a destra)
[D]
Nella prima figura abbiamo il documento servito come text/html
. In questo caso l'elemento body
viene
trattato in modo speciale dai browser, nel senso che questo elemento copre interamente lo sfondo dell'elemento html
, ossia
dell'elemento radice. In altre parole, body
"ruba" lo sfondo dell'elemento radice.
Nella seconda figura abbiamo il documento servito come application/xhtml+xml
. In questo caso lo spazio bianco è
giustificato dal fatto che ora body
viene considerato come un elemento qualsiasi, ed il "furto" dello sfondo
non ha più luogo. Poichè l'elemento h1
ha dei margini verticali, i browser ritengono che si venga a creare
dello spazio tra l'elemento radice e body
. Tale spazio viene mostrato.
Come ovviare al problema? La soluzione più semplice è quella di specificare l'immagine di sfondo anche per l'elemento
html
, usando la stessa dichiarazione usata per l'elemento body
. Nel nostro caso questa soluzione
non è necessaria, perché quello spazio sarà colmato dall'intestazione del nostro layout.
Possiamo osservare il lavoro svolto sinora nel nostro documento XHTML e nel nostro documento HTML.