SitePoint Sponsor

User Tag List

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

    Sticky Footer, Or Just Footer

    So, just recently I have attempted a new sticky footer design based on the article written by PaulO'B and I wanted to see if I have learned anything by the previous experiences. Paul, if you're available... can you peek at the link below and let me know if this is accurate?

    LINK-
    http://www.securehostserver.info/proton/


    The only thing that I do not understand is that in this link above I did not apply a negative margin-top (that measures the height of the footer-container) in order to make it work. Am I missing something?

    Thanks again for being a great teacher!

    Todd
    Todd Temple > T2 Design

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,579
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Todd, Here's an easy test you can perform while awaiting Paul's response.

    Open the following page and see where the footer lies.

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Proton Power | Cellulose to Hydrogen Power</title>
    <link href="http://www.securehostserver.info/proton/c/style.css" rel="stylesheet" type="text/css" media="screen">
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Roboto:700' rel='stylesheet' type='text/css'>
    </head>
    <body>
    <div id="outer">
        <div id="header-container">
          <div id="stripe-container">
                <div id="stripe">
                    <div id="header">
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">About Us</a></li>
                            <li><a href="#">Technology</a></li>
                            <li><a href="#">Media</a></li>
                            <li><a href="#">Investors</a></li>
                            <li><a href="#">Careers</a></li>
                            <li><a href="#" class="last">Contact Us</a></li>
                        </ul>
                        <h1 id="logo"><a href="#">Proton Power</a></h1>
                        <a href="#" class="intranet">Employee Login</a>
                    </div><!-- end #header -->
                </div><!-- end #stripe -->
            </div><!-- end #stripe-container -->
        </div><!-- end #header-container -->
    </div><!-- end #outer -->
    <div id="footer-container">
        <div id="footer">
            <h3><a href="#">Proton Power</a></h3>
            <div id="statement">
                <h4>Offering Renewable Solutions</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla neque felis, viverra sit amet vehicula et, gravida volutpat sapien. Nunc pulvinar, neque id suscipit tincidunt, lorem eros. Nulla ultrices lobortis pretium.</p>
            </div><!-- end #statement -->
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Technology</a></li>
                <li><a href="#">Media</a></li>
                <li><a href="#">Investors</a></li>
                <li><a href="#">Careers</a></li>
                <li><a href="#">Contact Us</a></li>
                <li class="last"><a href="#">Employee Login</a></li>
            </ul>
        </div><!-- end #footer -->
    </div><!-- end #footer-container -->
    </body>
    </html>

  3. #3
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ronpat, I see what you mean. I went ahead and added a test page with your example and then added a negative bottom margin to the #outer and it does stick to the bottom, but when the viewport is decreased in height - the footer items slide onto the header items.

    LINK-
    http://www.securehostserver.info/proton/index3.php
    Todd Temple > T2 Design

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,579
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Todd, I believe the following changes to your css should fix you up:
    Code:
    #outer {
        margin:0 0 -402px;  /* CHANGE */
    }
    
    #header-container {
        border-top:402px;  /* ADD */
    }
    
    #footer-container {
        margin:0;          /* DELETE {margin:90px 0 0} entirely or set to zero */
        clear:both;        /* ADD */
    }
    If you need space above the footer-container, you can add padding-bottom to #outer instead.

  5. #5
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ronpat, I made these changes to the stylesheet but it seems to still look a bit off. Try the original link below and notice where the footer-container stops right beneath the banner image. Weird.

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

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,579
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Todd, the solution that I posted is incorrect. Don't know how I dreamed it up nor why I thought it worked.

    The following will work correctly:
    Code:
    #outer {
        margin:-402px 0 0;  /* CHANGE */
    }
    
    #header-container {
        border-top:402px solid transparent;  /* CHANGE */
    }
    
    #footer-container {
        margin:0;
        clear:both;
    }
    If you need space above the footer-container, you can add padding-bottom to #outer.

    Sorry for the goofy post.

  7. #7
    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 ronpat View Post
    The following will work correctly.
    Works! Thanks ronpat for looking into this for me. I really appreciate it!
    Todd Temple > T2 Design

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,579
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Todd Temple View Post
    Works! Thanks ronpat for looking into this for me. I really appreciate it!
    You're welcome, Todd. Thanks for the feedback. Glad to know it works, this time.


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
  •