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

Layout a tre colonne con immagine di background

Doppio container e sfondo
Doppio container e sfondo
Link copiato negli appunti

Come per la versione analoga con i float, anche in questo caso è consigliato
l'uso di un container aggiuntivo. Ecco quindi il codice HTML base:

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

Le regole CSS da aggiungere sono semplici:

div#container{position: relative;
background:url(3rightcol.jpg) repeat-y top right
}

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

Anche qui basta semplicemente scegliere il tipo di layout. Ho preparato la versione con layout
fisso
.

Scarica il file zip di esempio di questa lezione

Ti consigliamo anche