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

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

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

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> ...

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

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







Link sponsorizzati