Hey,

 

I've hit a bit of a road-block and internet research is getting me nowhere so I'm hoping someone here can help me?

 

Test Page

 

This is the test page (ignore the mess, I've been trying to get this sorted before I lined everything up etc). Basically I want it so that when you scroll down, the header stays at the top of the page but the content disappears underneath it. At the moment, you can see the content 'through' the header, I want the header to have a 'solid white' background and I've no idea how to solve the problem? There seems to be a few javascript-based solutions online but I'm loathed to use something that some browsers won't recognise and I feel that there must be a CSS solution somewhere? I've tried a bunch of different ways but nothing is working, is there a simple solution I've overlooked?

 

Any help on this would be much appreciated!

 

Thanks,

 

Adam.

The beauty that is CSS absolute positioning with a bit of z-index thrown in.

It looks like you've defined almost everything to be transparent in your 'reset.css' style sheet. Removing 'background: transparent;' could be a quick fix to your problem.

Hey,

 

Thanks for the replies! I've tried removing the transparency from the reset.css file but it doesn't seem to have worked, I've been playing around with the z-index values of the wrapper for each part of the page, my most recent attempt it below but the problem still persists. Any further advice on this would be appreciated, I don't seem to be getting very far...

 

Thanks again for the suggestions!

 

Adam.

 

#header_wrapper {
z-index: 10;
top: 0;
position: fixed;
background-image: url('../images/diy/whitesquare.png');
background-repeat: repeat;
}

#diy_center_wrapper {
width: 1000px;
margin-top: 140px;
margin-right: auto;
margin-left: auto;
z-index:0;
}

Your code is an absolute state. Why are you doing this?

 

right:5px;

 

Use floats man!

 

Float your header_wrapper left, give it 100% and 150px height.

 

It's a temporary fix but you seriously should consider re-writing your code, it's such a mess that no wonder you're having issues. For example, why is your header written below the content? It should be at the top. Writing clean code often helps you avoid having these kind of problems.

Edited August 1, 201115 yr by brightonmike