Riprendendo Il tag <div>

Riprendendo Il tag <div> • il tagDivrappresenta 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; • background- image: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: • i box a livello di blocco • i box in linea • 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 p { border:1px solid #00C; } em{ margin:2em;border:1px solid #C00 } strong { border:1px solid #0C0; padding:0.7em; } • 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 POSIZIONAMENTO RELATIVO p#pr { position:relative; left:10px;top:20px; } p { padding:5px;margin:5px; } • 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-setnon 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 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 disporsiLa 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 #column_left{ float:left; width:200px; } • 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 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

Riprendendo Il tag <div>