Layout gratis a 3 colonne fluido

Introduzione

Il layout fluido a 3 colonne è sicuramente il tipo più utilizzato in rete, perchè si presta meglio ad ordinare i contenuti presenti nella pagina. In questo esempio gratuitamente scaricabile i contenuti vengono completamente divisi dall'impostazione grafica gestita completamente dai fogli di stile CSS.

La particolarità di questo esempio è la completa assenza di errori o warning in merito alle validazioni per i linguaggi HTML e CSS, e rispettando tutte le linee guida per l'accessibilit, diventando così idoneo anche come template per la Pubblica Amministrazione.

La fluidità del layout è sia orizzontale, legata alla grandezza dello schermo, sia verticale, legata alla quantità di contenuti.

Personalizzazione

Il layout è facilmente personalizzabile nei colori, e per rendere la personalizzazione del layout più semplice abbiamo suddiviso e commentato le classi che costituiscono il foglio di stile.

Questo vi permetterà quindi rapidamente di cambiare le tonalità impostate con bianco, 2 tonalità di grigio, e l'arancione.

Oltre alla formattazione dei colori è possibile cambiare le grandezze dei caratteri, delle colonne, o dei menù verticali o orizzontali.

Guardate nella sezione lo stile, nella parte scorrevole, noterete che tutte le classi iniziano con lyt001 per poi aggiungere il nome di riferiremento, esempio lyt001logo sarà la classe che gestisce il blocco dove compare il logo che potete ovviamente sostituire.

Lo stile

Il layout essendo completamente costruito con DIV vengono utilizzati i fogli di stile CSS non solo per formattare i testi, ma anche per posizionare e formattare i blocchi. Qui di seguito è riportato il foglio di stile che trovere nel file zippato da scaricare gratuitamente, con cui gestirete le vostre pagine con questo layout.

/* Layout 001 iport.it */

