Tecniche di accessibilità web
Box model
[email protected]
Lezione 2 - Tecniche di layout avanzate
Tecniche di accessibilità web
Box model
L'insieme di regole che gestisce l'aspetto visuale degli
elementi di blocco in un layout.
E’ composto da 4 elementi principali:
Il contenuto
Il padding
Il bordo
I margini
[email protected]
Lezione 2 - Tecniche di layout avanzate
Tecniche di accessibilità web
Box model: il contenuto
È la zona in cui trova spazio il
contenuto vero e proprio,
testo, immagini, animazioni
Flash.
Le dimensioni orizzontali
dell'area possono essere
modificate con la proprietà
CSS width.
Quelle verticali con height.
[email protected]
Lezione 2 - Tecniche di layout avanzate
Tecniche di accessibilità web
Box model: il contenuto
La larghezza (width) e
l’altezza (height) di un
elemento possono essere
determinate in 2 modi:
Automaticamente dai
browser attraverso un calcolo
su contenuti e elementi della
pagina.
Specificata dallo sviluppare
via CSS.
[email protected]
Lezione 2 - Tecniche di layout avanzate
Tecniche di accessibilità web
Box model: il contenuto
La proprietà width può
assumere valori:
In percentuale.
valori espressi in unità di
misura (px, em, …).
Gli elementi inline, tranne
quelli rimpiazzati (es. <img>),
non hanno una larghezza
esplicita.
[email protected]
Lezione 2 - Tecniche di layout avanzate
Tecniche di accessibilità web
Box model: il contenuto
La proprietà height può
assumere valori:
In percentuale.
valori espressi in unità di
misura (px, em, …).
Se espressa in percentuale,
l’altezza dell’elemento
funziona solo se anche
l’altezza del contenitore
dell’elemento è espressa.
[email protected]
Lezione 2 - Tecniche di layout avanzate
Tecniche di accessibilità web
Box model: il padding
Il padding è uno spazio vuoto
che può essere creato tra
l'area del contenuto e il bordo
dell'elemento.
Si usa per la distanza del
contenuto dai bordi.
Se si imposta un colore o
un’immagine di sfondo per un
elemento questo si estende
dall'area del contenuto alla
zona di padding.
[email protected]
Lezione 2 - Tecniche di layout avanzate
Tecniche di accessibilità web
Box model: il padding
La proprietà padding può
assumere valori:
In percentuale.
valori espressi in unità di
misura (px, em, …).
Si specifica con:
Padding-top, padding-right,
padding-bottom, padding-left
shorthand
[email protected]
Lezione 2 - Tecniche di layout avanzate
Tecniche di accessibilità web
Box model: il bordo
È una linea di dimensione,
stile e colore variabile che
circonda la zona del padding e
l'area del contenuto.
Di default, gli elementi non
hanno bordo.
[email protected]
Lezione 2 - Tecniche di layout avanzate
Tecniche di accessibilità web
Box model: il bordo
La proprietà CSS border si
specifica con i valori:
Border-top, border-right,
border-bottom, border-left
Border-style: solid, dashed,
dotted
Border-color: di solito un
valore esadecimale del colore
Border-width: thin,
medium, thick oppure
un’unità di misura.
shorthand
[email protected]
Lezione 2 - Tecniche di layout avanzate
Tecniche di accessibilità web
Box model: il margine
E’ uno spazio di dimensioni
variabili che separa un dato
elemento da quelli adiacenti.
La proprietà CSS margin si
specifica con i seguenti valori:
Margin-top, margin-right,
margin-bottom, margin-left
Un valore in percentuale o
unità di misura (px, em, ..)
shorthand
[email protected]
Lezione 2 - Tecniche di layout avanzate
Tecniche di accessibilità web
Box model: il “collapsing margins”
Margini adiacenti di due o più riquadrati si combinano per
formare un singolo margine, nello specifico:
Due o più margini verticali adiacenti di elementi di
blocco nel flusso normale collassano. L'ampiezza del
margine risultante è data dal valore più grande tra i
margini dei 2 elementi adiacenti.
I margini verticali fra un elemento flottato ed ogni altro
elemento non collassano.
I margini di elementi posizionati in modo assoluto e in
modo relativo non collassano.
[email protected]
Lezione 2 - Tecniche di layout avanzate
Tecniche di accessibilità web
Box model: il “collapsing margins”
[email protected]
Lezione 2 - Tecniche di layout avanzate
Tecniche di accessibilità web
CSS Positioning
Position è la proprietà CSS per la gestione della
posizione degli elementi, di cui determina la modalità
di presentazione sulla pagina.
Si applica a tutti gli elementi e non è ereditata.
Può avere 4 valori:
static
relativo
absolute
fixed
[email protected]
Lezione 2 - Tecniche di layout avanzate
Tecniche di accessibilità web
CSS Positioning: static
Static è il valore di default, quello
predefinito per tutti gli elementi
non posizionati secondo un altro
metodo.
Rappresenta la posizione normale
che ciascuno di essi occupa nel
flusso del documento.
[email protected]
Lezione 2 - Tecniche di layout avanzate
Tecniche di accessibilità web
CSS Positioning: relative
L'elemento è posizionato
relativamente rispetto alla sua
posizione iniziale nel flusso del
documento.
La posizione può cambiare con i
valori top, left, bottom, right,
senza tuttavia variare il normale
flusso del documento.
[email protected]
Lezione 2 - Tecniche di layout avanzate
Tecniche di accessibilità web
CSS Positioning: absolute
L'elemento viene rimosso dal
flusso del documento ed è
posizionato in base ai valori top,
left, right o bottom rispetto al
box contenitore che a sua volta
deve essere posizionato in
maniera absolute, relative o
fixed.
Importante: posizionando un
elemento in maniera assoluta, si
varia il flusso del documento.
[email protected]
Lezione 2 - Tecniche di layout avanzate
Tecniche di accessibilità web
CSS Positioning: fixed
L’elemento viene, come per
absolute, sottratto al normale
flusso del documento.
La posizione rimane fissa, cioè
l’elemento non “scrolla” rispetto
al viewport, ovvero la finestra
principale del browser.
Problemi con IE6 e con i browser
che non hanno finestre (es.
iPhone).
[email protected]
Lezione 2 - Tecniche di layout avanzate
Tecniche di accessibilità web
CSS Floating
Con la proprietà float possibile rimuovere un
elemento dal normale flusso del documento e
spostarlo su uno dei lati (destro o sinistro) del suo
elemento contenitore.
Il contenuto che circonda l'elemento scorrerà
intorno ad esso sul lato opposto rispetto a quello
indicato come valore di float.
La proprietà non è ereditata.
[email protected]
Lezione 2 - Tecniche di layout avanzate
Tecniche di accessibilità web
CSS Floating
La proprietà float può assumere 3 valori:
left: l'elemento viene spostato sul lato sinistro del
box contenitore, il contenuto scorre a destra.
right. l'elemento viene spostato sul lato destro, il
contenuto scorre a sinistra.
none: valore iniziale e di default in mancanza di
una dichiarazione esplicita. L'elemento mantiene la
sua posizione normale.
[email protected]
Lezione 2 - Tecniche di layout avanzate
Tecniche di accessibilità web
CSS Floating
Importante
Quando si usa il float è necessario impostare la
larghezza dell’elemento con la proprietà width.
Non è il caso delle <img> in quanto esse hanno una
larghezza intrinseca che il browser riesce a calcolare.
Es.
li {float: left; width: 30em;}
img {float:left}
[email protected]
Lezione 2 - Tecniche di layout avanzate
Tecniche di accessibilità web
CSS Floating
[email protected]
Lezione 2 - Tecniche di layout avanzate
Tecniche di accessibilità web
CSS Floating
[email protected]
Lezione 2 - Tecniche di layout avanzate
Tecniche di accessibilità web
CSS Floating
[email protected]
Lezione 2 - Tecniche di layout avanzate
Tecniche di accessibilità web
CSS Floating: clear
La proprietà clear serve a impedire che al fianco di
un elemento compaiano altri elementi con il float. Si
applica solo agli elementi blocco e non è ereditata.
Ha 4 possibili valori:
none: elementi con float possono stare a destra e
sinistra dell'elemento.
left: impedisce il posizionamento a sinistra.
right: impedisce il posizionamento a destra.
both: impedisce il posizionamento su entrambi i
lati.
[email protected]
Lezione 2 - Tecniche di layout avanzate
Tecniche di accessibilità web
CSS Floating: clear
[email protected]
Lezione 2 - Tecniche di layout avanzate