Scrolling Header Help

I am having some trouble trying to set my header to scroll with my page.
I’m using Dreamweaver with a template I have recently purchased, I have tried some code I found online but It’s not changing anything.
I set the header to fixed and it’s working but collides into my slideshow that was originally below my header.

Any help would be greatly appreciated, thank you!

If you set it to position:fixed then it should scroll with the content.

However high the header is, say it is 200px, you need to set (assuming you have a parent that holds header, whether a wrapper or <body>) a top padding.

Aka if your setup is this

The wrapper needs a 200px top margin. Thoug hit’s impossible to give you a clea ranswer because you haven’t given us any code to work with or a site :).

I appreciate the help though I am still a little bit confused, I attached some screen shots to give you a better Idea of what im working with,
thank you for the help!

See, I didn’t have enough details and I assumed that the header didn’t include the slideshow.

Could we have a site eto look at? That HTML snippet isn’t enough. We need full HTML/CSS. Enough to reproduce the issue. here you go I haven’t really set that much up yet, I just threw it up on one of my domains, let me know if this helps thanks!

Can’t test, but on #header…heck, how tall is it?

Give #top_container a top padding = to how tall #header is. And then you can set the slideshow to position:fixed and top:(however tall #header is)

eehh, the height of the #header is 104 px, I just tried everything you said but once I got set the slideshow to fixed its all jumbled together again, this is frustrating lol


What are you trying to do exactly?

Do you want a fixed positioned header or have you just got rid of one?

If you want the header fixed then set it to position:fixed.You’ll also need a background-color and z-index to keep it on top of content and to allow content to scroll underneath.


#header {
  [B]  background:#FFFFFF;[/B]
    height: 104px;
  [B]  position: fixed;[/B]
    width: 960px;
 [B]   z-index: 999;

Then initially you will need to pad the slideshow to make it appear below the header to start with.

#slideshow {
    background-color: #EBEBEB;
    float: left;
    height: 304px;
[B]    padding-top: 110px;[/B]
    width: 960px;

You would however be better of making the header flush with the top of the window because you will see the content scrolling underneath otherwise.

What Paul did is essentially what I recommended you try, thanks Paul for writing it up :).

I assumed from his posts he wanted a fixed header with it not clashing into the content, aka it needed to be padded.