body { 
font-size: 0.9em; 
font-family: arial, helvetica, sans; 
background: #ddd; }

/* PRIMA RIGA */

.lyt001top{
height:150px;
border-bottom:1px solid #fff;
background:#fff;
clear:both;}
.lyt001top1{
margin:auto;
height:100%;}

.lyt001logo{
width:200px;
height:150px;
float:left;
background-image:url(/lyt001logo.png);
background-repeat:no-repeat;
background-position:center center;}

.lyt001head{
margin-left:200px;
height:150px;}

.lyt001lang{
height:24px;
line-height:24px;
text-align:right;
font-size:0.9em;
color:#666;
border-bottom:1px solid #eee;
padding-right:20px;}

.lyt001slogan{
height:90px;
line-height:90px;}

.lyt001nav{
height:28px;
margin-top:7px;
font-size:0.9em;}

/* PSEUDOCLASSI PRIMA RIGA */

.lyt001top h2 { 
margin: 0px; 
line-height: 90px; 
font-weight: 100; 
letter-spacing: -1px; 
font-size: 1.4em; 
color: #999; }
.lyt001nav ul { 
list-style-type: none; 
margin: 0px; 
padding: 0px; }
.lyt001nav li { 
float: left; 
width: 112px; 
margin-left: 1px; 
line-height: 28px; 
text-align: center; 
border: 1px solid #eee; 
border-bottom: 0px; 
text-transform: uppercase; 
letter-spacing: 1px; 
font-size: 0.9em; 
color: #666; }

.lyt001nav li b { 
display: block; 
width: 100%; 
background: #eee; 
color: #000;}

.lyt001nav li a { 
display: block; 
width: 100%; 
text-decoration: none; 
color: #666;}

.lyt001nav li a:hover { 
background: #f60; 
color: #fff;}
.lyt001top1{
margin:auto;
height:100%;}

.lyt001logo{
width:200px;
height:150px;
float:left;
background-image:url(/lyt001logo.png);
background-repeat:no-repeat;
background-position:center center;}

.lyt001head{
margin-left:200px;
height:150px;}

.lyt001lang{
height:24px;
line-height:24px;
text-align:right;
font-size:0.9em;
color:#666;
border-bottom:1px solid #eee;
padding-right:20px;}

.lyt001slogan{
height:90px;
line-height:90px;}

.lyt001nav{
height:28px;
margin-top:7px;
font-size:0.9em;}

/* CLASSI SECONDA RIGA */

.lyt001sx{
float:left;
width:200px;}

.lyt001dx{
float:right;
width:200px;
font-size:0.9em;
text-align:justify;}

.lyt001cx{
margin-left:200px;
margin-right:200px;
border-right:1px solid #fff;
border-left:1px solid #fff;
padding-top:20px;
padding-bottom:20px;}

.lyt-txt{
width:90%;
margin:auto;}

.lyt001cnt{
background:#eee;
width:100%;}

/* PSEUDOCLASSI SECONDA RIGA */

.lyt001cnt h2 { 
margin: 0px; 
line-height: 40px; 
font-weight: 100; 
letter-spacing: -1px; 
font-size: 1.8em; 
color: #f60; }

.lyt001cnt h3 { 
margin: 0px; 
line-height: 32px; 
font-weight: 100; 
letter-spacing: -1px; 
font-size: 1.6em; 
color: #666; }

.lyt001sx ul { 
list-style-type: none; 
margin: 0px; 
padding: 0px; }

.lyt001sx li { 
line-height: 24px; 
height: 24px; 
text-indent: 8px; 
font-size: 0.9em; 
border-bottom: 1px solid #ccc; }

.lyt001sx li a { 
display: block; 
width: 100%; 
text-decoration: none; 
color: #666;}

.lyt001sx li a:hover { 
background: #f60; 
color: #fff;}
.lyt001dx h4 { 
line-height: 28px; 
background: #f60; 
text-indent: 4px; 
font-weight: 100; 
font-size: 1.1em; 
color: #fff; 
border-bottom: 1px solid #fff; 
text-transform: uppercase; 
text-align: left; }

.lyt-txt p { 
font-size: 0.9em; 
text-align: justify; 
line-height: 1.6em; }

.lyt001main{
background:#ddd;}

.lyt001top{
height:150px;
border-bottom:1px solid #fff;
background:#fff;
clear:both;}

/* CLASSI TERZA RIGA */
.lyt001foo{
height:80px;
border-top:1px solid #fff;
text-align:center;}

/* PSEUDOCLASSI TERZA RIGA */

.lyt001foo h5 { 
font-size: 0.9em; 
letter-spacing: 2px; 
text-align: center; }

.lyt001foo p { 
text-align: right; 
padding-right: 40px; }

Una raccomandazione per raggiungere il miglior risultato, è quella di utilizzare la medesima formattazione utilizzata nell'esempio, per i contenuti testuali, quindi utilizzando <h2> come titolo della colonna centrale e <h3> come sottotitolo, mentre utilizzerete <h4> come titoli della colonna di destra, e <h5> come slogan nel footer (ultima riga). Tutti il resto dei testi dovranno essere inseriti in paragrafi <p>.

Il codice

Il codice che genera la pagina è molto pulito ed essenziale, lo potete notare scrollando  la finestra riportata qui sotto. Rispetto ad una soluzione che utilizza le tabelle quindi la stessa pagina risulta molto più veloce, e l'annidamento dei vari blocchi che costituiscono il layout rendono semanticamente una gerarchia corretta alla lettura dei vari ragni dei motori di ricerca.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<title>layout001</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<meta name="Application" content="IPORT (C) 2000-2005 NWBOX S.r.l.">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" title="favicon">
<style type="text/css" media="all">@import "stile.css";</style>
</head>
<body>
<div id="div8467" class="lyt001main">
<div id="div8468" class="lyt001top"><div id="div8474" class="lyt001top1">
<div id="div8475" class="lyt001logo"></div>
<div id="div8476" class="lyt001head">
<div id="div8477" class="lyt001lang">Italiano | English | Deutsch<br />

</div>
<div id="div8478" class="lyt001slogan"><h2>CSS Layout fluido gratis da scaricare</h2></div>
<div id="div8479" class="lyt001nav"><ul>
<li><a href="#" title="Homepage"><b>Homepage</b></a></li>
<li><a href="#" title="Area 1">Area 1</a></li>
<li><a href="#" title="Area 2">Area 2</a></li>
<li><a href="#" title="Area 3">Area 3</a></li>
<li><a href="#" title="Area 4">Area 4</a></li>
</ul></div>
</div>
</div></div>

<div id="div8469" class="lyt001cnt">
<div id="div8471" class="lyt001sx"><div id="div8482" class="lyt-txt"><ul>
<li><a title="Introduzione alla pagina in CSS" href="#introduzione">Introduzione</a></li>
<li><a title="Personalizzazione della pagina" href="#personalizza">Personalizzazione</a></li>
<li><a title="Lo stile della pagina" href="#stile">Lo stile</a></li>
<li><a title="Il codice html della pagina" href="#codice">Il codice</a></li>
</ul></div></div>
<div id="div8472" class="lyt001dx"><div id="div8481" class="lyt-txt">
<h4>Scarica il Layout</h4>
<div class="lyt001dwl"><a title="Layout fluido a 3 colonne" href="#">Scarica Subito</a></div>
<h4>Gestione rapida</h4>

<p>Iport vi permette di creare rapidamente layout in css, con una visione grafica immediata. La gestione dei blocchi e delle classi associate sono gestite facilmente con il tasto destro del mouse.</p>
<h4>Oltre il layout</h4>
<p>Scegliere Iport come soluzione CMS per il vostro sito, non significa solo avere un ottimo look ed un codice pulito ma anche raggiungere una notevole visibilità nei motori di ricerca.</p>
</div></div>
<div id="div8473" class="lyt001cx"><div id="div8483" class="lyt-txt">
<h2>Layout gratis a 3 colonne fluido</h2>
<h3 id="introduzione">Introduzione</h3>
        <p> testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo </p>
        <p> testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo </p>
         <p> testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo </p>
        <p> testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo </p>

<h3 id="personalizza">Personalizzazione</h3>
        <p> testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo </p>
        <p> testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo </p>
         <p> testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo </p>
        <p> testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo </p>
<h3 id="stile">Lo stile</h3>
        <p> testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo </p>
        <p> testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo </p>
         <p> testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo </p>
        <p> testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo </p>
<h3 id="codice">Il codice</h3>
        <p> testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo </p>
        <p> testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo </p>
         <p> testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo </p>
        <p> testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo testo testo testo testo testo
        testo testo testo testo testo testo testo testo testo </p>
        </p>
         </div>
    </div>
</div>
<div id="div8470" class="lyt001foo">
<h5>CSS Layout fluido da scaricare gratis grazie a Iport</h5>
<p><small>Iport CSS Online Layout Designer © 2006 nwbox.com</small></p>
<br />
</div>
</div>
</body>
</html>