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

10 Dec 2005

Comments powered by Disqus
About the Author Jim Westergren Jim Westergren is a Swedish web entrepreneur. He is happily married and has two lovely children. Some of his interests are web development, SEO and writing. He is the Founder and owner of TodaysWeb offering SEO, web development and manages projects such as DomainStats and N.nu. Read his ..

Design, text and CMS (N.nu) by myself.