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    >     Creare tre colonne con WIDTH e FLOAT





Nella lezione precedente hai creato una intestazione e un piè di pagina !
Crea ora tre colonne per la zona centrale usando dei relativi identificatori:

#zona2
#zona3
#zona4

Per ottenere un aspetto gradevole, le tre colonne dovranno avere una larghezza totale di 700 pixel (pari all'intestazione e al piè di pagina):

...
<style type="text/css">
#zona2 { width: 150px }
#zona3 { width: 400px }
#zona4 { width: 150px }
...
<body>
...
<div id="zona2">Zona numero due</div>
<div id="zona3">Zona numero tre</div>
<div id="zona4">Zona numero quattro</div>
...


Le tre colonne sono una sopra l'altra. Aggiungi la proprietà "float: left" per affiancarle.

...
<style type="text/css">
#zona2 { width: 150px; float: left }
#zona3 { width: 400px; float: left }
#zona4 { width: 150px; float: left }
...

Le zone vengono affiancate da sinistra a destra, ma sorge un problema quando la pagina viene visualizzata con il browser "Mozilla Firefox" o "Chrome":
il blocco successivo (la zona 5) si sovrappone alle tre colonne !
Devi sapere infatti che i diversi browser visualizzano le pagine in modo diverso; a volte con lievi differenze ma molto spesso con enormi disparità (se non ben progettate).







Link sponsorizzati