Grow your CSS skills. Land your dream job.

Sticky Footer and Transparent Header

  • # February 1, 2010 at 1:10 pm

    Hello,

    I am desperately trying to be a good designer and use CSS layouts and doing ok (thanks to awesome community forums), but I am in need of a leg up.

    I love the Sticky Footer solution found at http://www.cssstickyfooter.com. I am trying to use it on a site but I’m hitting a little wall. I have set a repeating background image in my body and I’m using a transparent .png in my header. I know need to set a background color that will reach all the way down to my footer that doesn’t show up under my header. Here’s the site… http://www.aband3.com.

    Last night I dreamed about maybe putting my header outside of the wrapper, that way I could just assign the wrapper a background color, but that didn’t work (at least for me).

    Do you need to see my code?

    Thanks,

    Steffany

    # February 1, 2010 at 1:28 pm

    I’m not sure I understand your problem. Do you have a screenshot of what the site should look like? Because it looks fine to me.

    # February 1, 2010 at 2:07 pm

    There, I removed the graphics on the site to show that if the content is just a line or two, the background color doesn’t go all the way to the footer.

    http://www.aband3.com

    # February 1, 2010 at 10:01 pm

    Give this a try :D

    CSS:

    * { margin: 0; padding: 0; }
    
    html, body { 
                     height: 100%; 
                     text-align: center;
                      }
    
    body  {
                 background-image: url(../yellow_back.png); 
               }
    #wrap { height: auto;
                min-height: 100%;
               }
    #outer { 
                text-align: left; 
                width: 900px;
                margin: 0 auto;
                background: #fff;
                padding-bottom: 100px;
                    }
    
    #header   {
               background: transparent url(../images/ac3_circle_header.png) no repeat scroll center top;
               height: 200px; 
               width: 900px;
               margin: 0 auto;
                 }
    #sidebar {
                   float: left;
                   width: 200px;
                }
    #main   {
                  float: right; 
                  width: 700px; 
                }
    #footer   {
                  background: transparent url(../images/ab3_circle_footer.png) no repeat scroll left bottom;
                  clear: both;
                  height: 100px;
                  margin: auto;
                  width: 900px;
                  position: relative;
                  margin-top: -100px;
                   }
    /* CLEAR FIX*/
    .clearfix:after {content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;}
    .clearfix {display: inline-block;}
    /* Hides from IE-mac */
    * html .clearfix { height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */</div>
    </div>
    

    and the html:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>A B and 3</title>
        <meta name="Description" content="a b and 3 is dedicated to bringing the baby blanket insustry into a new level of creativity with a dash of minky fabric and a pinch of great modern print." />
        <meta name="Keywords" content="baby, blanket, minky, modern, fabric, cooridinating, soft, twins, handmade, hand made, hand-made, custom" />
        <link rel="stylesheet" type="text/css" href="css/ab3_sticky.css" />
    <!--[if (lte IE 6)|(gte IE 8)]>
    <style type="text/css">
    #outer {height:100%;display:table;}
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="wrap">
    <div id="header">&nbsp;&nbsp;
            Home   |   About   |   Contact   |   My Account   |   Shopping Cart
    
        </div>
    <div id="outer">
    
            <div id="sidebar">
                <img src="images/ab3_sidebar_blankets.png" alt="" />
                Minky
    
                Chenille
    
    
                <!-- Organic
    
                Pieced Quilts
    
                Custom
     -->
                <img src="images/ab3_sidebar_gifts.png" alt="" />
                Vannah Faire
    
                Shower Bundles
    
            </div>
            <div id="main">
                <img style="padding-top:25px; padding-left:29px;" src="images/ab3_circle_divider.png" alt="" />         
                With a shorter #main div, the background color doesn't go to the top of the footer.
    
    
                <img style="padding-bottom:25px; padding-left:29px;" src="images/ab3_circle_divider.png" alt="" />
            </div>
    
    </div> 
    </div>
    <div id="footer">
    
    &nbsp;
    &nbsp;
    &nbsp;
    &nbsp;
    Copyright &copy; 2010 a * b * and * 3
    
    
    </div>
    </body>
    </html>
    

    I’ve left out the irrelevent stuff in the CSS. You can fill in the blanks. I hope this helps.

    # February 2, 2010 at 11:19 am

    Truth, thanks for taking time to work up a possible solution, but I’m afraid it didn’t act as I wanted it to. I really like the ‘sticky footer’ and with your solution, the footer didn’t stick, it was just pushed down. Here is you code in action… http://www.aband3.com/index-tricks.htm.

    # February 2, 2010 at 1:23 pm

    I’ve edited the code in my above post. It’s pretty much verbatim from the cssstickyfooter website. It works for me. Give it a shot.

    # February 2, 2010 at 5:29 pm

    Thank you again for looking back, but I feel I am still missing something. I again posted your code solution and I think I am missing something because the white background of my #inner div is still not meeting my footer when the content is small. Did I apply your css correctly?

    Here is the link again to your solution on my site… http://www.aband3.com/index-tricks.htm.

    Steffany

    # February 2, 2010 at 6:05 pm

    Try just increasing the padding on the #outer div . If you increase it too much it will push the footer down but try 40 or 50 px.

    # February 2, 2010 at 6:21 pm

    Is padding the only way? I was really hoping that the Sticky Footer would help me avoid adding a custom padding on each page.

    # February 2, 2010 at 6:49 pm

    I had it working before without the extra padding but I can’t seem to find the problem now. Try using that same amount of padding on all your pages though.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".