Riprendendo Il tag <div>
• il tag Div rappresenta un contenitore. Tutto quello che è incluso fra il
tag iniziale e quello di chiusura reagisce secondo gli stili o comandi
che gli sono stati associati.
• il tag DIV è utilizzato per racchiudere blocchi di tag, che possono
essere elenchi, il testo stesso, o perfino parti strutturali intere della
pagina come i menù, l'intestazione ed il contenuto.
• Proprio per questo motivo i tag DIV sono utilizzati con i CSS per la
costruzione del box model, ossia un sito strutturato utilizzando
soltanto i tag DIV ed escludendo le tabelle.
Quindi…
• Quindi il nostro minisito sarà in genere composto da:
• 1 DIV per la pagina, che conterrà:
• 1 DIV per il menu
• 1 DIV per l’header
• 1 DIV per i contenuti
• 1 DIV per il footer
Ognuno di questi blocchi, avra determinate caratteristiche descritte da
appositi selettori CSS. Ad esempio , potremo stabilire che il menu sia
scritto con Font 12 px e colore blu, mentre il testo del div per i contenuti
sia scritto in 11 px colore nero.
Tuttavia abbiamo 4 div differenti, ed un solo tag con rispettivo selettore
div. Come fare???
Selettore basato su ID
• Il selettore ID o identificatore, svolge praticamente la funzione di
etichetta di un contenitore;
• Assegnando un ID ad un DIV, basterà richiamare il nome del selettore
(ID) e con lui saranno richiamate, all'interno del contenitore, tutte le
proprietà/selettori associati a quell’ID nel css
#menu {
color: black;
padding:10px;
font-weight: bold;
width:900px;
Height:150px;
backgroundimage:url”image.jpg”;
}
<body>
<div id=“menu”>
contenuto del menu…
</div>
</body>
PRIMA PARTE: IL VISUAL FORMATTING MODEL
TIPI DI BOX
• Ci sono essenzialmente tre tipi di box:
1.i box a livello di blocco
2.i box in linea
3.gli elementi di lista
• Altri tipi di box sono scarsamente supportati
• Ogni elemento appartiene ad uno dei tre tipi di box:
• Box a livello di blocco: <p>, <h1>, <div>, box anonimi
• Box in linea: <em>, <a>, <span>, box anonimi
• Elementi di lista: <li>
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;
}
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; }
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; }
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
• Un box flottante è posizionato
all’interno del flusso in modo che i
contenuti dei box successivi si
dispongano attorno al box
• Un box flottante posiziona lungo il
lato sinistro ovvero lungo il lato
destro del box che lo contiene
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
• Attraverso la proprietà float è possibile assegnare verso
quale lato il box deve disporsi
La proprietà float può assumere tre valori: left, right,
none
• Un box flottante, se non si specifica un valore per la proprietà
width, assume la dimensione necessaria a contenere gli
elementi al suo interno
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
<p>(1) …</p>
<p id="fl">(2) …</p>
<p>(3) …</p>
<p id="fr">(4) …</p>
<p>(5) …</p>
<p>(6) …</p>
p#fl {
float:left;
width:200px;
}
p#fr {
float:right;
width:200px;
}
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
• I margini inferiore e superiore di un
box flottante non collassano
• Il box flottante è eliminato dal
normale flusso per cui non influenza
la disposizione degli altri box, ma
solo la disposizione dei contenuti
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
Per interrompere l’effetto della
proprietà float e ripristinare il
normale flusso si usa la proprietà
‘clear’, che può assumere i valori:
left, right, both, none
p#fl {
float:left;
width:200px;
}
p#cl { clear: left }
PRIMA PARTE: IL VISUAL FORMATTING MODEL
IL VISUAL FORMATTING MODEL: BOX FLOTTANTI
• Come detto in precedenza, i box flottanti
non influenzano il normale flusso dei
blocchi
• Un box flottante contenuto in un blocco
non dovrebbe dunque condizionare in
nessun modo l’altezza del blocco
contenitore
#column_left {
float:left; width:200px;
}
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
se anche il blocco contenitore è
flottante, allora i blocchi flottanti
contenuti ne influenzano l’altezza:
#left {
float:left; width:200px;
}
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
se il blocco contenitore non è
flottante, questo è l’unico caso in cui
esso non assume le dimensioni
massime del suo contenuto.
In questo caso si utilizza del codice
differente:
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
#content{
width: 960px;
height:auto;
overflow:auto;
}
#left {
width: 209px;
height: 500px;
float: left;
border-right: 1px solid #D3D3D3;
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
In particolare si assegna al box contenitore una altezza
automatica e l’overflow (ovvero l’eccesso della
dimensione) auotmatico.
In questo modo il div contenitore crescera in automatico.
height:auto;
overflow:auto;
PRIMA PARTE: IL VISUAL FORMATTING MODEL
BOX FLOTTANTI
ALTRI DIFETTI DI INTERNET EXPLORER PER WINDOWS
• Internet Explorer per Windows presenta altri difetti relativi ai box
flottanti
• In alcuni casi questi difetti possono essere corretti attraverso
delle regole da specificare solo* per Internet Explorer
* Come specificare delle regole particolari per Internet Explorer/Windows sarà illustrato nella seconda
parte del seminario
Scarica
