PCdaZERO.it - Guida facile per usare il computer

Acquista o scarica gratis, i libri di "PC da Zero"

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>


04-e-posizione-blocco (9K)
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>
...

04-f-posizione-due-blocchi (15K)
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; }

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

04-g-posizione-cinque-blocchi (41K)






Link sponsorizzati