Sappiamo che ogni elemento di blocco (come <p>, <div> etc.) viene visualizzato sulla pagina separatamente dagli altri blocchi. Se ci sono elementi di blocco successivi, questi vengono semplicemente visualizzati uno sotto l'altro (seguendo il flusso "naturale" di visualizzazione della pagina). Per esempio dichiarando tre blocchi in questo modo:
si ottiene la seguente visualizzazione:
Si noti che non vi sono bordi (per default i blocchi non ne hanno), che non c'è separazione fra un blocco e l'altro (a meno di non definire uno stile margin i blocchi sono "a contatto" fra loro) e ogni blocco viene visualizzato semplicemente sotto a quello precedente.
Chiaramente in questo modo non è possibile definire layout di pagina complessi. Per fortuna gli stili offrono gli strumenti per posizionare liberamente i blocchi su una pagina.
Uno dei modi più semplici ed efficaci per posizionare i blocchi su una pagina è usare la proprietà float. La prima regola essenziale da seguire per poter utilizzare questo metodo è che ogni elemento a cui viene applicata deve avere una larghezza width specificata. Vedremo più avanti il perché. Per adesso, sempre con riferimento all'esempio dei tre blocchi precedenti, attribuiamo una larghezza ai tre blocchi e, già che ci siamo, mettiamo anche un bordo in modo da poterli distinguere chiaramente.
L'effetto è il seguente:
Ora applichiamo la proprietà float. Essa può assumere due valori: left oppure right. In pratica con float: left l'elemento viene spostato sul lato sinistro del blocco che lo contiene (l'intera finestra del browser se non c'è nessun contenitore). In pratica il blocco si muove verso sinistra finché i suoi bordi toccano quelli del blocco contenitore esterno.
Vediamo cosa succede in pratica applicando la proprietà float:left al blocco 2 nel nostro esempio, in questo modo:
Il risultato che si ottiene è questo:
Osserviamo con attenzione che cosa è successo:
L'effetto di avvolgimento risulta più evidente se modifichiamo le dimensioni del blocco 2 aumentandole a 200px:
In pratica la regola è che:
Il motivo per cui i blocchi a cui applichiamo la proprietà float devono avere una dimensione width indicata è che, altrimenti, il browser non saprebbe dove terminano (se occupassero l'intera finestra in orizzontale non avrebbe alcun senso spostarli a sinistra o a destra).
ATTENZIONE:
Per ottenere un posizionamento ordinato e funzionale dei box su una pagina, la regola principale da seguire sempre e comunque è: applicare il posizionamento float a tutti i box, anche a quelli che non devono affiancarsi a nessun altro (per esempio è possibile posizionare questi box con float:left in ogni caso). Questo semplice accorgimento assicura una corretta disposizione dei box nella pagina.
Posizionare con i fogli stile è un'arte che si apprende solo con molti tentativi ed errori e non basterebbe un intero libro a spiegarne tutti i dettagli.
Limitiamoci qui, come semplice esempio di applicazione della proprietà float, a vedere come si potrebbe realizzare un layout di pagina suddiviso su tre colonne, corrispondenti ai tre blocchi dei nostri esempi precedenti. Un esempio del genere è abbastanza realistico, poiché in molti casi le pagine sono suddivise in tre colonne, delle quali la centrale contiene il testo e le laterali servono per i menu di navigazione o per altri scopi accessori.
La prima cosa da fare per potere ottenere questo risultato è usare un blocco esterno contenitore che racchiuda tutti e tre i nostri blocchi. Abbiamo detto che in assenza di un contenitore esterno, tale ruolo viene assunto dal body della pagina html. Tuttavia, per poter realizzare il nostro semplice layout, noi abbiamo bisogno di un contenitore di larghezza uguale o maggiore alla somma delle larghezze delle nostre tre colonne. Possiamo facilmente ottenerlo aggiungendo un blocco esterno contenitore come nell'esempio qui sotto:
Si noti che le dimensioni width:600px del contenitore esterno sono state ottenute sommando le width dei tre blocchi interni (come si è detto tale dimensione potrebbe anche essere maggiore della somma e in ogni caso deve tener conto anche degli eventuali padding e margin presenti fra i blocchi - in questo nostro semplice esempio non ce ne sono)
L'effetto è il seguente:
Inoltre occorre che i tre blocchi interni abbiano tutti e tre la stessa altezza. Possiamo facilmente ottenere questo risultato così:
A questo punto applichiamo la proprietà float:left al blocco 1 e la proprietà float:right al blocco 2:
e otteniamo questo effetto:
Osserviamo che il blocco 3 sembra essere più piccolo delle sue dimensioni dichiarate (300px). La ragione è che il blocco 3 risulta in realtà parzialmente sovrapposto al blocco1 (in realtà si avvolge attorno al blocco 1, come visto precedentemente).
Per fare in modo che il blocco 3 si disponga al centro dobbiamo impostarne la proprietà margin al valore auto, in questo modo:
Ottenendo infine questo risultato:
Occorre osservare che questo metodo funziona correttamente poiché le due colonne laterali hanno le stesse dimensioni. Infatti margin:auto ha l'effetto di centrare il blocco 3 rispetto al contenitore più esterno e in tale modo lo mette esattamente in mezzo alle due colonne laterali.
La presenza di elementi float, come si è visto, modifica la disposizione degli altri elementi presenti nella pagina, in particolare di quelli che li seguono. Vi sono dei casi in cui si desidera disporre un elemento senza che questo subisca l'effetto della proprietà float applicata all'elemento precedente. In questo caso si usa la proprietà clear che può avere tre valori (left, right, both) a seconda che si voglia azzerare tale effetto (sul lato sinistro, su quello destro o su entrambi).
Video Lezione: Creare il layout di pagina con gli stili CSS
Sito realizzato in base al template offerto da
http://www.graphixmania.it