Hi all,

 

I'm putting together a horizontal scrolling website for a friend.

 

So far, I have managed to fix the header in place, create a content area that is centred in the visitors browser, and use some javascript to smooth the movement between the content areas.

 

When the content grows further down the page you can, as you'd expect, scroll down to view the rest of the content. However, the content then scrolls over the top of my fixed header.

 

Is it possible to have the header scroll vertically along with the content instead of it overlapping, while retaining the header in its fixed position?

 

I tried replacing the 'fixed' header property with 'absolute'; but then the header wouldn't stay in place when scrolling horizontally to the other content sections.

 

As you can tell, I'm very new to CSS and would really appreciate some help and advice.

 

You can view my progress so far here: http://darrenbond.com/hz-layout/

You just need to delete:

 

position:fixed;

 

In here:

 

#header {
width:100%;
height:40px;
margin:0;
padding:0;
position:fixed;
}

something like this you mean? http://www.dynamicdrive.com/dynamicindex1/

 

or you could leave it where it is and up its z-index so it sits on top?

You just need to delete:

 

position:fixed;

 

In here:

 

#header {
width:100%;
height:40px;
margin:0;
padding:0;
position:fixed;
}

 

That doesn't work because the page is extremely wide and he wants the header to stay where it is when scrolling horizontally but scroll with the page vertically. Deleting position: fixed means that the header scrolls out of view when you look at the rest of the page.

 

This probably needs position: fixed for the horizontal position but not vertically. I can do the reverse - fix vertically but scroll horizontally but I can't make it do what he wants.

 

The best thing to do might be to have it fixed in both directions with a background and with no space (margin) at the top so when you scroll vertically the content goes behind the header but you don't see it through or above the header. You will see the header all the time as it won't scroll vertically. The header will stay fixed when scrolling horizontally.

Thanks for taking the time to comment everyone.

 

That doesn't work because the page is extremely wide and he wants the header to stay where it is when scrolling horizontally but scroll with the page vertically. Deleting position: fixed means that the header scrolls out of view when you look at the rest of the page.

 

Yes, that is exactly what happens if you remove the fixed position.

 

The best thing to do might be to have it fixed in both directions with a background and with no space (margin) at the top so when you scroll vertically the content goes behind the header but you don't see it through or above the header. You will see the header all the time as it won't scroll vertically. The header will stay fixed when scrolling horizontally.

 

Excellent suggestion. I have removed the margin on the header, increased its height and created a background image. This achieves the same appearance as before. However, the content scrolls over the top of the header. Any idea why? Also, I'm not sure what you mean when you say "have it fixed in both directions".

 

Thank you very much.

Duh. I didn't spot the scroll bar at the bottom, I just used the navigation menu to scroll through the content. So I didn't understand what you meant at first. To be honest I think this is a usability issue rather than a technical one. I don't remember seeing a website asking the user to scroll both horizontally and vertically. If you are serious about using this method I would try it on a few people to see if they 'get' what you are trying to achieve. Personally I find it confusing, but then I have a very simple mind.

 

Remember - form follows function!

Duh. I didn't spot the scroll bar at the bottom, I just used the navigation menu to scroll through the content. So I didn't understand what you meant at first. To be honest I think this is a usability issue rather than a technical one. I don't remember seeing a website asking the user to scroll both horizontally and vertically. If you are serious about using this method I would try it on a few people to see if they 'get' what you are trying to achieve. Personally I find it confusing, but then I have a very simple mind.

 

Remember - form follows function!

 

Yeah, I talked through all the possible usability issues with my friend, but he insisted on the design. I got a few people to try it, and like you, they all used the navigation menu to get to the different sections of the content, so I'm confident most people won't have a problem using the site.

 

Also, I added 'z-index:1;' to the header and now the content scrolls underneath it.

 

Thanks for all your comments.