Layout a tre colonne con float e background

17 marzo 2006

Per dare l’idea che le due colonne laterali si estendono fino al footer indipendentemente dalla loro lunghezza rispetto alla colonna centrale, si possono usare le immagini di background: a colore pieno oppure bianche con bordo fine o sfumato, tutto sta alla creatività. Usare immagini di background richiede però l’aggiunta di un contenitore supplementare nel codice HTML, almeno in certi casi. Ecco il codice HTML base per questo tipo di layout:

<body>
  <div id=”container”>
    <div id=”container2″>
        <div id=”header”></div>
        <div id=”navigation”></div>
        <div id=”extra”></div>
        <div id=”content”></div>
        <div id=”footer”></div>
    </div>
  </div>
</body>

La questione è che è possibile assegnare una sola immagine di background ad un elemento: i due elementi a cui assegneremo l’immagine di background sono quindi container e container2. In realtà sotto certe condizioni l’uso di un container aggiuntivo è superfluo: una delle due immagini di background si potrebbe assegnare al body solo nel caso in cui la pagina si estende almeno per tutta la lunghezza della finestra e si usi un layout fluido a larghezza totale. La scelta dell’aggiunta di un contenitore supplementare, d’altra parte, consente maggiore possibilità di personalizzazione del layout attraverso l’uso del background: è infatti possibile usare layout semifluidi, fissi o elastici senza dover ritoccare il codice HTML. Ho preparato come esempio una versione fissa, che potrete riadattare a elastica, fluida o semifluida con poche modifiche del CSS. Rivediamo tutte le regole fondamentali del foglio di stile per questo layout:

/*stili per il layout fisso con background*/
html,body{margin: 0;padding:0}
body{font-family: arial,sans-serif;
font-size: 76%;
text-align:center
}

div#container{width:760px;
margin:0 auto;
border-width: 0 1px;
border-style:solid;
border-color: #ccc;
background: url(3rightcol.jpg) repeat-y top right
}

div#container2{background: url(3leftcol.jpg) repeat-y top left;
text-align: left
}

/*stili specifici per il layout*/
div#navigation{float: left;
width: 120px;
width:130px;
width:120px;
padding: 1em 0 0 10px
}

div#extra{float: right;
width: 190px;
width:200px;
width:190px;
padding: 1em 5px
}

div#content{margin: 0 200px 0 130px;
padding: 1em 10px
}
div#footer{clear:both;
text-align:center;
padding: 5px 0;
background-color: #69c;
color: #000
}

Vediamo il risultato anche nel caso in cui sia più lunga la colonna di sinistra o quella di destra.

Scarica l’esempio in formato zip di questa lezone

Tutte le lezioni

1 ... 27 28 29 ... 41

Se vuoi aggiornamenti su Layout a tre colonne con float e background inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Layout a tre colonne con float e background

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento dei dati per attività di marketing