Replace your DD-page with this:
<!--Force IE6 into quirks mode with this comment tag-->
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Top Frame Layout</title>
<script type="text/javascript">
document.write('<object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" type="text/html" data="blank.html" width="0" height="0" name="object"><\/object>');
function Transfer_To(InternalId){
try{document.getElementById(InternalId).innerHTML=window.frames['object'].body.innerHTML;}
catch(e){document.getElementById(InternalId).innerHTML=window.frames['object'].document.body.innerHTML;}
}
function Load_External(url){
frames['object'].location.replace(url)
}
function Remove(tag,SomeClass) {
var els = document.getElementsByTagName(tag)
for (i=0;i<els.length; i++) {
if (els.item(i).className == SomeClass){
while (els.item(i).firstChild)
els.item(i).removeChild(els.item(i).firstChild);
}
}
}
</script>
<style type="text/css">
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#framecontent{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 130px; /*Height of frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: lightyellow;
color: black;
}
#maincontent{
position: fixed;
top: 130px; /*Set top value to HeightOfFrameDiv*/
left: 0;
right: 0;
bottom: 0;
overflow: auto;
background: #fff;
color:black;
padding-left:15px;
padding-top:5px;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body{ /*IE6 hack*/
padding: 130px 0 0 0; /*Set value to (HeightOfFrameDiv 0 0 0)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
padding:0;
margin:0;
padding-left:15px;
padding-top:5px;
}
</style>
</head>
<body>
<div id="framecontent">
<div class="innertube">
<h1>CSS Top Frame Layout</h1>
<a href="javascript:;" onmousedown="Load_External('test1.html')" onclick="Remove('div','remove'); Transfer_To('maincontent');">test1.html</a> |
<a href="javascript:;" onmousedown="Load_External('test2.html')" onclick="Remove('div','remove'); Transfer_To('maincontent');">test2.html</a>
</div>
</div>
<div id="maincontent" class="remove">
<div class="innertube">
This text will be replaced by other text when you click on a link above.
</div>
</div>
</body>
</html>
Make two external test-files (test1.html and test2.html)
<html>
<head>
</head>
<body >
TEST 1<br>
This content was extracted from test1.html.<br>This content was extracted from test1.html.<br>This content
was extracted from test1.html.<br>This content was extracted from test1.html.<br>This content was extracted
from test1.html.<br>This content was extracted from test1.html.<br>This content was extracted from
test1.html.<br>This content was extracted from test1.html.<br>This content was extracted from
test1.html.<br>This content was extracted from test1.html.<br>This content was extracted from
test1.html.<br>This content was extracted from test1.html.<br>This content was extracted from
test1.html.<br>This content was extracted from test1.html.<br>This content was extracted from
test1.html.<br>This content was extracted from test1.html.<br>This content was extracted from
test1.html.<br>This content was extracted from test1.html.<br>This content was extracted from
test1.html.<br>This content was extracted from test1.html.<br>This content was extracted from
test1.html.<br>This content was extracted from test1.html.<br>This content was extracted from
test1.html.<br>This content was extracted from test1.html.<br>This content was extracted from
test1.html.<br>This content was extracted from test1.html.<br>This content was extracted from
test1.html.<br>This content was extracted from test1.html.<br>
</body>
</html>
<html>
<head>
</head>
<body >
TEST 2<br>
This content was extracted from test2.html.<br>This content was extracted from test2.html.<br>This content
was extracted from test2.html.<br>This content was extracted from test2.html.<br>This content was extracted
from test2.html.<br>This content was extracted from test2.html.<br>This content was extracted from
test2.html.<br>This content was extracted from test2.html.<br>This content was extracted from
test2.html.<br>This content was extracted from test2.html.<br>This content was extracted from
test2.html.<br>This content was extracted from test2.html.<br>This content was extracted from
test2.html.<br>This content was extracted from test2.html.<br>This content was extracted from
test2.html.<br>This content was extracted from test2.html.<br>This content was extracted from
test2.html.<br>This content was extracted from test2.html.<br>This content was extracted from
test2.html.<br>This content was extracted from test2.html.<br>This content was extracted from
test2.html.<br>This content was extracted from test2.html.<br>This content was extracted from
test2.html.<br>This content was extracted from test2.html.<br>This content was extracted from
test2.html.<br>This content was extracted from test2.html.<br>This content was extracted from
test2.html.<br>This content was extracted from test2.html.<br>
</body>
</html>
This way of updating parts of your page is explained here (http://www.dynamicdrive.com/forums/showthread.php?t=31541&highlight=molendijk).
---
Good luck,
Arie Molendijk.
IMPORTANT: you have to make a dummy page called blank.html too!!