Warning: Undefined array key "tbm_guide_level" in /data/websites/htmlit/web/app/themes/htmlit/src/ViewModel/Post/Templates/SingleGuide.php on line 113

Warning: Trying to access array offset on value of type null in /data/websites/htmlit/web/app/themes/htmlit/src/ViewModel/Post/Templates/SingleGuide.php on line 113

Warning: Undefined array key "tbm_guide_level" in /data/websites/htmlit/web/app/themes/htmlit/src/ViewModel/Post/Templates/SingleGuide.php on line 113

Warning: Trying to access array offset on value of type null in /data/websites/htmlit/web/app/themes/htmlit/src/ViewModel/Post/Templates/SingleGuide.php on line 113

Warning: Undefined array key "tbm_guide_level" in /data/websites/htmlit/web/app/themes/htmlit/src/ViewModel/Post/Templates/SingleGuide.php on line 113

Warning: Trying to access array offset on value of type null in /data/websites/htmlit/web/app/themes/htmlit/src/ViewModel/Post/Templates/SingleGuide.php on line 113

Warning: Undefined array key "tbm_guide_level" in /data/websites/htmlit/web/app/themes/htmlit/src/ViewModel/Post/Templates/SingleGuide.php on line 113

Warning: Trying to access array offset on value of type null in /data/websites/htmlit/web/app/themes/htmlit/src/ViewModel/Post/Templates/SingleGuide.php on line 113
Layout a tre colonne con immagine di background | HTML.it
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