Frames with CSS!

I made it!

After some hours I have now managed to put an idea into reality.

It was not easy but now I am happy that I made it.

If you scroll it will look like as if you have frames but in fact it is just CSS. It was not easy to make as Internet Explorer showed it differently than FireFox.

This is how I did it:

Doc type:

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

CSS:

body {
padding-left: 10px;
width: auto;
}

#menuleft {
POSITION: fixed;
BACKGROUND-COLOR: transparent;
TEXT-ALIGN: center;
float: left;
}

#menuleft {margin-left:-80px;} html>body #menuleft {margin-left:0px;margin-top:50px;}

#menutop {
POSITION: fixed;
TEXT-ALIGN: center;
BACKGROUND-COLOR: #ffffff;
float: top;

}

#menutop {margin-left:110px;margin-top:-30px;} html>body #menutop {margin-left:140px;margin-top:-10px;}

/* fix for floating menu in IE */
@media Screen
{
#menuleft {
POSITION: fixed
}
#menutop {
POSITION: fixed
}
HTML {
OVERFLOW-Y: hidden
}
HTML BODY {
margin: 0px 0px 0px 0px;
OVERFLOW-Y: auto;
PADDING: 0px 0px 0px 0px;
HEIGHT: 100%;

}
HTML #menuleft {
POSITION: absolute
}
HTML #menutop {
POSITION: absolute
}

In HTML File:

<div id=”menuleft”>

<div id=”menutop”>

</div>

I got help from this thread and some other sources.

This html>body means that Internet Explorer reads the left side and FireFox the right side. That was a CSS Hack I found by googling.

So there you have it and good luck!

EDIT: April 10, 2006:

Here is another nice example and write-up how to do CSS frames:
http://www.webpelican.com/blog/examples/css-frames-example.htm

6 responses » Leave a comment

Colleen said on December 13, 2005 at 7:25 pm
I think you did a great job on that and thanks for sharing! I may use this for something.
tk said on December 20, 2005 at 11:15 am
Doesn’t work in Opera 8.51
Emil Stenström said on February 5, 2006 at 12:51 am
I’ve written an article about frames and iframes in CSS that works in IE, Fx and Opera. Might help you.
Thunder said on March 8, 2006 at 8:42 pm
I was wondering if you can us images for the actual frames and how would i do this.
Martin said on August 31, 2006 at 6:51 pm
Hi, Emil, nice to see you’re linking to my CSS Frames Tutorial. The location, however, has changed. The new URL is
http://www.webpelican.com/web-tutorials/css-frames-tutorial/
me! said on May 9, 2008 at 7:03 am
any idea how to have a clicked link in the menu re-load this frame?

RSS feed for comments on this post or Track with co.mments