Jim Westergren
A blog about me, my projects, SEO, Web Development and Personal Development.
"If we did all the things we are capable of, we would literally astound ourselves." - Thomas A. Edison

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.

Site: www.SEOFAQ.net

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

Tweet this! Boomark This! Subscribe to the RSS feed
About the Author Jim Westergren Jim Westergren is a company owner from Sweden who lives together with his wife and son. Some of his interests are SEO, web development, writing and taking photos. Read his full about page or contact him. Follow Jim on Twitter or subscribe to this blog.
In Swedish: presentation, blog.
10 responses »Leave a comment
  1. 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. ;)

  2. tk
    said on December 20, 2005 at 11:15 am

    Doesn’t work in Opera 8.51 :(

  3. 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.

  4. 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.

  5. 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/

  6. 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?

  7. Emil Stenström
    said on January 15, 2009 at 1:55 am

    @Martin: Sorry, I’m not linking to your tutorial, I linked to mine. Trying to steal some visitors are we?

  8. Nate dogg
    said on November 11, 2009 at 12:42 pm

    Not helpfull at all noob

  9. Emelie
    said on July 6, 2010 at 11:15 am

    Thank you for sharing, I’m still new to these and I really need references.

  10. Emelie
    said on July 6, 2010 at 11:16 am

    thank you for sharing, I really need this :)

Leave a Comment

To quote: <blockquote>text to quote</blockquote>

You can use these tags: <a href=""> <blockquote> <code> <em> <strong>


To have a photo of you beside your comments, upload a photo here.

Previous post in category:

Next post in category:

Design by myself:  valid XHTML and valid CSS.