SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Location
    New Jersey
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry 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!

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    wrapper
    header
    endheader/wrapper

    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 .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Member
    Join Date
    Nov 2011
    Location
    New Jersey
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!


    upward code.jpgheader pix.jpg

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Member
    Join Date
    Nov 2011
    Location
    New Jersey
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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 tophowever tall #header is)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Member
    Join Date
    Nov 2011
    Location
    New Jersey
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    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.

    e.g.
    Code:
    #header {
        background:#FFFFFF;
        height: 104px;
        position: fixed;
        width: 960px;
        z-index: 999;
    }
    Then initially you will need to pad the slideshow to make it appear below the header to start with.

    Code:
    #slideshow {
        background-color: #EBEBEB;
        float: left;
        height: 304px;
        padding-top: 110px;
        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.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •