No replies
fudge714
Offline
newbie
Last seen: 11 years 3 weeks ago
Timezone: GMT+11
Joined: 2010-01-06
Posts: 1
Points: 2

Hi,

I'm trying to create a footer that sits below the content of the site. It should sit at the bottom of the browser window if it is a short page, or at the bottom under the content if it is a long page.

I've gone through lots of experimenting, and then closely followed three different tutorials, but still haven't been able to make anything work, so I'm starting to feel like maybe there is something simple wrong with my code that is stopping it all from working. If someone could please take a look and let me know, that would be fantastic.

This is the last tutorial I was trying to use:
http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/

And this is my css:

html { height: 100%;
}
 
body { text-align:center;
        color: black;
        font-family: AndaleMono, arial;
        font-size: 13px;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        background: #fff url(<a href="http://slapp.org.au/sites/default/files/bg_1.jpg" rel="nofollow">http://slapp.org.au/sites/default/files/bg_1.jpg</a>) no-repeat center top;
}
 
.container {
        width: 100%;
        margin: 0 auto;
        position: relative;
        text-align: left;
        min-height: 100%;
}
 
.wrapper {
        width: 975px;
        margin: 0 auto;
        text-align: left;
        position: relative;
}
 
#header { background-color: #f0f0f0;
        padding-top: 20px;
        padding-bottom: 0px;
        margin-bottom: 0px;
        vertical-align: bottom;
        width: 100%;
}
 
#main { width: 100%;
        position: relative;
        padding-bottom: 200px;
}
 
#clearfooter { height: 330px;
        clear: both;
}
 
#footer { background-color: #f0f0f0;
        font-family: Georgia, "Times New Roman", Times, serif;
        font-size: 15px;
        padding-bottom: 20px;
        width: 100%;
        height: 200px;
        padding: 20px;
        position: relative;
}
 
.tab { vertical-align: bottom;
        padding-bottom: 0px;
        margin-bottom: 0px;
}
 
#sidebar-left { position: absolute;
        left: 0;
        top: 170px;
        float: left;
        width: 147px;
        padding: 1em;
}
 
#mainContent { position: absolute;
        left: 180px;
        top: 230px;
        float: left;
        width: 520px;
        padding: 1em;
}
 
#sidebar-right { position: absolute;
        right: 25px;
        top: 170px;
        float: left;
        width: 200px;
}

And this is my html (its a drupal theme):

<?php
// $Id: page.tpl.php,v 1.18.2.1 2009/04/30 00:13:31 goba Exp $
?><!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" xml:lang="<?php print $language->language ?>" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
  <head>
    <?php print $head ?>
    <title><?php print $head_title ?></title>
    <?php print $styles ?>
    <?php print $scripts ?>
    <!--[if lt IE 7]>
      <?php print phptemplate_get_ie_styles(); ?>
    <![endif]-->
  </head>
  <body>
 
<!-- Layout -->
   <div class=container>
        <div id="header">
        <div class=wrapper>
        <?php print $header; ?>
        </div>
      </div> <!-- /header -->
<p>&nbsp;
<div id=main>
  <div class="wrapper">
 
      <?php if ($left): ?>
        <div id="sidebar-left" class="sidebar">
          <?php print $left ?>
        </div>
      <?php endif; ?>
 
      <div id="mainContent">
          <?php if ($tabs): print '<div id="tabs-wrapper" class="clear-block">'; endif; ?>
          <?php if ($title): print '<h1'. ($tabs ? ' class="with-tabs"' : '') .'>'. $title .'</h1>'; endif; ?>
          <?php if ($tabs): print '<ul class="tabs primary">'. $tabs .'</ul></div>'; endif; ?>
          <?php if ($tabs2): print '<ul class="tabs secondary">'. $tabs2 .'</ul>'; endif; ?>
          <?php if ($show_messages && $messages): print $messages; endif; ?>
          <?php print $help; ?>
            <?php print $content ?>
          <?php print $feed_icons ?>
      </div>
 
      <?php if ($right): ?>
        <div id="sidebar-right" class="sidebar">
          <?php print $right ?>
        </div>
      <?php endif; ?>
 
  </div>
  </div>
 
<div id=clearfooter></div>
</div>
<div id=footer>
<img src=http://slapp.org.au/sites/default/files/logo.png>
</div>
<!-- /layout -->
 
  <?php print $closure ?>
  </body>
</html>