Ciao a tutti.
Ecco il mio problema: io voglio realizzare nella mia pagina un header fisso, un footer fisso e una parte centrale, dove visualizzare contenuti vari. Il mio problema è che ridimensionando la finestra del browser (firefox o ie), non avviene un ridimensionamento corretto del "frame" centrale. Frame è tra virgolette perchè ho emulato il frame con div e css.
Quello che accade è che header e footer rimangono fissi, ancorati al bordo superiore ed inferiore della pagina di visualizzazione del browser; il problema è nella parte centrale, la quale si ridimensiona solo parzialmente, e il footer mi copre la scroll-bar. Dimenticavo: footer e header contengono immagini alte 120px che si posizionano ai quattro lati dello schermo.
Ecco il mio codice html:```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TEST</title>
<link rel="stylesheet" type="text/css" media="screen" href="test.css" />
</head>
<body>
<div class="header"> <!-- Inizio header -->
<div class="left">
<img src="img/media.jpg" />
</div>
<div class="right">
<img src="img/media.jpg" />
</div>
</div> <!-- Fine header -->
<div class="container"> <!-- Inizio "frame" centrale -->
bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
bla, bla, bla, bla, bla,<br /> bla, bla, bla, bla,<br />
</div> <!-- Fine "frame" centrale -->
<div class="footer"> <!-- Inizio footer -->
<div class="left">
<img src="img/media.jpg" />
</div>
<div class="right">
<img src="img/media.jpg" />
</div>
</div> <!-- Fine footer -->
</body>
</html>
Ed ecco il mio css:
html {padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-width: 0px 0px 0px 0px; }
body { padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-width: 0px 0px 0px 0px;
position: absolute;
height: 100%;
overflow:hidden; }
div { padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-width: 0px 0px 0px 0px; }
.header { height: 120px;
background-color: #00FF00; }
.footer { height: 120px;
background-color:;
position: absolute;
bottom: 0px;}
.container { height: 354px;
overflow: auto;
background-color: #0000FF;}
img { border-style: none; }
.left {float: left;}
.right {float: right;}