Riprendendo Il tag 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 lheader 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 quellID nel css #menu { color: black; padding:10px; font-weight: bold; width:900px; Height:150px; background- image:urlimage.jpg; } contenuto del menu…

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:,,, box anonimi Box in linea:,,, box anonimi Elementi di lista: 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 allaltro in verticale, distanziandosi in base ai margini I box in linea (compresi i box anonimi) si dispongono orizzontalmente uno di seguito allaltro, 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 dallinterlinea ( 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; }

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 allinterno del flusso Loff-set non altera il posizionamento dei blocchi che seguono e precedono nel flusso il blocco interessato Loff-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; }

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 lelemento 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 (1) … (2) … (3) … 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 allinterno 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 (1) … (2) … (3) … (4) … (5) … (6) … 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 leffetto 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 laltezza del blocco contenitore PRIMA PARTE: IL VISUAL FORMATTING MODEL #column_left { float:left; width:200px; }

BOX FLOTTANTI se anche il blocco contenitore è flottante, allora i blocchi flottanti contenuti ne influenzano laltezza: #left { float:left; width:200px; } PRIMA PARTE: IL VISUAL FORMATTING MODEL

BOX FLOTTANTI se il blocco contenitore non è flottante, questo è lunico 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 loverflow (ovvero leccesso 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 PRIMA PARTE: IL VISUAL FORMATTING MODEL