Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

An Alternative To Frames

Frames

An Alternative To Frames

by  ca8msm  Posted    (Edited  )
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>
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top