Floating div

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 ) 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; }

Asolute: stacco il div dal flusso verticale. Faccio riferimento al rpimo blocco relative per posizionarlo Fixed: stacco il div dal flusso verticale. Faccio riferimento al viewport per posizionarlo relative: NON stacco il div dal flusso verticale. Serve solo per dare uno spostamento al div nel normale flusso

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 #2 { float:left; width:200px; } #4 { 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 E’ come se li staccassi dal flusso verticale e questi ci «galeggiassero» sopra 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 #2 { float:left; width:200px; } #4 { clear: both } 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 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 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 PRIMA PARTE: IL VISUAL FORMATTING MODEL