/    Sign up×
Community /Pin to ProfileBookmark

newbie CSS question: emulate frameset?

Copy linkTweet thisAlerts:
Dec 03.2003

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

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@DaveSWDec 03.2003 — 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.
Copy linkTweet thisAlerts:
@BigjohnauthorDec 03.2003 — [i]Originally posted by DaveSW [/i]

[B]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. [/B][/QUOTE]

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?
Copy linkTweet thisAlerts:
@DaveSWDec 03.2003 — 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%;
Copy linkTweet thisAlerts:
@BigjohnauthorDec 03.2003 — [i]Originally posted by DaveSW [/i]

[B]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%; [/B][/QUOTE]

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!
Copy linkTweet thisAlerts:
@DaveSWDec 03.2003 — 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.
Copy linkTweet thisAlerts:
@BigjohnauthorDec 05.2003 — 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
Copy linkTweet thisAlerts:
@DaveSWDec 05.2003 — 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.
Copy linkTweet thisAlerts:
@DaveSWDec 05.2003 — 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) ?
Copy linkTweet thisAlerts:
@BigjohnauthorDec 05.2003 — 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!
×

Success!

Help @Bigjohn spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...