cannot get "footer" bar on absolute bottom of page

austinm08 · #1 12-28-2007, 02:28 AM

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>

Centauri · #2 12-28-2007, 08:06 AM

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;
}

austinm08 · #3 12-28-2007, 12:29 PM

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.

Centauri · #4 12-28-2007, 01:05 PM

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.

**WebJoel** · #5 12-28-2007, 04:56 PM

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.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)