PDA

Click to See Complete Forum and Search --> : newbie CSS question: emulate frameset?

Bigjohn
12-02-2003, 10:40 PM
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?

John
DaveSW
12-03-2003, 06:48 AM
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
http://www.emdevelopments.co.uk/tollgate/first/
for an example, but using a side menu bar.

I can probably provide a stripped down version of the code if you like.
Bigjohn
12-03-2003, 06:56 AM
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
http://www.emdevelopments.co.uk/tollgate/first/
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?
DaveSW
12-03-2003, 09:38 AM
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%;
Bigjohn
12-03-2003, 10:11 AM
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!
DaveSW
12-03-2003, 10:15 AM
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.
Bigjohn
12-05-2003, 01:40 PM
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?

John
DaveSW
12-05-2003, 03:38 PM
With some javascript yes.Check out http://www.webdevfaqs.com/javascript.php#popup - 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.
DaveSW
12-05-2003, 03:50 PM
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) :D
Bigjohn
12-05-2003, 04:35 PM
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!