CREARE SITI WEB in HTML e CSS > Come posizionare un BLOCCO
I blocchi si dispongono in successione, uno sotto l'altro.
Precedentemente hai visto come con la proprietà float è possibile disporre i blocchi uno di fianco all'altro.
Per un controllo più mirato dei blocchi, devi usare la proprietà
position
che dovrà essere associata alle proprietà:
top, right, bottom e left
per stabilire l'esatta posizione rispetto al blocco che lo contiene (absolute) o rispetto al blocco che lo precede (relative).
Progettare la posizione dei blocchi è particolarmente difficile.
La diversa interpretazione dei browser ne complica ulteriormente lo studio.
Tuttavia sono fondamentali per la formazione della struttura del sito;
praticamente vengono usati come finestre vuote dove inserire i contenuti della pagina.
Un'ottima soluzione per risolvere il problema è quella di usare una struttura (o layout) già progettata. Vedi capitolo "Scegliere un layout per il sito".
Oppure puoi scegliere una struttura personalizzata; scelta che andrà tutta a benificio all'originalità del sito.
Vediamo un esempio.
| codice CSS | descrizione |
| #blocco1 { background: red ;} | lo sfondo del blocco 1 è di colore rosso |
| #blocco1 {width:200px; height:200px ;} | le dimensioni del blocco 1 sono 200 pixel di larghezza per 200 pixel di altezza. |
| #blocco1 { position: absolute ;} | la posizione del blocco 1 è assoluta rispetto al contenitore |
| #blocco1 { top: 10px; left:10px ;} | l'angolo in alto a sinistra del blocco 1, è posizionato ad una distanza di 10 pixel dal lato superiore e 10 pixel dal lato sinistro |
| codice HTML | descrizione |
|
<div id="blocco1"> <p>blocco numero 1<br /> .... </p> </div> |
Inserimento del blocco 1 tra i tag <body> |
Analogamente crea il blocco 2 con le seguenti caratteristiche:
...
#blocco2 { background: green ; }
#blocco2 { width:200px; height:200px ;}
#blocco2 { position: absolute ;}
#blocco2 { top: 10px; left:220px ; }
...
<div id="blocco2">
<p>blocco numero 2<br /> ....
</p>
</div>
...
#blocco2 { background: green ; }
#blocco2 { width:200px; height:200px ;}
#blocco2 { position: absolute ;}
#blocco2 { top: 10px; left:220px ; }
...
<div id="blocco2">
<p>blocco numero 2<br /> ....
</p>
</div>
...
Procedi a creare i blocchi 3, 4 e 5.
Dichiara nel Foglio Stile le seguenti proprietà:
#blocco3 { background: blue; }
#blocco4 { background: pink; }
#blocco5 { background: yellow; }
#blocco3, #blocco4, #blocco5 { width:200px; height:200px; }
#blocco3, #blocco4, #blocco5 { position: absolute; }
#blocco4 { background: pink; }
#blocco5 { background: yellow; }
#blocco3, #blocco4, #blocco5 { width:200px; height:200px; }
#blocco3, #blocco4, #blocco5 { position: absolute; }
Per posizionare il blocco numero 3 a destra del blocco numero 2,
– imposta il valore della proprietà top a 10 px,
– e imposta il valore della proprietà left a 430 px
#blocco3 { top: 10px; left:430px ; }
Per posizionare il blocco numero 4 sotto il blocco numero 1,
– imposta il valore della proprietà top a 220 px,
– e imposta il valore della proprietà left a 10 px
#blocco4 { top: 220px; left:10px; }
Per posizionare il blocco numero 5 sotto il blocco numero 2,
– imposta il valore della proprietà top a 220 px,
– e imposta il valore della proprietà left a 220 px
#blocco5 { top: 220px; left:220px; }
