PROGRAMMIAMO
HTML - Float
Posizionamento "naturale" dei blocchi su una pagina

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:

<div id="blocco1" style="background-color:LightYellow">blocco 1 inserito nel normale flusso </div>
<div id="blocco2" style="background-color:LightCyan">blocco 2 inserito subito dopo l'istruzione per il blocco 1</div>
<div id="blocco3" style="background-color:MistyRose">blocco 3 inserito subito dopo l'istruzione per il blocco 2</div>

si ottiene la seguente visualizzazione:

blocco 1 inserito nel normale flusso
blocco 2 inserito subito dopo l'istruzione per il blocco 1
blocco 3 inserito subito dopo l'istruzione per il blocco 2

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.

Float

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.

<div id="blocco1" style="background-color:LightYellow; width:150px; border-style:dashed; border-color: yellow">blocco 1 inserito nel normale flusso </div>
<div id="blocco2" style="background-color:LightCyan; width:150px; border-style:dashed; border-color: blue">blocco 2 inserito subito dopo l'istruzione per il blocco 1</div>
<div id="blocco3" style="background-color:MistyRose; width:300px; border-style:dashed; border-color: red">blocco 3 inserito subito dopo l'istruzione per il blocco 2</div> 

L'effetto è il seguente:

blocco 1 inserito nel normale flusso
blocco 2 inserito subito dopo l'istruzione per il blocco 1
blocco 3 inserito subito dopo l'istruzione per il blocco 2

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:

<div id="blocco2" style="background-color:LightCyan; width:150px; border-style:dashed; border-color: blue; float: left">blocco 2 inserito subito dopo l'istruzione per il blocco 1</div>

Il risultato che si ottiene è questo:

blocco 1 inserito nel normale flusso
blocco 2 inserito subito dopo l'istruzione per il blocco 1
blocco 3 inserito subito dopo l'istruzione per il blocco 2
 

 

Osserviamo con attenzione che cosa è successo:

L'effetto di avvolgimento risulta più evidente se modifichiamo le dimensioni del blocco 2 aumentandole a 200px:

blocco 1 inserito nel normale flusso
blocco 2 inserito subito dopo l'istruzione per il blocco 1
blocco 3 inserito subito dopo l'istruzione per il blocco 2
 

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.

 

Un semplice layout a tre colonne usando la proprietà float

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:

<div id="container" style="width:600px;border-style:dotted; border-color: grey">
<div id="blocco1" style="background-color:LightYellow; width:150px; border-style:dashed; border-color: yellow">blocco 1 inserito nel normale flusso </div>
<div id="blocco2" style="background-color:LightCyan; width:150px; border-style:dashed; border-color: blue">blocco 2 inserito subito dopo l'istruzione per il blocco 1</div>
<div id="blocco3" style="background-color:MistyRose; width:300px; border-style:dashed; border-color: red">blocco 3 inserito subito dopo l'istruzione per il blocco 2</div> 
</div>

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:

blocco 1 inserito nel normale flusso
blocco 2 inserito subito dopo l'istruzione per il blocco 1
blocco 3 inserito subito dopo l'istruzione per il blocco 2
 

Inoltre occorre che i tre blocchi interni abbiano tutti e tre la stessa altezza. Possiamo facilmente ottenere questo risultato così:

<div id="container" style="width:600px; border-style:dotted; border-color: grey">
<div id="blocco1" style="background-color:LightYellow; width:150px; height:200px; border-style:dashed; border-color: yellow">blocco 1 inserito nel normale flusso </div>
<div id="blocco2" style="background-color:LightCyan; width:150px; height:200px; border-style:dashed; border-color: blue">blocco 2 inserito subito dopo l'istruzione per il blocco 1</div>
<div id="blocco3" style="background-color:MistyRose; width:300px; height:200px; border-style:dashed; border-color: red">blocco 3 inserito subito dopo l'istruzione per il blocco 2</div> 
</div>

A questo punto applichiamo la proprietà float:left al blocco 1 e la proprietà float:right al blocco 2:

<div id="container" style="width:600px; border-style:dotted; border-color: grey">
<div id="blocco1" style="background-color:LightYellow; width:150px; height:200px; border-style:dashed; border-color: yellow; float:left">blocco 1 inserito nel normale flusso </div>
<div id="blocco2" style="background-color:LightCyan; width:150px; height:200px; border-style:dashed; border-color: blue; float: right">blocco 2 inserito subito dopo l'istruzione per il blocco 1</div>
<div id="blocco3" style="background-color:MistyRose; width:300px; height:200px; border-style:dashed; border-color: red">blocco 3 inserito subito dopo l'istruzione per il blocco 2</div> 
</div>

e otteniamo questo effetto:

blocco 1 inserito nel normale flusso
blocco 2 inserito subito dopo l'istruzione per il blocco 1
blocco 3 inserito subito dopo l'istruzione per il blocco 2
 

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:

<div id="blocco3" style="background-color:MistyRose; width:300px; height:200px; border-style:dashed; border-color: red; margin:auto">blocco 3 inserito subito dopo l'istruzione per il blocco 2</div> 

Ottenendo infine questo risultato:

blocco 1 inserito nel normale flusso
blocco 2 inserito subito dopo l'istruzione per il blocco 1
blocco 3 inserito subito dopo l'istruzione per il blocco 2
 

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.

 

Clear

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

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it