<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style>
@import url(style.css);
</style>
<script language="javascript" src="esempio27b_files/js.js"></script></head><body>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
</style></head>
<div>
<img id="sfondo-css" src="http://pazzano.eu/sfondopaz.jpg" alt="css sfondo" />
</div>
<body>
<div id="content">
<h2>Layout a tre colonne - versione con i float</h2>
<p>Il layout a tre colonne è uno dei più diffusi e permette di gestire siti di dimensioni medio-alte,
fino ad arrivare ai portali. Si compone delle seguenti sezioni fondamentali:
header, navigazione, contenuti, sezione extra e footer.</p>
<p>In quanto alla non meglio specificabile sezione extra questa può contenere, come abbiamo visto nell' introduzione,
svariate funzionalità del sito: news, sondaggi, banner, navigazione supplementare e quant'altro: dovrebbe comunque
essere facilmente consultabile, non troppo scarna, nè troppo densa. Questo tipo di layout, proprio per la presenza
di una sezione logica (e fisica) aggiuntiva è indicatissimo per impaginare siti dinamici attraverso linguaggi lato
server quali php o asp e comunque siti con molti contenuti e/o aggiornamenti frequenti.</p>
<p>Resta
l' idea che la sezione dei contenuti dovrebbe essere la più corposa, e
quindi la colonna centrale la più lunga. Come per il layout a due
colonne, la versione a tre colonne con i float rispetto all' analogo
con posizionamenti ha il pregio di non imporre vincoli sulla lunghezza
relativa delle colonne. D' altra parte vincola l' ordine di codifica
dell' html.<br>
<a id="viewcss" href="http://html.it/guide/esempi/layout_css/viewcss.php?css=3cfcolor">visualizza il css di questo layout</a></p>
</div>
<div id="navigation">
<ul>
<li><a id="activelink" href="#">Pagina Principale</a></li>
<li><a href="#">Storia</a></li>
<li><a href="#">Foto</a></li>
<li><a href="#">Wisgasgto</a></li>
<li><a href="#">ddgasgaerbi</a></li>
<li><a href="#">Video dsgdati...</a></li>
<li><a href="#">Rudgagbe</a></li>
<li><a href="#">Dodgagova</a></li>
<li><a href="#">Valldgadgaro</a></li>
</ul>
</div>
<div id="extra">
<div class="newsbox">
<h2>Larghezza delle colonne</h2>
<p>La tendenza è avere le due colonne laterali a larghezza fissa e la colonna centrale fluida [...]</p>
</div>
<div class="newsbox">
<h2>Largezza totale</h2>
<p>Un layout a tre colonne si presenta generalmente fluido a larghezza totale,
e cioè occupa in ampiezza tutta la larghezza della finestra del browser [...]</p>
</div>
</div>
<div id="footer">© 2009 - Sito creato da ... <br>
</div>
</div>
<script language="javascript">postamble();</script>
</body>
</html>
questo invece è ilCSS:
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#sfondo-css{
position:absolute;
height:100%;
width: 100%;
margin: 0;
padding: 0;
z-index: 1;
}
table {
width: 100%;
height: 100%;
}
le scritte sn nascoste!