TAG <div> e CSS
Ricalcare la grgilia di impaginazione
PRIMA PARTE: XHTML
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: IL VISUAL FORMATTING MODEL
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)
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: relative
L’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.
PRIMA PARTE: IL VISUAL FORMATTING MODEL
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.
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
PRIMA PARTE: IL VISUAL FORMATTING MODEL
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; }
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