INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Frames

An Alternative To Frames by ca8msm
Posted: 3 Feb 06 (Edited 9 Feb 06)

As an alternative to using frames, the following piece of code uses pure CSS (i.e no JavaScript) to simulate a static header and navigation section whilst allowing the main content to scroll.

This validates to both XHTML 1.0 Strict and CSS for conformance to W3C recommendations.

It has also been successfully tested in the following browsers:

Internet Explorer
IE7 Beta's 1 & 2, IE6*, IE5*, IE4*

Firefox
1.5, 1.0.7

Netscape
8.1, 7*, 6*

Opera
8.51, 7*, 6*, 5*

CODE

<!-- IE Quirks Mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Fixed header and left-sidebar</title>
<style type="text/css">
 body{
  margin:0;
  padding:100px 0 0 150px;
  background:#ccc;
 }
 div#header{
  position:absolute;
  top:0;
  left:0;
  width:500%;
  height:100px;
  background:#999;
  color: #000;
 }
 div#left-sidebar{
  position:absolute;
  top:100px;
  left:0;
  width:150px;
  background:#ccc;
  color: #000;
 }
 div#content{
  background:#fff;
 }
 @media screen{
  body>div#header{
   position:fixed;
  }
  body>div#left-sidebar{
   position:fixed;
  }
 }
 * html body{
  overflow:hidden;
 }
 * html div#content{
  height:100%;
  overflow:auto;
 }
</style>
</head>

<body>

<div id="header">
 <p>Header content goes here....</p>
</div>

<div id="left-sidebar">
 <ul>
 <li><a href="http://www.google.com">Google</a></li>
 <li><a href="http://www.tek-tips.com">Tek-Tips</a></li>
 <li><a href="http://www.microsoft.com">Microsoft</a></li>
 </ul>
</div>

<div id="content">
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
 Example Main Content<br/>
</div>

</body>
</html>

Back to HTML, XHTML & CSS FAQ Index
Back to HTML, XHTML & CSS Forum

My Archive

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close