SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    636
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Sticky Footer and Nav Hover

    Hey Guys,

    Just need help figuring out how I can make my footer a sticky footer so its always after all the content and my background doesnt show up after the footer like it does on larger screens for some pages.

    Also, on my Nav say on the homepage when your on the homepage I have orange bar underneath the page you are on but when I rollover other pages it shows up which I want but if your on home and roll over Home it shows up twice the border and nudges the slider down, any way I can edit my CSS to fix this issue.

    Heres the link to the site...

    http://184.154.226.19/~bobswoo6/

    Thanks guys,

    Mike

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,107
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Sticky footers are tricky, so you have to get the code right. Try to follow this tutorial carefully:

    http://www.sitepoint.com/forums/show...66#post1239966

    However, my preferred option is just to set the body background to the color of the footer, so if there's space at the bottom, the footer color extends right down (in your case, orange). Then you have to put a white bg color on the main area, though.

    The double line on the nav is caused by this:

    Code:
    .selected {
      color: black !important;
      border-bottom: 5px solid #D9531E !important;
    }
    It would be better to have the .selected class on the <a> rather than the <li>, and then you wouldn't get this conflict.

    Maybe change it to

    Code:
    .selected a {
      color: black !important;
      border-bottom: 5px solid #D9531E;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    636
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph that worked well the double line on the nav.

    Now just to add the sticky footer, really want to solve it as it being a sticky footer.

    I've done it before in the past just seem to be having more issues with this site for some reason.

    Thanks,

    Mike

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    This is probably a naive question, but why do you want to put a sticky footer on this site? The pages that I've looked at seem to be taller than most monitor windows, so the behavior of a sticky footer would never come into play. "Tips and Resources" and "Wood Fireplaces" might fit on a vertically oriented screen, maybe, depending on rez. Just curious.

  5. #5
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    636
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    That is the reason on my screen it doesnt go to the bottom cause I'm on a large monitor.

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Try the following:

    On the index page, add the following new div below the <body> tag:
    Code:
    <div id="outer">
    The new div is closed by a stray "close wrapper" tag.

    On your css sheet, make the following changes:
    Code:
    below line 19:
    
    body:before {    /* Opera and IE8 "redraw" bug fix */
        content:"";
        float:left;
        height:100%;
        width:0;
        margin-top:-32767px;
    }
    
    #outer {
        min-height:100%;
        margin:-70px auto 0px;    /* negative of footer height */
    }
    
    Line 126:
    
    #header {
        height: 122px;
        background: #FFF;
        margin: 0 auto;
        border-top:70px solid #fff;    /* same value as footer height */
    }
    
    Line 285:
    
    .copyright {
        width:285px;
        margin:0px 0px 0px 650px;    /* this probably fixes the original culprit */
    }

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,107
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by mbond5 View Post
    Now just to add the sticky footer, really want to solve it as it being a sticky footer.
    I gave you lins above for a sticky footer, and also suggested an alternative. Did you not see the comments?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  8. #8
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    636
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    EDIT...

    Thanks for the help, solved the issue it was issue with my helpful tips page I missed a div causing it to mess up.

    Thanks guys!

  9. #9
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i tried many css sticky footers and they dont render correctly when resizing the window quickly, try this sticky footer worked perfectly for me,

    hope this helps.


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
  •