Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 27 di 41
  • livello principiante
Indice lezioni

Layout a tre colonne con float: separare le colonne

Usare colori o bordi per suddividere le sezioni della pagina
Usare colori o bordi per suddividere le sezioni della pagina
Link copiato negli appunti

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


Ti consigliamo anche