fixed position layout (getting nav bar to be stationary and hide scrolling)

[kate_rose]

I am working on a css layout.  I want the user to be able to scroll through the content without the header or side navigation bar moving.  I know I will have to use a workaround for IE but first I could use a bit of help to get it working properly in FF.  I have a wrapper div which is centered & contains all the bits of the page.  I have succesfully fixed the side nav bar & header in place.  However, when I scroll through the content the content div & the wrapper div both scroll.  Is there a way to allow the content to scroll but leave the wrapper in a fixed position.  When I try positioning the wrapper as fixed like this I no longer get scroll bars. 

 

Also when I scroll I see the content as it goes by just above the page.  There is a little margin there presumably put in by the browser so the page doesn't come right to the edge of the window.  I tried putting a white div over it to hide the scrolling content but apparently I can't mess with the margin.  I am not sure how to handle this??

 

Any suggestion or just a point in the right direction would be much appreciated.

 

Thanks,

 

Kate

[obsidian]

Screenshots or link would be a great help, but at first read, I would guess your best bet is to position and size a container for your content and throw an "overflow: auto" on your container. That way, it is only ever the content that scrolls and not the whole page.

[kate_rose]

Here is a screen shot of what I am talking about.  Notice that at the very top you can see the text I have scrolled through and a little bit of the wrapper div background that scrolled with it.

 

[kate_rose]

Obsidian,

 

Perhaps I am misunderstanding your sugestion . . .  I tried fixing the position of both the wrapper div and the content div and setting the overflow to auto but I get the same result.  Whenever I fix the position of either I loose my ability to scroll.  I will post my code incase that would help.  The text in the content is just some stuff I copied for test purposes.

 

body {
  background-color:#333;
  margin: 0;
  padding: 0;
  text-align:center;
  }			
#wrapper{
    position: relative;
    top: auto;
    left: auto;
    margin: 0 auto;
    padding: 0px;
    border: 0px;
background-image:url(../../../wamp/www/Gad_Page/main_background.jpg); background-repeat: no-repeat;
width: 750px;
height:470px;
overflow: visible;
text-align:left;
font-family: Arial, Helvetica, sans-serif;

}
#header {
position: fixed;
margin-right:auto;
margin-left:auto;
padding: 0px;
border: 0px;
background-image:url(../../../wamp/www/Gad_Page/sandstone_logo.jpg); background-repeat: no-repeat;
width: 750px;
height: 95px;
top: 8px;
overflow: visible;
z-index: 1;
}
#breaker {
position: fixed;
margin-right:auto;
margin-left:100px;
padding: 0px;
border: 0px;
width:650px;
height: 8px;
background-color:#993300;
overflow: hidden;
top: 103px;
z-index: 2;

}
#navigation {
position: fixed;
margin-right:auto;
margin-left: 0px;
margin-top: 95px;
top: 103px;
padding: 0px;
border: 0px;
width:100px;
height: 100%;
background-color:#993300;
overflow: hidden;

}
#edge {
position:fixed;
background-image:url(../../../wamp/www/Gad_Page/rock_edge_brown.jpg); background-repeat: no-repeat;
width:100px;
height:95px;
margin-left:0px;
top: 103px;

}
#content {
position: fixed;
border-color:#FFFFFF;
padding-left: 5px;
margin-right:auto;
margin-left:100px;
padding: 0px;
width:640px;
height: auto;
background-color:#FFFFFF;
overflow: auto;
top: 105px;
font-size: 40px; 
font-style:oblique;

}
.style6 {
display:block;
width: 100px;
text-indent: 8px;
font-size: 16px;
text-decoration:none;
color:#FFFFCC;
line-height: 30px;
font-size: 18px;
}
a:link {color:#FFCC99; font-family:Arial, Helvetica, sans-serif; text-decoration:none;}
a:active {color:#FFFFCC; font-family:Arial, Helvetica, sans-serif; text-decoration:none;}
a:hover {color:#FFFFCC; font-family:Arial, Helvetica, sans-serif; text-decoration:none;}
a:visited {color:#FFCC99; font-family:Arial, Helvetica, sans-serif; text-decoration:none;}
ul {
margin: 0px;
padding: 0px;
list-style-type: none;
font:Arial, Helvetica, sans-serif;
font-size:16px;
}
ul a {
display:block;
width: 100px;
text-indent: 8px;
font-size: 16px;
text-decoration:none;
color:#FFCC99;
line-height: 30px;
font-size: 18px;
}
</style>
<!------------------------------------------------------------------------------->
<!--------------------BEGIN BODY------------------------------------------------->
<!------------------------------------------------------------------------------->
<body id="home">
<div id="wrapper">

<div id="header"> </div>
<div id="edge"> </div>

<div id="breaker"> </div>
<div id="navigation"> 
<ul id="main_nav">
<li><span class="style6">Home</span></li>
<li><a href="people.html">People</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="pubs.html">Pubs</a></li>
<li><a href="field_sites.html">Field Sites</a></li>
<li><a href="lab.html">Lab</a></li>
<li><a href="courses.html">Courses</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="dept_home.html">Dept Home</a></li>
</ul>
</div>
<div id="content"; style="border-left: 8px #993300 solid;">
<p>   1. Their basic structure is the same as an HTML comment . Therefore all other browsers will see them as normal comments and will ignore them entirely.
   2. Explorer Windows, though, has been programmed to recognize the specialsyntax, resolves the if and parses the content of the conditional comment as if it were normal page content.
   3. Since conditional comments use the HTML comment structure, they can only be included in HTML files, and not in CSS files. I'd have preferred to put the special styles in the CSS file, but that's impossible. You can also put an entire new <link> tag in the conditional comment referring to an extra style sheet.

Example

Below I added a lot of conditional comments that print out messages according to your Internet Explorer version.

Note however, that if you use multiple Explorers on one computer, the conditional comments will render as if all these Explorer versions are the highest Explorer version available on your machine (usually Explorer 6.0).
Test

Below are a few conditional comments that reveal the Internet Explorer version you're using. If you don't see any, you're not using Internet Explorer.

Code

The syntax I use is:

According to the conditional comment this is Internet Explorer</p>
</div>

</div>
</body>
</code>