TIPI DI BOX Ci sono essenzialmente tre tipi di box: 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>
IL FLUSSO I diversi box sono inseriti nel così detto “flusso” PRIMA PARTE: IL VISUAL FORMATTING MODEL 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 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)
POSIZIONAMENTO ASSOLUTO 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>)
POSIZIONAMENTO RELATIVO 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. Si riferisce sempre al primo blocco progenitore
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 o tramite coordinate in px Si riferisce sempre e solo al blocco <html> ( è come se fosse un absolute riferito all’elemento HTML)
FORMATTARE LE LISTE DI LINK MENU SECONDA PARTE: FORMATTARE LE LISTE DI LINK MENU FORMATTARE LE LISTE DI LINK MENU Uno metodi migliori per realizzare un menu in XHTML è utilizzare liste di collegamenti: <ul> <li><a href="…">Collegamento 1</a></li> <li><a href="…">Collegamento 2</a></li> <li><a href="…">Collegamento 3</a></li> <li><a href="…">Collegamento 4</a></li> <li><a href="…">Collegamento 5</a></li> </ul> Tuttavia, il classico aspetto delle liste rende poco “attraente” un menu realizzato in questo modo
FORMATTARE LE LISTE DI LINK MENU SECONDA PARTE: FORMATTARE LE LISTE DI LINK MENU FORMATTARE LE LISTE DI LINK MENU Per ottenere un menu verticale dall’aspetto più accattivante a partire da una lista, come prima cosa dovremo letteralmente eliminare la formattazione “a lista” ul { margin:0; padding:0; } li { display:inline; }
FORMATTARE LE LISTE DI LINK MENU SECONDA PARTE: FORMATTARE LE LISTE DI LINK MENU FORMATTARE LE LISTE DI LINK MENU Quando si usano i CSS per gestire un menu di collegamenti è possibile sfruttare le pseudo-classi a:link, a:visited, a:hover, a:active per creare effetti roll-over senza utilizzare il javascript, con ovvi vantaggi Avendo eliminato le varie proprietà della lista, per fornire l’aspetto desiderato al menu dovremo agire direttamente sui tag <a> e le loro pseudo-classi
a:pseudoclasses a:link viene usato per elaborare lo stile di un link non ancora visitato a:active colore del link all’atto del click. a:visited colore del link dopo averlo visitato A:active dovrebbero venire dopo gli a:hover (se presente) nella definizione CSS in modo da essere efficace!
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 I box flottanti possono posizionarsi sulla destra o sulla sinistra di una ltro box attraverso la proprieta float.
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
BOX FLOTTANTI <p>(1) …</p> 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;
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 }
IL VISUAL FORMATTING MODEL: BOX FLOTTANTI 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:
BOX FLOTTANTI #content{ width: 960px; height:auto; overflow:auto; } 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;
BOX FLOTTANTI height:auto; overflow:auto; 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;