0

I am trying to achieve a scrolling body with fixed header and fixed sidebar. I think I am almost there except that the body scrolls on top of the header. I wish I could simply increase the z-index of the header in relation to the body but this doesn't work since the header is mostly transparent.

Here is the site: link

Any ideas? Thanks

Edit: I should clarify that I want the content to be invisible as it scrolls underneath the header, not simply as a layer beneath it.

yajus
  • 69
  • 2
  • 7

2 Answers2

1

Use the same background image for your body and header, but with background-position:fixed. This way, the header will have opacity for the content to scroll beneath and be hidden. Using fixed position will ensure that the two images appear seamless.

On a side note, I am unable to view the entire sidebar on your site, you may want to reconsider using such a rigid layout.

Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
  • I'm hoping there is another approach because this would add over 1mb of data to load, since our background images tend to be large files. – yajus Mar 30 '11 at 21:17
  • 1360x768 I just tested the technique I posted and it works, you just need to declare a z-index for #the_header and make sure it takes up the entire top area, flush against the edge of the viewport. Use padding in this case and make sure it's at `top:0` or content will be visible around the sides and top of the header. – Wesley Murch Mar 30 '11 at 21:19
  • It only downloads the file once, you can use it as much as you want without worrying about file size. Once its downloaded, it won't download again just because you used it 17 times in your layout. – Wesley Murch Mar 30 '11 at 21:20
  • OK if that is the case then it will be great. I'll test this solution (I'm not as fast as you ;) – yajus Mar 30 '11 at 21:26
1

Here is your code:

#thebody {
    display:inline-block;
    position:relative;
    width:984px;
    margin-left: 0px auto;
    margin-right: 0px auto;
    font-size:24px;
    text-align:center;
    height:100%;
    z-index:-1;
}

#theheader {
    display:inline-block;
    font-size:26px;
    width: 984px;
    margin-left: 0px auto;
    margin-right: 0px auto;
    background-color:none;
    clear:both;
}

The way z-indexs work is, anything to be included in the layering needs to also have an z-index set. So, in your code right now, only #thebody is set. Add this to #theheader:

#theheader {
    display:inline-block;
    font-size:26px;
    width: 984px;
    margin-left: 0px auto;
    margin-right: 0px auto;
    background-color:none;
    clear:both;
    z-index: 10;  /* addition */
}

This places #theheader over the #thebody. Good luck, and let me know if you have questions.

TNC
  • 5,388
  • 1
  • 26
  • 28
  • @TNC: Position relative will not work, he's using position fixed of course. You don't need position relative for z-index to work, just **any** position declaration. – Wesley Murch Mar 30 '11 at 21:22
  • I didn't see a position in there, which is why I put it. I'll remove it, if it's there already. – TNC Mar 30 '11 at 21:23
  • 1
    So now the the content scrolls underneath the header, but it is still visible as it passes underneath. Take a look: [link](http://zoomout.in/documents/radioguide/rcgtest.html) – yajus Mar 30 '11 at 21:23
  • Edit: I should clarify that I want the content to be invisible as it scrolls underneath the header, not simply as a layer beneath it. – yajus Mar 30 '11 at 21:25
  • @yajus: Please see my comments, I have already addressed this. You need to set the background image for the header and use `background-position:fixed` – Wesley Murch Mar 30 '11 at 21:26
  • I'm not sure what you're constraints are, but you could put the scrolling on the div, versus the entire page. Otherwise, your header will need a background image in it. Unfortunately, there's no way of masking a div in HTML (would be cool though). Hope this helps. – TNC Mar 30 '11 at 21:28