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
#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>
...
<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 }
...
<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).