I want to emulate a frameset with CSS embeded in the head of an HTML page. Top frame fixed size does not move. Content frame with scrollbar on right. bottom frame for navigation links.
Can this be done?
JohnSort of.
Basically you need to set a size for your page, and then use divs with style="overflow: auto" in them to achieve the scroll.
See
<!-- m --><a class="postlink" href="http://www.emdevelopments.co.uk/tollgate/first/">http://www.emdevelopments.co.uk/tollgate/first/</a><!-- m -->
for an example, but using a side menu bar.
I can probably provide a stripped down version of the code if you like.Originally posted by DaveSW
Sort of.
Basically you need to set a size for your page, and then use divs with style="overflow: auto" in them to achieve the scroll.
See
<!-- m --><a class="postlink" href="http://www.emdevelopments.co.uk/tollgate/first/">http://www.emdevelopments.co.uk/tollgate/first/</a><!-- m -->
for an example, but using a side menu bar.
I can probably provide a stripped down version of the code if you like.
Yes! Like that, except the top section would be width 100%, height 200px. Content section would be width 100% with the overflow thing to create the scroll bars. How do you make the TOP section 'stick' to the top of the browser screen?Ok I'll see if I can put the code together for you, but can you just confirm dimensions first?.
Top
height: 200px
width: 100%
Main
height: ?? - this may need to be a px value - I don't know if you can expand to fill the height.
width: 100%
Bottom
height: 200px ??
width: 100%;Originally posted by DaveSW
Ok I'll see if I can put the code together for you, but can you just confirm dimensions first?.
Top
height: 200px
width: 100%
Main
height: ?? - this may need to be a px value - I don't know if you can expand to fill the height.
width: 100%
Bottom
height: 200px ??
width: 100%;
Bottom 100px / 100%width
Main - can it just be 'the rest of the space? with the over-flow tag for scroll bars? I mean, if someone has 1280x1024 they might not get scrollbar, but a guy at 800x600 would likely...
THANKS!Well here's the code for simple middle scroll:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#top {
height: 200px;
width: 100%;
background-color: #dde5e6;
}
#middle {
height: 200px;
width: 100%;
background-color: #ffffff;
overflow:auto;
}
#bottom {
height: 100px;
width: 100%;
background-color: #dde5e6;
}
-->
</style>
</head>
<body>
<div id="top">
This is all the top stuff
</div>
<div id="middle">
hello <br />hello <br />hello <br /><br />hello <br /><br /><br />hello <br /><br />
hello <br /><br />hello <br /><br />hello <br /><br />hello <br /><br />hello <br /><br />
</div>
<div id="bottom">
This is the footer
</div>
</body>
</html>
However, I can't get it to accept an expanding height for the middle bar. The only thing I can think of is to use % heights for everything, or have like a centralised box with all your design in - design for an 800x600 screen that will just centralise on a larger screen.Thanks for your help Dave.
One other question! Can you set the opening size of the page when it loads?
Like - click on the link and the window opens at a certain size?
JohnWith some javascript yes.Check out <!-- m --><a class="postlink" href="http://www.webdevfaqs.com/javascript.php#popup">http://www.webdevfaqs.com/javascript.php#popup</a><!-- m --> - just make sure it works at 800x600.
I'm still working on an idea for that frames thing to be full size - just a bit more complex.hmm I can fix it for css compliant browsers (mozilla) but unfortunately IE isn't one of those.
Nearest I can come is using % heights:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#top {
height: 20%;
width: 100%;
background-color: #dde5e6;
}
#middle {
width: 100%;
background-color: #ffffff;
overflow:auto;
height: 70%;
}
#bottom {
height: 10%;
width: 100%;
background-color: #dde5e6;
}
-->
</style>
</head>
<body>
<div id="top">
This is all the top stuff
</div>
<div id="middle">
hello <br />hello <br />hello <br /><br />hello <br /><br /><br />hello <br /><br />
hello <br /><br />hello <br /><br />hello <br /><br />hello <br /><br />hello <br /><br /> <br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
hello
</div>
<div id="bottom">
This is the footer
</div>
</body>
</html>
Difficult to design with I know, but using css background properties you could allow it to expand.
Always happy to help (where I can)
Thanks Dave.
I've played with some CSS today on a linked stylesheet. I like it. Too bad the damn CSS2 spec document from w3c is 338 page PDF! damn!
Again, thanks!
Can this be done?
JohnSort of.
Basically you need to set a size for your page, and then use divs with style="overflow: auto" in them to achieve the scroll.
See
<!-- m --><a class="postlink" href="http://www.emdevelopments.co.uk/tollgate/first/">http://www.emdevelopments.co.uk/tollgate/first/</a><!-- m -->
for an example, but using a side menu bar.
I can probably provide a stripped down version of the code if you like.Originally posted by DaveSW
Sort of.
Basically you need to set a size for your page, and then use divs with style="overflow: auto" in them to achieve the scroll.
See
<!-- m --><a class="postlink" href="http://www.emdevelopments.co.uk/tollgate/first/">http://www.emdevelopments.co.uk/tollgate/first/</a><!-- m -->
for an example, but using a side menu bar.
I can probably provide a stripped down version of the code if you like.
Yes! Like that, except the top section would be width 100%, height 200px. Content section would be width 100% with the overflow thing to create the scroll bars. How do you make the TOP section 'stick' to the top of the browser screen?Ok I'll see if I can put the code together for you, but can you just confirm dimensions first?.
Top
height: 200px
width: 100%
Main
height: ?? - this may need to be a px value - I don't know if you can expand to fill the height.
width: 100%
Bottom
height: 200px ??
width: 100%;Originally posted by DaveSW
Ok I'll see if I can put the code together for you, but can you just confirm dimensions first?.
Top
height: 200px
width: 100%
Main
height: ?? - this may need to be a px value - I don't know if you can expand to fill the height.
width: 100%
Bottom
height: 200px ??
width: 100%;
Bottom 100px / 100%width
Main - can it just be 'the rest of the space? with the over-flow tag for scroll bars? I mean, if someone has 1280x1024 they might not get scrollbar, but a guy at 800x600 would likely...
THANKS!Well here's the code for simple middle scroll:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#top {
height: 200px;
width: 100%;
background-color: #dde5e6;
}
#middle {
height: 200px;
width: 100%;
background-color: #ffffff;
overflow:auto;
}
#bottom {
height: 100px;
width: 100%;
background-color: #dde5e6;
}
-->
</style>
</head>
<body>
<div id="top">
This is all the top stuff
</div>
<div id="middle">
hello <br />hello <br />hello <br /><br />hello <br /><br /><br />hello <br /><br />
hello <br /><br />hello <br /><br />hello <br /><br />hello <br /><br />hello <br /><br />
</div>
<div id="bottom">
This is the footer
</div>
</body>
</html>
However, I can't get it to accept an expanding height for the middle bar. The only thing I can think of is to use % heights for everything, or have like a centralised box with all your design in - design for an 800x600 screen that will just centralise on a larger screen.Thanks for your help Dave.
One other question! Can you set the opening size of the page when it loads?
Like - click on the link and the window opens at a certain size?
JohnWith some javascript yes.Check out <!-- m --><a class="postlink" href="http://www.webdevfaqs.com/javascript.php#popup">http://www.webdevfaqs.com/javascript.php#popup</a><!-- m --> - just make sure it works at 800x600.
I'm still working on an idea for that frames thing to be full size - just a bit more complex.hmm I can fix it for css compliant browsers (mozilla) but unfortunately IE isn't one of those.
Nearest I can come is using % heights:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
body {
height: 100%;
margin: 0px;
padding: 0px;
}
#top {
height: 20%;
width: 100%;
background-color: #dde5e6;
}
#middle {
width: 100%;
background-color: #ffffff;
overflow:auto;
height: 70%;
}
#bottom {
height: 10%;
width: 100%;
background-color: #dde5e6;
}
-->
</style>
</head>
<body>
<div id="top">
This is all the top stuff
</div>
<div id="middle">
hello <br />hello <br />hello <br /><br />hello <br /><br /><br />hello <br /><br />
hello <br /><br />hello <br /><br />hello <br /><br />hello <br /><br />hello <br /><br /> <br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
hello
</div>
<div id="bottom">
This is the footer
</div>
</body>
</html>
Difficult to design with I know, but using css background properties you could allow it to expand.
Always happy to help (where I can)
Thanks Dave.I've played with some CSS today on a linked stylesheet. I like it. Too bad the damn CSS2 spec document from w3c is 338 page PDF! damn!
Again, thanks!