ironxage — 2012-02-21T08:47:14-05:00 — #1
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!
ryanreese — 2012-02-21T09:10:04-05:00 — #2
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 :).
ironxage — 2012-02-21T09:39:40-05:00 — #3
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!
ryanreese — 2012-02-21T10:23:48-05:00 — #4
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.
ironxage — 2012-02-21T11:16:00-05:00 — #5
http://centercitymanagement.com/ 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!
ryanreese — 2012-02-21T12:00:11-05:00 — #6
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)
ironxage — 2012-02-21T12:32:25-05:00 — #7
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
paulob — 2012-02-21T15:16:30-05:00 — #8
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.
[B] position: fixed;[/B]
[B] z-index: 999;
Then initially you will need to pad the slideshow to make it appear below the header to start with.
[B] padding-top: 110px;[/B]
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.
ryanreese — 2012-02-21T22:32:07-05:00 — #9
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.