TAG <div> e CSSRicalcare la grgilia di impaginazione

UNA STRUTTURA PER I CONTENUTI

• Oltre a caratterizzare i contenuti (titoli, paragrafi, liste, collegamenti), il linguaggio di marcatura ha il compito di realizzare la struttura in cui inserire i contenuti stessi

• Per raggruppare elementi da trattare come un oggetto unico, l’elemento chiave è il tag <div>

• Il tag <div> è un contenitore generico.

PRIMA PARTE: XHTML

IL FLUSSO• I diversi box sono inseriti nel così detto “flusso”

• I box a livello di blocco (compresi i box anonimi) si dispongono uno di seguito all’altro in verticale, distanziandosi in base ai margini

• I box in linea (compresi i box anonimi) si dispongono orizzontalmente uno di seguito all’altro, su una o più linee a seconda dello spazio.

• La loro spaziatura orizzontale è determinata anche da margini, bordi e padding.La spaziatura verticale è determinata solo dall’interlinea (line-height)

PRIMA PARTE: IL VISUAL FORMATTING MODEL

p { border:1px solid #00C; }em{ margin:2em;border:1px solid #C00 }strong {border:1px solid #0C0;padding:0.7em;}

Modello visuale di CSS – flusso verticale • La visualizzazione di un documento con CSS avviene identificando lo spazio di

visualizzazione di ciascun elemento del documento.

• Il flusso di dati è sempre dall’alto verso il basso

• Ogni elemento è definito da una scatola all'interno del quale sta il contenuto. Le scatole sono in relazione alle altre come segue:

• Le scatole degli elementi contenuti stanno dentro alla scatole dell'elemento genitore. • Flusso normale di tipo blocco: le scatole sono poste l'una sopra l'altra in successione

verticale (come paragrafi). • L’elemento che contiene le varie scatole, assume la dimensione massima data dalla somma

delle dimenzioni degli elementi in esso contentui• La posizione di ogni elemento è relativa agli elementi vicini e agli elementi che lo

contengono.

Modello visuale di CSS – Box Model• Flusso normale di tipo inline: le scatole sono poste l'una accanto all'altra in successione

orizzontale (come parole della stessa riga)• Gli elementi stanno tutti uno accanto all’altro su una linea orizontale. • La posizione di ogni elemento è relativa agli elementi vicini e agli elementi che lo contengono. • Si utilizza molto per orientare le voci di un menu, realizzato con una lista non odinata ( <ul> e

rispettivi <li>)• Di solito, per un menu orizzontale, si dichiara una lista non ordinata• Si dichiarano le voci di menu (“home”, “chi siamo”, “dove”, “contatti”) come dei list item.• Si associa ad un elemento li e ul il rispettivo selettore con la property display:inline;

li a { color: white; display:inline; padding:10px; font-weight: bold; height: 40px; line-height: 50px; text-decoration: none;}

Modello visuale di CSS – Box Model• Flusso di tipo float: le scatole sono poste all'interno del contenitore e poi spostate

all'estrema sinistra o destra della scatola, lasciando che le altre scatole vi girino intorno.

• La posizione di ogni elemento è relativa agli elementi vicini e agli elementi che lo contengono.

• Dichiarando un elemento come “float”, è come se lo si staccasse dal normale flusso di lettura dei blocchi dall’alto verso il basso e lo si stesse posizionando sulla destra o sulla sinistra del foglio.

Positioning dei blocchi

• Alcune proprietà controllano il tipo di posizionamento e di scatola• Position: valore; è la proprietà fondamentale per la gestione della posizione

degli elementi: determina la modalità di presentazione di un elemento sulla pagina

I valori con cui è possibile definire la modalità di posizionamento sono quattro:

•static; •relative; •absolute; •fixed.

Static

• position: 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.

Position: relativeL’elemento viene posizionato relativamente al suo box contenitore.

In questo caso il box contenitore è rappresentato dal posto che l’elemento avrebbe occupato nel normale flusso del documento. La posizione viene impostata con le proprietà top, left, bottom o right. Nel posizionamento relativo esse non indicano un punto preciso, ma l’ammontare dello spostamento in senso orizzontale e verticale rispetto al box contenitore.

In pratica, con il posizionamento relativo (position: relative;), si va a modificare la posizione naturale di un elemento traslandola attraverso l’uso di top, left, bottom o right. Un elemento posizionato relativamente non è rimosso dal flusso della pagina, ma solo spostato.

La metafora più semplice per comprendere il

funzionamento è immaginare che sui quattro

lati di un elemento posizionato relativamente

ci siano quattro maniglie che si possono

tirare o spingere: un valore positivo equivale

a spingere, mentre un valore negativo

equivale a tirare l’elemento.

Per esempio, se viene specificato left: 30px

significa che l’elemento viene spinto da

sinistra di 30 pixel. Dichiarando invece top: -

20px è come se tirassimo l’elemento dal suo

lato superiore, con il conseguente effetto di

traslarlo verso l’alto di 20 pixel.

POSIZIONAMENTO RELATIVO

• Il posizionamento relativo altera il normale flusso dei box a livello di blocco

• Attraverso la dichiarazione ‘position:relative’ è possibile definire un off-set per il posizionamento del blocco all’interno del flusso

• L’off-set non altera il posizionamento dei blocchi che seguono e precedono nel flusso il blocco interessato

• L’off-set è assegnato tramite le proprietà: top, right, bottom, left.

PRIMA PARTE: IL VISUAL FORMATTING MODEL

p#pr {position:relative;left:10px;top:20px;}p { padding:5px;margin:5px; }

In pratica serve per spostare un po’ I blocchi (div) rispetto al normale flusso. Ma non si interrompe il flusso dei blocchi

Absolute L’elemento, o meglio, il box dell’elemento, viene

rimosso dal flusso del documento ed è

posizionato in base ai valori forniti con le proprietà

top, left, bottom o right.

un elemento assoluto trova il suo containing block.

Per quanto riguarda le proprietà top, left, bottom o

right, si potrebbe pensare che questi valori siano da

intendersi come delle coordinate. In realtà non è

proprio così, ed è più facile pensare i valori che

queste proprietà possono assumere come vere

distanze.

In pratica il box (div) absolute si stacca dal normale flusso dei box

POSIZIONAMENTO ASSOLUTO

• Attraverso la dichiarazione position:absolute è possibile posizionare il box in un punto esatto della pagina indipendentemente dal flusso

• Un blocco posizionato in modo assoluto è del tutto estratto dal flusso e non ha alcuna influenza sulla posizione degli altri blocchi

• La posizione è stabilita attraverso le proprietà: top, right, bottom, left a partire da un determinato punto di riferimento iniziale

• Il valore di top indica la distanza tra il limite superiore del blocco posizionato e il limite superiore del padding del box di riferimento; lo stesso vale per le altre proprietà right, bottom e left.

• Il box di riferimento è il primo blocco progenitore posizionato in modo non assoluto o relativo, oppure l’elemento <html>

PRIMA PARTE: IL VISUAL FORMATTING MODEL

POSIZIONAMENTO ASSOLUTO

• Un blocco posizionato in modo assoluto, se non si specifica un valore per la proprietà width, assume la dimensione necessaria a contenere gli elementi al suo interno

• Un box in linea posizionato in modo assoluto diviene un box a livello di blocco

<p>(1) …</p><p id="pa">(2) …</p><p>(3) …</p>

p#pa {position:absolute;right:5px; bottom:5px;margin:0;}p { margin:10px 10px; }

PRIMA PARTE: IL VISUAL FORMATTING MODEL

Position fixed

• Usando questo valore, il box dell’elemento viene sottratto al normale flusso del documento.

• con fixed il box contenitore è sempre la la finestra principale del browser.

Absolute VS relative

• Position fa SEMPRE riferimento al contenitore progenitore di un elemento e serve per spostare un box mantenendo la sua posizione nel flusso dei box

Absolute sposta un box a partire da un angolo preciso del primo progenitore non absolute, solitamente il primo relative.

Esempio di fixed