CSS

• PAGINA PRINCIPALE [P]

BOX MODEL - BORDI E PADDING

Nel layout da realizzare, le sezioni sono separate anche da bordi e il testo è da questi distanziato impostando il padding.

Ricordatevi che se bordi e padding venissero aggiunti associando le proprietà ai selettori #principale e #colonna-dx il layout si allargherebbe oltre lo spazio concessogli, poiché, la larghezza del padding e di bordi si aggiungerebbe a quella definita con la proprietà width.

…. Il box model dei CSS permette di definire dei blocchi rettangolari con specifici valori per la larghezza e l'altezza della sezione contenuti, del padding, dei bordi, dei margini. Purtroppo, explorer per Windows non ha una interpretazione corretta del box model. È molto importante conoscere il problema, essendo il box model uno dei migliori strumenti offerti dai CSS ed essendo explorer per Windows ancora il browser più diffuso.
Il box model viene specificato impostando la largezza e l'altezza dei contenuti, il padding, dimensioni e stile del bordo e il margine. Il padding è lo spazio fra i contenuti e il bordo, mentre il margine è lo spazio fra il bordo e gli altri contenuti della pagina.
Quando, con la proprietà 'width', si specifica la larghezza del box, si specifica la larghezza dell'area che conterrà il testo del box. La larghezza del box fino al bordo è la somma della larghezza specificata con width + ampiezza del padding + spessore del bordo (vedi immagine successiva)….. (CSS hoepli)

[D]

Questo secondo gli standard CSS.

EXPLORER per Windows (non per Mac) considera la larghezza specificata con width, come la larghezza del box fino al bordo. Bordo e padding vengono scalati dalla larghezza specificata (vedi immagine successiva)

.

[D]

La soluzione al problema è semplice: all'interno degli elementi come <div id="principale">, <div id="colonna-dx"> vanno aggiunte delle sezioni, (un contenitore dentro l'altro)che serviranno per impostare il padding e i bordi. Va verificato sempre l'effetto con pił brouser.

In realtà c'è un problema: Internet Explorer lascia, sulla destra, un margine di 1px. Ciò fa sì che la colonna sulla destra non ha a disposizione il 20% della pagina, ma il 20% meno 1px. La colonna di destra, dunque, non affiancherebbe le altre due, ma verrebbe a trovarsi al di sotto della colonna di sinistra. Per ovviare al problema è sufficiente impostare il margine destro della colonna di destra a  -1px.

#colonna-dx { margin-right:-1px; }

[D]

Affinché il nostro layout occupi tutto lo spazio a disposizione bisogna impostare a zero il margine e il padding del BODY. Bisogna però sottolineare che, avendo posto a -1px il margine destro della colonna di destra, a causa dei soliti problemi nell'interpretazione del box model di Internet Explorer,  apparirà la barra di scorrimento orizzontale. Per ovviare a questo problema è sufficiente impostare il margine destro del BODY a 1px:

body
{ margin:0 1px 0 0; }