position a div below a fixed top div.

Discussion in 'Web Design' started by clayguthrie29, Aug 16, 2013.

to remove all ads.
  1. clayguthrie29

    clayguthrie29 New Member

    Messages:
    10
    Hello all,

    I'm attempting to position a div as 'fixed' at the top of a webpage i'm working on. The top div which would be the nav and/or logo area would be fixed at the top of the screen and would not scroll. The second div, the content div, would be placed directly below that div and so on down the page. Problem is, the second div slides up behind the fixed div rather than staying below it. How do i fix this? Here is an example:

    http://jsfiddle.net/dcacM/

    Notice the 2nd div, the gray one, is 300px tall however it only shows 200px below the the red div and the first 100px is hidden behind the red.

    I have tried adding a top margin of 100px to the gray div, but it causes positioning problems when i have a link that points to another section of the same page. Thanks in advance.
     
  2. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
    Add a TOP margin to the first static or relative element following the position fixed element to restore the document flow to it's natural order
     
  3. clayguthrie29

    clayguthrie29 New Member

    Messages:
    10
    The margin-top works unless you have links in your page that link to other sections of the page.

    For example if you have a link index.php#about the page will scroll to that section of the page, but it will position itself 100px below the top of the section... which cuts off some of the content in that section.

    Does that make sense?
     
  4. Apokalupsis

    Apokalupsis New Member

    Messages:
    20
    Last edited: Aug 18, 2013
  5. clayguthrie29

    clayguthrie29 New Member

    Messages:
    10
    But then the top banner isn't fixed to the top of the browser window anymore.
     
  6. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
    Well that is up to you and how you use document fragments.


    Using positioning correctly presents no problem for "bookmarking" links.

    examples.webmaster-talk.eu/chris-hirst/css/positioning/fixed/

    http://examples.webmaster-talk.eu/chris-hirst/css/positioning/absolute/
     
  7. Apokalupsis

    Apokalupsis New Member

    Messages:
    20
    Which browser are you using? In all that I've tested it in, it stays at the top of the window.

    Also, I'm not sure why you'd want the top banner to be "fixed" positionally anyway. It doesn't seem like it takes into account the various resolutions out there that people use.

    Here's a wireframe I've been messing with. It uses a header, nav area, various content, footer, etc... all w/o needing to use "position" and it is responsive too!

    http://jsfiddle.net/Apokalupsis/YrxeZ/

    So again, I'm just not sure why you feel the need to use such positioning as described in your posts. Is it an older browser being used or something?
     
    Last edited: Aug 18, 2013
  8. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
    It's to keep the banner visible no matter how far down the document the user scrolls.
     
  9. Apokalupsis

    Apokalupsis New Member

    Messages:
    20
    Ah! Ok, now I get what he's trying to achieve. I missed post #3 earlier.

    Can that be done with CSS only? I know it can with CSS + JQuery. I've also done a similar thing for a clickable bg image displayed in the lower right of the window (with CSS only). But having a header do that with CSS only...it's a bit tricky to say the least.
     
    Last edited: Aug 19, 2013
  10. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    A fixed header with position fixed is hardly tricky.

    and once you've fixed your margin errors then it'll not reposition up 100px like it currently is.
     
  11. Apokalupsis

    Apokalupsis New Member

    Messages:
    20
    A couple things...

    It isn't merely a fixed header. It's a fixed header that anchors to areas of the same page and does so only using CSS (no JS or JQ).

    Also, doing this specific task may not be tricky to the more seasoned designers, but obviously it is tricky enough to the op to create a thread to find out how to do it. In addition, there hasn't been any real solution yet outside of theory.

    So why not provide some helpful tips as a seasoned designer instead of just saying "it's easy" and "fix the errors"? Neither are hardly productive or beneficial to moving the op further towards resolving the issue it seems.
     
    Last edited: Aug 19, 2013
  12. clayguthrie29

    clayguthrie29 New Member

    Messages:
    10
    I likely didn't clarify myself well initially, but you guys definitely have it now. This was a perfect explanation:

    "It isn't merely a fixed header. It's a fixed header that anchors to areas of the same page and does so only using CSS."

    I'm not greatly seasoned at CSS, I've tinkered for years and done some websites for people i know. But within the last year I've learned CSS ( late i know ). Overall it's been a pretty easy learn, but I'm a quick learner.

    What would be the downside to using jquery to accomplish this? I understand you can use a anchor link and offset it by x pixels which i think would fix my issue? Would it be preferred to find a solution in CSS or would it be advisable to implement jquery to fix this?

    Thanks everyone for the tips and such.
     
  13. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    http://jsfiddle.net/phreaddee/7AWDY/8/

    each of the anchors has a padding top that is offset by the height of the header (plus 10px) so the flow of the document is not disturbed id two, three and four have a negative top margin equal to that of the padding.
    on click each of the anchors will be positioned just below the header.
     
  14. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
    Loading the overhead of a 'framework' that you do not need.
     
  15. clayguthrie29

    clayguthrie29 New Member

    Messages:
    10
    Thanks Phradee and Chris! It's much appreciated.
     
  16. Apokalupsis

    Apokalupsis New Member

    Messages:
    20
    Great explanation, thank you.

    Combining yours and the explanation from another designer (CSSgirl) and spending some time just experimenting (perhaps one of the best ways to learn), I was able to add a nav bar and fixed footer as well.

    http://jsfiddle.net/Apokalupsis/F4nyf/4/

    However, I do have a few questions with regards to how CSS operates.

    I understand what these lines do and why they are necessary:

    PHP:
    01#top, #one, #two, #three, #four {padding-top:145px;margin-top:0;}
    02#top, #one, #two, #three, #four {margin-top:-145px;}
    But I want to clarify a couple things if I could...

    (1) Is "margin-top:0" in line 01 just a "reset" of the margin-top? In other words, is CSS reading both lines it as "Ok, reset margin-top to '0' on these id's, then give each of them a margin-top of 145?"

    (2) If so, would this be redundant if we had a CSS reset of all elements/attributes at the top of the .css file?

    (3) Is it best practice to issue a reset of all css at the top of the .css file...or do it as needed (assuming that is what is being done in line "01" above)?
     
    Last edited: Aug 19, 2013
  17. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,611
    Yes and yes.

    Style rules cascade, so the last applicable rule take precedent.

    "resets" are overused and not particularly necessary with modern browsers, they are a 'legacy' from the days of badly behaved browsers
     
  18. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    HTML:
    #one, #two, #three, #four {padding-top:110px;margin-top:0;}
    #two, #three, #four {margin-top:-110px;}
    
    I could have also just added #one {margin-top:0;}

    but #one as the first item does not need a negative margin top, otherwise it'll sit under the header.
     

Share This Page