- This topic is empty.
-
AuthorPosts
-
February 1, 2010 at 1:10 pm #27824with2fsMember
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 #70319TheDocMemberI’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 #70343with2fsMemberThere, 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.
February 1, 2010 at 10:01 pm #70368truth04MemberGive 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"> 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"> Copyright © 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 #70377with2fsMemberTruth, 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 #70379truth04MemberI’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 #70416with2fsMemberThank 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 #70418truth04MemberTry 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 #70419with2fsMemberIs 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 #70421truth04MemberI 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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.