magicalclick

Hello is there any way to make a page looks like using frames but it is coded in the same page I am trying to write one HTML page that behave like a page containing two frames, top and bottom. I want to keep everything in one page, and when the bottom frame scrolls, the top stay the same.

Thank you.



Re: Internet Explorer Web Development An page element behave like a frame.

Ixpah

Something like this, although you'll probably need to look up the various hacks to make it work in various older versions of IE.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html>
<head><title>Fixed Top Test</title>
<style>
body {
margin: 0px;
padding: 0px;
}

div.nav {
position: fixed;
left: 0px;
top: 0px;
background-color: blue;
color: white;
padding-top: 10px;
padding-left: 10px;
height: 50px;
width: 100%;
}

div.content {
margin-top: 70px;
padding: 0px;

}
</style>
</head>

<body>
<div class="nav">Fixed Header</div>
<div class="content">
<p>First Line</p>
<p>A few lines to scroll</p>
<p>A few lines to scroll</p>
<p>A few lines to scroll</p>
<p>A few lines to scroll</p>
<p>A few lines to scroll</p>
<p>A few lines to scroll</p>
<p>A few lines to scroll</p>
<p>A few lines to scroll</p>
<p>A few lines to scroll</p>
<p>A few lines to scroll</p>
<p>A few lines to scroll</p>
<p>A few lines to scroll</p>
<p>A few lines to scroll</p>
<p>Last Line</p>
</div>
</body></html>






Re: Internet Explorer Web Development An page element behave like a frame.

magicalclick

Hello, thank you for the help. But I am having problem with target and goto target. When I click iii2, I couldn't see "A few lines to scroll 3". It has been covered by the header. How do I fix that Is it possible to write a script to adjust the possition based on the height of the header Thank you very much.

<body>
<a name="Hello1"></a>
<div class=
"nav">Fixed Header</div>
<div class=
"content">
<p>First Line</p>
<p>A few lines to scroll 1</p>
<p>A few lines to scroll 2</p>
<a name="Hello2"></a>
<p>A few lines to scroll 3</p>
<p>A few lines to scroll</p>
<p>A few lines to scroll</p>
<p>A few lines to scroll</p>
<p>A few lines to scroll</p>
<a href="#Hello1">iii</a>
<p>A few lines to scroll</p>
<a href="#Hello2">iii2</a>
<p>A few lines to scroll</p>
<p>A few lines to scroll</p>
<p>A few lines to scroll</p>
<p>A few lines to scroll</p>
<p>A few lines to scroll</p>
<p>Last Line</p>
</div>
</body>