www.webdeveloper.com
Results 1 to 5 of 5

Thread: cannot get "footer" bar on absolute bottom of page

  1. #1
    Join Date
    Oct 2007
    Posts
    15

    cannot get "footer" bar on absolute bottom of page

    linky right hurr

    I can't get my footer bar on the bottom of page. What am I doing wrong? Please help..


    CSS
    Code:
    * {
      margin:0;
      padding:0;
    }
    
    body {
      margin: 0 auto;
      background-image: url('../img/shadow.jpg');
      background-color: #3c3c3c;
      background-repeat: repeat-y;
      background-position: center;
      width: 900px;
      color: #e5e5e5;
    }
    			
    /* 100% height for compliants, enwraps content */
    #wrapper {
      min-height:100%;
      overflow: hidden;
    }
    
    /* and feed IE what it needs - what exactly are you trying to do with this?? it's not valid. i figured you were trying to stop inheritance so i adjusted it accordingly */
    #wrapper *{
      height: 100%;
    }
    			
    /* unvisited link */	
    a:link {
      color: #FFFFFF;
      text-decoration: none;
    }
    
    /* visited link */
    a:visited {
      color: #FFFFCC;
      text-decoration: none;
    }
    
    /* mouse over link */
    a:hover {
      color: #FFFFFF;
      text-decoration: underline;
    }
    
    /* selected link */
    a:active {
      color: #FF0033;
      text-decoration: underline;
    }
    
    #center {
      background-image: url('../img/bg.gif');
      background-repeat: repeat-y;
      background-position: center;
      margin-top: auto;
      margin-bottom: 0px;
    }
    
    #gradient {
      margin: 0 0 -36px 0;
      background-color: #333333;
      background-repeat: repeat-x;
      background-position: center;
      z-index:-1;
    }
    
    #navbar {
      margin: auto;
      background-image: url('../img/navbar.gif');
      width: 800px;
    }
    
    #footerbar {
      margin: 0 0 0px 0;
      background-image: url('../img/navbar.gif');
      width: 800px;
    }
    
    #headingbar {
      margin: auto;
      background-image: url('../img/headingbar.gif');
      width: 800px;
    }
    
    #headingbar h1 {
      letter-spacing: 10px;
      margin: 0 auto;
      padding-top: 8px;
      padding-bottom: 8px;
      font-family: arial;
      font-size: 200%;
      color: #e5e5e5;
      font-variant: small-caps;
      font-weight: 900;
      text-align: center;
      width: 800px;
    }				
    
    #text {
      padding-top: 2%;
      padding-left: 12%;
      padding-right: 12%;
      padding-bottom: 40px;
    }
    
    #video {
    		height: 250px;
    		width: 300px;
    		padding-top: 6%;
    		padding-left: 10%;
    		}
    
    /* this is just a "class selector", you don't need p.-----, just .----- */
    .bodytext {
      color: #e5e5e5;
      font-size: 72%;
      font-family: arial;
    }
    
    /* this is just a "class selector", you don't need p.-----, just .----- */
    .navtext {
      padding-top: 2px;
      padding-bottom: 2px;			
      word-spacing: 10px;
      text-align: center;
      color: #e5e5e5;
      font-size: 72%;
      font-family: Arial, Helvetica, sans-serif;
      width: 800px;
    }

    HTML
    HTML 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=windows-1252" />
    <link rel="stylesheet" type="text/css" href="http://www.decembuhr.com/style/new.css" />
    <title>decembuhr.design</title>
    </head>
    
    <body>
    <!-- start wrapper -->
      <div id="wrapper">
    <!-- start center -->
        <div id="center">
    <!-- start wrapper -->
          <div id="headingbar">
    	<h1>
    	Decembuhr.desigN
    	</h1>	
          </div>
    
    <!-- In actuality this div element should be an UNORDERED list; a "ul" element -->            
          <div id="navbar">
            <p class="navtext">
              <a href="http://www.decembuhr.com">home</a> | <a href="http://gallery.decembuhr.com">gallery</a> | <a href="http://music.decembuhr.com">music</a> | video | <a href="http://about.decembuhr.com">about</a> | <a href="http://contact.decembuhr.com">contact</a>
            </p>
          </div>
          
          <div id="video">
          
          <embed flashVars="altServerURL=http%3A%2F%2Fwww.metacafe.com&playerVars=blogName=|blogURL="  src="http://www.metacafe.com/fplayer/988715/the_cat_who_fetches.swf" width="300" height="250" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"> </embed>
          
          </div>
          
          <div id="text">
                <p class="bodytext">
                <a href="http://www.metacafe.com/watch/988715/the_cat_who_fetches/">The Cat Who Fetches</a>
                </p>
          </div>
    <!-- end text -->
    
    			<div id="footerbar">
                <p class="navtext">
                footer text
                </p>            
                </div>
    
        </div>
    <!-- end center -->
    
      </div>
    <!-- end wrapper -->
    
    </body>
    </html>

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    A number of problems here.

    Starting with the html, there is no need for #center div, and it can be removed completely (along with its css). Then move the footer bar after the wrapper div:
    Code:
    <body>
    <!-- start wrapper -->
      <div id="wrapper">
    
    <!-- start header Note no center div  -->
          <div id="headingbar">
        .
        .
        .
        .
        .
    
          </div>
    <!-- end text -->
    
      </div>
    <!-- end wrapper -->
    <div id="footerbar">
       <p class="navtext">
         footer text
       </p>            
    </div>
    </body>
    To get 100% minimum height to work properly, both the html and body need to be set to 100% height first. The IE6 hack of 100% height uses the star-html hack, where the css code for wrapper is preceded with * html. The background image should be applied to the #wrapper, not the body, and the #wrapper gets the width and auto side margins.

    The footer also gets auto side margins and a height defined, and a negative top margin equal to its height pulls it back up from below the bottom of the screen and into view. Relative position here also prevents IE from hiding the footer underneath.
    Code:
    * {
      margin:0;
      padding:0;
    }
    html, body {
      height: 100%;
    }
    body {
      background-color: #3c3c3c;
      color: #e5e5e5;
    }
    			
    /* 100% height for compliants, enwraps content */
    #wrapper {
      margin: 0 auto;
      background-image: url('../img/shadow.jpg');
      background-repeat: repeat-y;
      background-position: center;
      width: 900px;
      min-height:100%;
    }
    
    /* and feed IE6 what it needs via the star-html hack */
    * html #wrapper{
      height: 100%;
    }
    
    #footerbar {
      margin: -1.6em auto 0;
      background-image: url('../img/navbar.gif');
      width: 800px;
      height: 1.6em;
      position: relative;
    }

  3. #3
    Join Date
    Oct 2007
    Posts
    15
    Thanks A LOT for doing that for me. Now I can learn from it.

    Does this mean the footer will just be placed right after the last content to appear on the page? As in.. it's not on the bottom, but it comes immediately after text or whatever I have on there.

  4. #4
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    The footer will be placed at the bottom of the screen unless the content pushes it further down. This method was pioneered by Paul O'Brien.

  5. #5
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Now that we've determing that the 'star hack' is indeed valid (although with the release of IE7, possibly deprecated), here is a good tute on the matter http://css-discuss.incutio.com/?page=StarHtmlHack.

    I am hoping that any well-meaning but possibly ineffective changes made to the code aren't 'learned', proliferated and discovered later to not function. We all copy & borrow each other's code here. -I'm to tired after the holidays to test these codes but I trust that you've received your solution.
    Last edited by WebJoel; 12-28-2007 at 04:59 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles