SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sticky Footer Image with Header

    So I've been sitting here for the past few hours trying to figure this (what seems to be) simple issue. I'm trying to create a page that has a header, navbar, main div, and then a sticky footer image at the bottom. However, I'm having issues when it comes to the content div (100% height). I finally got it working, but now my header is causing problems. If I put it inside the wrap, it's got the background color of the wrap, which I don't want. Putting the background color anywhere else doesn't work. If I put it outside the wrap, it forces my page to scroll(?) when it doesn't need to and causes problems with my background gradient. I'm going crazy! Any help?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    
    
    </head>
    
    <body>
    
    <div id="header">
                <div id="logo">
                    <img src="layout/logo.png" alt="Live Equian" height="50" width="200" />
                </div> <!--END LOGO-->
                
                
            </div> <!--END HEADER-->
    
    <div id="navigation">
        </div> <!--END NAVIGATION-->
    
    
    <div id="wrap">
    
    
    	<div id="main">
        
        
        <div id="contentwrapper">
         <p>Your website content here.</p> 
        </div>
    
    	</div>
    
    </div>
    
    <div id="footer">
    
    </div>
    
    </body>
    </html>
    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    
    * {margin:0;padding:0;} 
    
    /* must declare 0 margins on everything, also for main layout components use padding, not 
    vertical margins (top and bottom) to add spacing, else those margins get added to total height 
    and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
    
    html, body {
    
    height: 100%; 
    min-height:100%;
    
    
    /* GRADIENT BACKGROUND
    thanks to http://blog.fakedarren.com/2010/01/cross-browser-css-gradients/ */
    /* and http://www.puremango.co.uk/2010/04/css-gradient/ */
    /* fallback (Opera) */
    background: #8cb6e9;
    /* Mozilla: */
    background: -moz-linear-gradient(top, #8cb6e9, #e0effc);
    /* Chrome, Safari:*/
    background: -webkit-gradient(linear,
    left top, left bottom, from(#8cb6e9), to(#e0effc));
    /* MSIE */
    filter: progid:DXImageTransform.Microsoft.Gradient(
    StartColorStr='#8cb6e9', EndColorStr='#e0effc', GradientType=0);
    
    
    
    
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    
    
    
    }
    
    #wrap {
    min-height: 100%;
    
    margin: 0 auto;
    width:1000px;
    	background-color:#FFFFFF;
    border-right:1px solid #a89d6d;
    border-left:1px solid #a89d6d;
     }
    
    #main {overflow:auto;
    	padding-bottom: 116px;
    	height: 100%;
    	min-height: 100%;
    
    	}  /* must be same height as the footer */
    
    
    
    
    #footer {position: relative;
    	margin-top: -116px; /* negative value of footer height */
    	height: 116px;
    	clear:both;
    	
    background-image:url(layout/footer.png);
    width:100%;
    background-position:center;
    	
    	
    	} 
    
    /*Opera Fix*/
    body:before {/* thanks to Maleika (Kohoutec)*/
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/* thank you Erik J - negate effect of float*/
    }
    
    
    
    /* IMPORTANT
    
    You also need to include this conditional style in the <head> of your HTML file to feed this style to IE 6 and lower and 8 and higher.
    
    <!--[if !IE 7]>
    	<style type="text/css">
    		#wrap {display:table;height:100%}
    	</style>
    <![endif]-->
    
    */
    
    
    #contentwrapper {
    
    
    height:100%;
    min-height:100%;
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hi carleihar. Welcome to SitePoint.

    Sticky footers are pretty tricky, as CSS was not really designed to handle them, though there are workarounds. Setting height to 100% only works on the outermost wrapper. For a comprehensive explanation of how sticky footers need to work, please read this thread and see if it answers your questions:

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

  3. #3
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply! Yes, I've read that tutorial and that is the same code I'm using. I'm still running into trouble with my backgrounds though. I want my background to be a different color than my "#outer" and my "#header" (I have not seen an example of this yet). If I put my background image on my #outer, it makes the header that color too. I tried putting a different #content div inside my #outer but without the #header, but I still cannot get the div to stretch the whole page.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    OK, I see. From my point of view, I can't help with this unless I see the live version (it's like reading sheet music as opposed to hearing it). Others may be able to help, though.

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    Is the type of layout you're after?
    http://www.pmob.co.uk/temp/sticky-f.htm

    I want my background to be a different color than my "#outer" and my "#header" (I have not seen an example of this yet).
    All of Paul's demos of sticky footers have a different header color to the outer div.
    If I put my background image on my #outer, it makes the header that color too.
    You just need to give header a background color. By default every element has a transparent background so will show the parent elements backgrounds through them.
    I tried putting a different #content div inside my #outer but without the #header, but I still cannot get the div to stretch the whole page.
    These layouts only work in a very specific way, so you're best to keep the same structure for the header, outer, footer as an example for now.

    Hope it 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
  •