SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Footer Links Won't Stay Inside Sticky Footer

    I have a unordered list for a footer navigation menu that is not showing up at all. I think it may have something to do with a sticky footer that I am trying to add. Can someone help me out?

    LINK-
    http://www.securehostserver.info/rvf/
    Todd Temple > T2 Design

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The links are not appearing at all because of the text-indent. When you get rid of that, they will appear at the very top of the footer DIV.

    Code css:
    #footer-nav li a, #footer-nav li a:link,  #footer-nav li a:visited {
    color:#333333;
    display:block;
    height:39px;
    line-height:39px;
    text-decoration:none;
    /* text-indent:-9999px; REMOVE */
     
     
     
    }

    This is probably because you copied this from somewhere where they were using images, which is what this text-indent trick is normally used for, so that there is still text in the link (for search engines and accessibility purposes).

  3. #3
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    The links are not appearing at all because of the text-indent. When you get rid of that, they will appear at the very top of the footer DIV.
    Thanks! Now if I could just figure out how to get them inside the sticky footer instead of on top of it. Do you know how?
    Todd Temple > T2 Design

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    They are in it, it's just that the footer DIV is very tall and its background image has a huge white area at the top. You don't even need the background image. Just give the DIV the blue background and a nice thick grey border-top.

  5. #5
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just noticed that the background image had about 50 or so pixels of white on the top so that visually made it look like it was being pushed further than it should have been.

    I have added your fixes and I now have a new issue. I have added anchor tags to the footer navigation but you are unable to click on them. I think it is because of the div #push. Can you tell me what CSS fix would make this work? Z-index?
    Todd Temple > T2 Design

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,567
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yup the push container is the problem. Position:relative can fix this
    Code:
    .footer-container{position:relative;}
    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
  •