it | es | en

Layout CSS gratis 3 colonne centrato da scaricare

Homepage Informazioni Contatti



Scarica il layout
6kb [.zip]

Layout CSS 3 colonne centrato

Sicuramente il layout più diffuso in ambito di portali o siti istituzionali per chi desidera impaginare una grande quantità di contenuti e collegamenti.

Codice HTML

<div class="main">
<div class="header">
<img src="/minilogo.png" width="143" height="59" alt="iPort - Layout gratis per il tuo sito internet" />
</div>
<div class="content">
<div class="col1">Colonna 1</div>
<div class="col3">Colonna 3</div>
<div class="col2"><h1>Layout 3 colonne centrato</h1><p>Sicuramente il layout più diffuso in ambito di portali o siti istituzionali per chi desidera impaginare una grande quantità di contenuti e collegamenti.</p></div>
</div>
<div class="copy"><small>Design by <a href="//www.iport.it" title="Layout gratis per il tuo sito internet">iPort</a></small></p></div>
</div>

Codice CSS

body {background-color:#666;font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif}
.main { width:996px;margin:auto; background-color:#eee; overflow:hidden; color:#666; text-align:center; margin-top:20px; }
.content {overflow:hidden; padding-bottom:10px;}
.col1 {width:200px;float:left;margin-left:10px;margin-top:10px;}
.col2 {margin-left:220px; padding-top:40px;background-color:#fafafa;margin-right:220px;margin-top:10px;padding-bottom:20px;height:440px;}
.col3 {width:200px;float:right;margin-left:10px;margin-top:10px;}
.header {background-color:#fff;height:50px;overflow:hidden;text-align:left;}
h1 {margin:0px;line-height:32px;font-size:40px;width:70%;margin:auto;}
p {width:70%;margin:auto;margin-top:40px;font-size:24px;text-align:justify;}
.copy {text-align:right;border-top:1px solid #fff;padding-top:10px;padding-right:10px;clear:both;background-color:#666;color:#fff;height:64px;}
a {text-decoration:none;color:#ccc;}

Potrebbe interessare

Styler il CMS online

Crea e gestisci i tuoi layout CSS in ogni parte direttamente online in modo visuale. Vai

Templates gratis

Le migliori risorse sul web da dove scaricare o prendere spunto per il tuo template. Vai

Effetti jQuery gratis

Aggiungi un effetto jQuery alle tue pagine per renderle più interattive e accattivanti. Vai

Layouts

Esempi di layout CSS da scaricare gratuitamente

Risorse di Web Design