Per delimitare spazialmente o cromaticamente le colonne si può ricorre ai bordi
e al background-color. Per separarle grazie ai bordi, basterà aggiungere i
due bordi laterali alla colonna centrale. Ecco il codice da aggiungere:
div#content{
/* ... */
border-width: 0 1px;
border-style:solid;
border-color: #ccc;
}
Ecco quindi il layout a tre colonne con i
bordi.
Mentre per il colore le regole aggiuntive saranno:
div#container{background-color: #ccc}
div#content{ /*...*/ background-color: #fff}
Anche qui vediamo il risultato.
Lo svantaggio principale di queste due soluzioni è che impongono il limite
sulla lunghezza relativa delle colonne: infatti la colonna centrale dovrà essere
la più lunga. La soluzione è usare le immagini di background. Sarà l'argomento
della prossima lezione.
Scarica lo zip di questa lezione
3cf.zip