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