Emulating frames with CSS

Newcomer's question about <div> basics.

[gwagner]

Hi, I'm completely new both to this forum and CSS, so sorry about the basic question... How do I emulate frames with CSS?

I'd like to have the green top line on <snip> stay there even if I scroll down on the page. Basically, I'd like to have it act like another frame. Is there some simple way to do that? As I said, I'm completely new to this. I created my first css file a couple hours ago and that was mainly cut-and-paste...

Thanks!
Gernot

[edited by: Nick_W at 8:41 am (utc) on Mar. 16, 2003]
[edit reason] no urls please [/edit]

[DrDoc]

Welcome to Webmaster World!

You might want to take a look at the Guidelines for this forum [webmasterworld.com]

Also, if you look in the library [webmasterworld.com] you'll find what you're looking for: Emulating Frames - A working example [webmasterworld.com], especially post #12

[DrDoc]

It's worth mentioning that it's harder to maintain a fixed horizontal menu than a vertical one when emulating frames.

[grahamstewart]

Well in theory it should be nice and easy...but certain well known software companies *coughMicrosoft*cough* didn't feel like implementing the

position: fixed

style.

Maybe in years to come......

[DrDoc]

Well, grahamstewart, it still is easy. Did you look at the thread I recommended above? Even though IE doesn't support position:fixed it offers rock solid support for position:absolute and overflow:auto/overflow:hidden.

Even Opera doesn't support overflow control at an acceptable level!

Gecko browsers do. They are the only ones to completely support position:fixed/absloute and complete overflow control.

Still, it's not hard to emulate frames cross-browsers. Complex, maybe... but not hard ;)

[grahamstewart]

Yeah I read that post. Very impressive but to be honest I hate using browser hacks to hide CSS and all that (I'm a bit of a purist/idealist y'see).

All round support for position:fixed or overflow would make life so much easier wouldn't it?

Or even just a consistent way to address CSS hiding would be nice - at least then we could work around their bugs and missing features without getting our hands dirty.

[DrDoc]

I totally agree! Life (or at least development) would be better if all browsers followed the standards, or if at least they were at the same level. Unforuntately, they are not, have never been, and never will be.

One thing though... I'd have to second being a purist/idealist. Might sound strange, considering the fact that I promote various methods of hiding CSS from browsers.

However, I only promote such methods if the code produced will validate as 100% correct syntax. That might sound like a lame excuse, but considering the HTML soup we were in a couple of years ago, with various tricks for different browsers - at least the code can now be made to validate.

Through CSS it is possible to create pages that look the same, no matter the browser/OS. That was never possible using pure HTML. If you wanted to serve browsers different content it was necessary to use some kind of sniffer, usually JavaScript. Now it's just CSS - and valid CSS too.

Sure, certain browsers might have issues interpreting, but at least they have a chance of receiving stuff that their limited vocabulary can handle.

I wish we lived in a world where Microsoft, Mozilla, and Opera worked together. Unfortunately they don't. The only good thing is that they somehow seem to agree more now than they did a few years ago...

[grahamstewart]

Maybe they should extend the media attribute for CSS3 so that we can do something like this..

<link rel="stylesheet" type="text/css" media="screen" href="normal.css">
<link rel="stylesheet" type="text/css" media="screen-netscape" href="netscapehacks.css">
<link rel="stylesheet" type="text/css" media="screen-explorer-5.5" href="ie55hacks.css">
<link rel="stylesheet" type="text/css" media="screen-opera" href="operahacks.css">

and so on.... and so on... then at least we could code hide without resorting to 'tricks'. ;)

[DrDoc]

Well, the problem hardly lies in future browsers, just in older. And, since they don't understand that kind of syntax, it wouldn't do any good ;)

[grahamstewart]

True... but the next wave of future browsers will suffer exactly the same problem with CSS-3. And just when we they start to get that fixed, CSS-4 will come along and so on...

...until we are all still here posting complaints that the transparent luminous spheroid style in CSS-352 is not supported properly by the MicroAOLTimeWarnerPepsiCoSoft holographic browser v46.215 wetware chip that we have just implanted into our brain stem.

;)

[DrDoc]

:o

Hey, I'm looking forward to that CSS-352 now! ;)