Non funziona! lo scroll verticale nel <div id="contenuti"> non cè
Ho fatto questa prova prendendo come riferimento lo stesso esempio che cè nella guida css del sito Html.it
http://css.html.it/guide/lezione/64/...ma-del-footer/
L'esempio che ho fatto seguendo le tue indicazioni è qui:
http://www.paesaggioitaliano.eu/esempio.html
Questo è il codice della pagina html
codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Layout Monolitico</title><meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.0">
<style type="text/css">
@import url("esempio.css");
a#viewcss{color: #00f;font-weight: bold}
</style>
<script language="javascript" src="esempio15b_files/js.js"></script></head><body>
<div id="container">
<div id="header">
<h1>Html.it</h1>
</div>
<div id="navigation">
<ul>[*]Home[*]Pillole[*]Contenuti[*]Grafica[*]Linguaggi[*]Webdesign[*]Software[/list]
</div>
<div id="content">
<h2>Layout monolitico</h2>
Questa è la forma più elementare di layout, e può andare bene per siti di piccole dimensioni
(generalmente con un ordine di pagine sotto la decina), per siti con menù dropdown o per siti con
macrosezioni (sottositi). Come anticipato, per la sua semplicità non necessita di posizionamenti o
float nella versione elementare. Il laoyout monolitico si compone di quattro sezioni fondamentali:</p>
- header
- navigazione
- contenuti
- footer
Questa è la forma più elementare di layout, e può andare bene per siti di piccole dimensioni
(generalmente con un ordine di pagine sotto la decina), per siti con menù dropdown o per siti con
macrosezioni (sottositi). Come anticipato, per la sua semplicità non necessita di posizionamenti o
float nella versione elementare.Il laoyout monolitico si compone di quattro sezioni fondamentali...</p>
Questa è la forma più elementare di layout, e può andare bene per siti di piccole dimensioni
(generalmente con un ordine di pagine sotto la decina), per siti con menù dropdown o per siti con
macrosezioni (sottositi). Come anticipato, per la sua semplicità non necessita di posizionamenti o
float nella versione elementare.Il laoyout monolitico si compone di quattro sezioni fondamentali...</p>
Questa è la forma più elementare di layout, e può andare bene per siti di piccole dimensioni
(generalmente con un ordine di pagine sotto la decina), per siti con menù dropdown o per siti con
macrosezioni (sottositi). Come anticipato, per la sua semplicità non necessita di posizionamenti o
float nella versione elementare.Il laoyout monolitico si compone di quattro sezioni fondamentali...</p>
Questa è la forma più elementare di layout, e può andare bene per siti di piccole dimensioni
(generalmente con un ordine di pagine sotto la decina), per siti con menù dropdown o per siti con
macrosezioni (sottositi). Come anticipato, per la sua semplicità non necessita di posizionamenti o
float nella versione elementare.Il laoyout monolitico si compone di quattro sezioni fondamentali...</p>
Questa è la forma più elementare di layout, e può andare bene per siti di piccole dimensioni
(generalmente con un ordine di pagine sotto la decina), per siti con menù dropdown o per siti con
macrosezioni (sottositi). Come anticipato, per la sua semplicità non necessita di posizionamenti o
float nella versione elementare.Il laoyout monolitico si compone di quattro sezioni fondamentali...
visualizza il css di questo layout </p>
</div>
<div id="footer">© 1997-2004 - Grafica, layout e guide sono di esclusiva proprietà di HTML.it s.r.l.
Note e informazioni legali</div>
</div>
<script language="javascript">postamble();</script>
</body></html>
Questo è il codice del file esterno css
codice:
/*stili per il layout fisso con altezza minima*/
html,body{
margin: 0;padding:0;height:100%;}
body{
font-family: arial,sans-serif;font-size: 76%;text-align: center}
div#container{
position:relative; width: 760px; height: 100%;margin: 0 auto;
text-align: left; border-left: 2px solid #36c;border-right: 2px solid #36c; overflow:auto}
body>div#container{
height:auto;min-height:100%}
div#footer{
position: absolute;bottom:0; width: 100%; padding: 0.5em 0;
background-color: #69c; color: #000;text-align:center;}
/*stili generici, su header e footer*/
div#header{
background-color:#36C;color: #ff0}
h1,h2{margin: 0;padding:0}
h1{padding-left:0.5em;font: bold 2.3em/80px arial,serif}
h2{color: #999;font-size: 1.5em}
div#footer a{color: #fff;font-weight: bold;text-decoration: underline}
/*stili specifici per il layout*/
div#navigation{background-color:#9cf}
div#content{padding: 1em 1em 5em}
/*stili per la navigazione*/
div#navigation ul{margin: 0;padding: 0; list-style-type: none;}
div#navigation li{display: inline; margin: 0 0 0 1em;padding: 0} /*nota display: inline*/
div#navigation a{color:#369;font: normal bold 1.2em/2.5em arial,sans-serif;text-decoration: none}
div#navigation a:hover{color: #fff;text-decoration: underline}
div#navigation a#activelink{color: #033;text-decoration: none}
Permessi di invio
Rispondi quotando