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.

Presentazione sul tema: "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."— Transcript della presentazione:

1 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.

2 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???

3 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; background- image:url”image.jpg”; } contenuto del menu…

4 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

5 IL FLUSSO I diversi box sono inseriti nel così detto “flusso” I box a livello di blocco 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

6 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 PRIMA PARTE: IL VISUAL FORMATTING MODEL

7

8 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. Si riferisce sempre al primo blocco progenitore dichiarato come absolute PRIMA PARTE: IL VISUAL FORMATTING MODEL

9 POSIZIONAMENTO FIXED Il posizionamento fixed altera il normale flusso dei box a livello di blocco Attraverso la dichiarazione ‘ position:fixed ’ è possibile fissare un blocco sempre nella stessa posizione rispetto alla finestra L’off-set è assegnato tramite le proprietà: top, right, bottom, left. Si riferisce sempre al blocco

10 BOX FLOTTANTI Un box flottante è posizionato all’interno del flusso in modo che i contenuti dei box successivi si dispongano attorno al box I box flottanti possono posizionarsi sulla destra o sulla sinistra di una ltro box attraverso la proprieta float. PRIMA PARTE: IL VISUAL FORMATTING MODEL

11 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

12 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

13 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

14 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

15 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 PRIMA PARTE: IL VISUAL FORMATTING MODEL #column_left { float:left; width:200px; }

16 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

17 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

18 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

19 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