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).
Ti potrebbe interessare anche...
Fare calcoli e creare elenchi con
- Come creare un blog gratis
- Come creare siti web gratis
- Gestisci le tue foto con Picasa
- Naviga veloce con Google Chrome
- Scarica video e musica con Free Studio
Frasi celebri
“Se non lo sai spiegare in modo semplice, non l'hai capito abbastanza bene” (Albert Einstein).