CREARE SITI WEB in HTML e CSS - Impostare BORDO e MARGINE sulle colonne
Prosegui ora l'esempio della lezione precedente, evidenziando meglio le colonne.
Aggiungi bordo e margine alle tre zone/blocchi centrali.
#zona2 { width: 150px; float: left; border: 5px solid; margin: 5px;}
#zona3 { width: 400px; float: left; border: 5px solid; margin: 5px;}
#zona4 { width: 150px; float: left; border: 5px solid; margin: 5px;}
#zona3 { width: 400px; float: left; border: 5px solid; margin: 5px;}
#zona4 { width: 150px; float: left; border: 5px solid; margin: 5px;}
Ottieni lo stesso risultato con il seguente codice:
#zona2 { width: 150px; float: left; }
#zona3 { width: 400px; float: left; }
#zona4 { width: 150px; float: left; }
#zona2, #zona3, #zona4 { border: 5px solid; margin: 5px;}
#zona3 { width: 400px; float: left; }
#zona4 { width: 150px; float: left; }
#zona2, #zona3, #zona4 { border: 5px solid; margin: 5px;}
Oppure puoi usare questo codice, facendo uso di una classe:
#zona2 { width: 150px; float:}
#zona3 { width: 400px; float:}
#zona4 { width: 150px; float:}
.cornice-col { border: 5px solid; margin: 5px;}
#zona3 { width: 400px; float:}
#zona4 { width: 150px; float:}
.cornice-col { border: 5px solid; margin: 5px;}
e assegnandola ai blocchi DIV:
<div id="zona2" class="cornice-col">Zona numero due</div>
<div id="zona3" class="cornice-col">Zona numero tre - In questa zona ...</div>
<div id="zona4" class="cornice-col">Zona numero quattro</div> ...
<div id="zona3" class="cornice-col">Zona numero tre - In questa zona ...</div>
<div id="zona4" class="cornice-col">Zona numero quattro</div> ...
Visualizza ora il risultato della pagina web via browser.
Noterai uno sfasamento delle colonne rispetto all'intestazione e al piè di pagina.
Per ovviare a questo dovrai diminuire la larghezza delle colonne fino ad allinearle all'intestazione e al piè di pagina.
- Riduci il valore della proprietà width per la zona 1 e la zona 3 a 140 pixel:
#zona2 { width: 140px; float:}
#zona3 { width: 400px; float:}
#zona4 { width: 140px; float:}
.cornice-col { border: 5px solid; margin: 5px;}
#zona3 { width: 400px; float:}
#zona4 { width: 140px; float:}
.cornice-col { border: 5px solid; margin: 5px;}
Visualizzando la pagina con Internet Explorer le colonne si allineano perfettamente.
Aprendola invece con Firefox, Chrome e Opera, l'ultima colonna sporge oltre l'intestazione.
- Per Firefox, Chrome e Opera il risultato ottimale si raggiunge impostanto la larghezza delle colonne della zona2 e zona 4 a 130 pixel:
#zona2 { width: 130px; float:}
#zona3 { width: 400px; float:}
#zona4 { width: 130px; float:}
.cornice-col { border: 5px solid; margin: 5px;}
#zona3 { width: 400px; float:}
#zona4 { width: 130px; float:}
.cornice-col { border: 5px solid; margin: 5px;}
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).