Il sito per imparare gratuitamente a fare pagine Web

Guida XHTML con Style

Questa guida è stampabile in modo agevole dalla versione off-line scaricabile dal menù laterale: Download.zip



Andrea Bianchi © www.web-link.it  Guida XHTML con Style - Ver. 1.5.1  

il Box Model.

Una delle cose più importanti introdotte con i CSS è il box model che permette di creare una struttura (layout) fatta da rettangoli e/o quadrati, praticamente una specie di colonne e righe, con o senza bordo, per impaginare i nostri dati, siano essi testi, immagini o qualsiasi altra cosa che potrebbe far parte di una pagina web.

Vediamolo un box, questo il suo codice in css per definirlo:

#box {
width: 350px;
height: 150px;
padding: 20px;
border: 5px solid;
margin: 20px;
}

Dove:
width ed height sono rispettivamente larghezza ed altezza dei contenuti che possono essere inseriti all'interno del box.
padding é lo spazio fra i contenuti ed il bordo del box.
border é lo spessore del bordo.
margin é la distanza del box dagli altri elementi della pagina.

box model

Questo il codice html per richiamarlo all'interno della pagina:

<div id="box">Testo di prova per riempire il box... </div>

Questo il risultato a video:

Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per

Da notare che la larghezza e l'altezza totale di un box sono dati dalla somma dei contenuti più quello del padding più quello dello spessore del bordo. Nel nostro caso lo spazio occupato realmente sarà: 350 + 20 + 20 + 5 + 5 = 400 pixel per la larghezza e 150 + 20 + 20 + 5 + 5 = 200 pixel in altezza. Praticamente le misure specificate (350 x 150) si riferiscono ai contenuti.

Questo è vero per tutti i browser tranne che per alcune versioni di IE, il famoso browser della Microsoft, il più adoperato (una volta) ma anche quello che meno di altri rispetta gli standards, o se preferite, le direttive del W3C. Li chiameremo bugs e di questi ce ne sono diversi che si sommano a molte proprietà dei CSS che non sono supportate da IE. Pazienza, noi navigatori confidiamo nelle versioni future di quel browser e nel frattempo chiediamoci come mai noi ci diamo tanto da fare per adeguarci ai nuovi metodi quando poi certe case produttrici di browser possono fare come gli pare. Ma questo è un discorso che qui non c'entra molto.

Se si trattasse di un solo box probabilmente nessuno si accorgerebbe di nulla ma dovendo creare un layout formato da più box ecco che le differenze si notano, qualche pixel in più o qualche pixel in meno sarebbero sufficienti per scombinare tutta la nostra impaginazione, per fortuna si può rimediare, vediamo come.

Internet Explorer nelle vecchie versioni (se lavora in quirks mode) considera la larghezza e l'altezza dei contenuti sottraendo dalle misure specificate quelle dello spessore del bordo e dello spazio padding. Nel nostro caso il box esterno sarà realmente 350 x 150 Pixel ma il box dei contenuti si rimpicciolisce diventando: 350 - 20 - 20 - 5 - 5 = 300 pixel per la larghezza e 150 - 20 - 20 - 5 - 5 = 100 pixel per l'altezza.

In questo esempio la differenza sarebbe notevole se visto con un browser come Firefox ed un IE V.5 e dal momento che IE sottrae bordo e padding dalla larghezza e dall'altezza totale, si potrebbe risolvere creando due box, uno interno all'altro dove nel box esterno non si specificano ne bordi ne padding che metteremo solo nel box interno.

#box-esterno {
width: 400px;
height: 200px;
}

#box-interno{
padding: 20px;
border: 5px solid;
margin: 20px;
}

Questo il codice html per richiamarlo all'interno della pagina:

<div id="box-esterno">
 <div id="box-interno">
  Testo di prova per riempire il box...
 </div>
</div>

Questo il risultato a video:

Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per

Il risultato a video è lo stesso per tutti i browser ed il bug di IE non assegnerà al box dei contenuti misure differenti perchè il box interno non ha misure alle quali sottrarre bordi e padding e nel box esterno non ci sono bordi e padding da sottrarre.

PS: se vedete i due box diversi frà di loro il vostro browser è uno di quelli affetti da bug del box model.

Nella prossima lezione, dedicata sempre al box model, vedremo come posizionarli e quali siano i parametri principali.

Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.



Andrea Bianchi