CSS / FLOATING e POSITIONING. LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 1

Transcript

1 CSS / FLOATING e POSITIONING LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 1

2 CSS / TAG <DIV> E CSS Ricalcare la griglia d impaginazione grazie ai tag DIV e al CSS LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 2

3 CSS / FLOATING ELEMENTS + POSITIONING Come cambiare il flusso verticale dei DIV? Per esempio per avere due elementi di tipo blocco affiancati? E per mantenere fissi degli elementi nella finestra del mio browser? LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 3

4 DISPLAY BLOCK / INLINE Abbiamo visto che un primo modo per interrompere il flusso verticale degli elementi blocco è quello di modificare il loro comportamento da display:block; a display:inline; (oppure display:inline-block;) display:block; display:inline; LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 4

5 FLOATING ELEMENTS Un elemento 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 un altro box attraverso la proprietà float. La proprietà float può assumere tre valori: none (default), left, right. flusso normale / float:none; float: left; float: right; LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 5

6 FLOATING ELEMENTS Un box flottante, se non si specifica un valore per la proprietà width, assume la dimensione necessaria a contenere gli elementi al suo interno. 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. LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 6

7 CLEAR FLOATING Per interrompere l effetto della proprietà float e ripristinare il normale flusso si usa la proprietà clear. La proprietà clear specifica su quale lato di un elemento non sono permessi elementi floattanti. float: left; Può assumere i valori: left, sinistra right, destra both, entrambi none, nessuno. clear: left; LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 7

8 FLOATING ELEMENTS CONTENUTI IN ALTRI ELEMENTI Se anche il blocco contenitore è flottante, allora i blocchi flottanti contenuti ne influenzano l altezza. div1 { background:red; float:left; div2 { background:yellow; width:300px; float:left; div3 { background:lime; LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 8

9 HEIGHT: AUTO - OVERFLOW: AUTO Questo è l unico caso in cui un box non cresce al crescere del suo contenuto. Se il blocco contenitore non è flottante, questo non assume le dimensioni massime del suo contenuto. Per farlo si assegna al box contenitore un altezza automatica e un overflow automatico. In questo modo il div contenitore crescera in automatico. div1 { background:red; height:auto; overflow:auto; div2 { background:yellow; width:300px; float:left; div3 { background:lime; LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 9

10 POSITION Oltre al floating è importante dare dei riferimenti per capire come spostare un blocco. Ad esempio, se volessi spostare un blocco di 10 px sulla sinistra,lo faccio rispetto a quale progenitore? La proprietà position è la fondamentale per la gestione della posizione degli elementi: determina la modalità di presentazione di un elemento sulla pagina. Si applica a tutti gli elementi e non è ereditata. LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 10

11 POSITION Spesso è usata in combinazione con altre proprietà e può assumere i seguenti valori: static Valore di default. Gli oggetti static non si posizionano in modi particolari, ma seguono il normale flusso verticale decritto nel codice HTML relative utilizzando le proprietà top, right, bottom e left è possibile aggiustare il posizionamento di un oggetto rispetto al suo progenitore. In altre parole l elemento viene posizionato relativamente al suo box contenitore. absolute Gli elementi sono posizionati in relazione al primo elemento progenitore che non è posizionato staticamente (quindi solitamente rispetto al primo progenitore relative oppure alla radice della pagina è cioè al tag html)»» fixed L elemento è posizionato in relazione alla finestra del browser (in gergo il viewport ). LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 11

12 POSITION: RELATIVE Di base, un elemento posizionato con relative si comporta allo stesso modo di static a meno che si aggiungano alcune proprietà extra di posizionamento. Impostare le proprietà top, right, bottom, e left di un elemento posizionato relativamente farà sì che esso risulti spostato dalla sua normale posizione. Il posizionamento dei blocchi che seguono e precedono nel flusso il blocco interessato non viene modificato (gli altri contenuti non si andranno ad occupare gli spazi lasciati liberi dall elemento spostato relativamente). I valori assunti da top, right, bottom, e left possono essere espressi: Tramite le unità di misura px (sono ammessi valori negativi) In percentuali rispetto alle dimensioni del box contenitore (sono ammessi valori negativi) Tramite il valore auto (default) LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 12

13 POSITION: RELATIVE LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 13

14 POSITION: ABSOLUTE Un elemento posizionato con absolute viene rimosso dal flusso del documento ed è posizionato in base ai valori forniti con le proprietà top, right, bottom, e left. È possibile quindi posizionarlo in un punto esatto della pagina indipendentemente dal flusso e non ha alcuna influenza sulla posizione degli altri blocchi. La posizione è stabilita attraverso le proprietà: top, right, bottom, e left a partire dall area del padding-box del blocco progenitore non posizionato in modo statico (quindi rispetto al primo progenitore relativeoppure l elemento html). Per esempio div { position: absolute; top: 50%; LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 14

15 POSITION: ABSOLUTE LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 15

16 POSITION: FIXED Un elemento posizionato con fixed viene rimosso dal flusso del documento ed è posizionato relativamente all area visualizzata della finestra (viewport) in base ai valori forniti con le proprietà top, right, bottom, e left: questo significa che l elemento rimarrà sempre nello stesso posto anche quando la pagina viene scorsa. Per esempio div { position: fixed; bottom: 0; right: 20px; LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 16

17 POSITION: FIXED LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 17

18 POSITION N.B. position / top / bottom / left / right sono proprietà indipendenti e possono essere usate con tutti i tipi di positioning, ovviamente in base al positioning presente, funzioneranno in modo diverso. div { position: relative; top: 20px; left: -30px; div { position: fixed; bottom: 0px; right: 10px; div { position: absolute; top: 50%; left: 50%; height: 400px; width: 600px; margin-top: -200px; margin-left: -300px; come si comporterà questo div? LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 18

19 PER APPROFONDIRE http: /blog.teamtreehouse.com/css-positioning https: / LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 19

20 Z-INDEX La proprietà z-index stabilisce l ordine di elementi sovrapposti. La proprietà z-index funziona solo con elementi posizionati (position:absolute, position:relative, oppure position:fixed). I valori ammessi sono: auto valore di default, prende il valore del progenitore numero sono ammessi valori positivi e negativi, si usa senza unità di misura visto che indica semplicemente l ordine div { position: relative; top: 20px; left: -30px; z-index: 20; div { position: fixed; bottom: 0px; right: 10px; z-index: -10; LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 20

21 POSITION, SINOTTICA. LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 21

22 DOMANDE? LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 22