Fixed header and footer

1

hey everybody,

i’ve tried everything i know, after learning a bit of CSS i’m realizing its really not all that hard to decipher, but still i am having difficulty. i’m trying to have a fixed header and footer for my website. here is the code in the header.php document


<!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" <?php
if(function_exists('language_attributes')) { 
 language_attributes(); 
}else{
 echo "<h1>Oops:</h1><font color=\"red\">This theme only works with WordPress 2.1.* or higher. You seem to have an <b>outdated version</b> of wordpress. Please download the latest <a href=\"http://www.wordpress.com\">WordPress</a> to use this theme and also get the latest security patches.</font>";
// exit();
}
?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory') ?>/reset-fonts-grids-tabs.css" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div id="doc3" class="yui-t1">
<div id="hd">
    <h1><a href="<?php echo get_option('home'); ?>"><img src="http://bioloser.com/uploads/bioloserlogo.png" alt="<?php bloginfo('name'); ?>"></a></h1>
</div>

and here is the code i have for making it fixed


<title>Fixed header and footer</title>
<style type="text/css">
 body{
  margin:0;
  padding:header-[[COLOR=#0000ff]<length>[/COLOR] 0 footer-[URL="http://limpid.nl/lab/css/fixed/theory#length"][COLOR=#0000ff]<length>[/COLOR]](http://limpid.nl/lab/css/fixed/theory#length) 0;
 }
 div#header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:header-[[COLOR=#0000ff]<length>[/COLOR]; } div#footer{  position:absolute;  bottom:0;  left:0;  width:100%;  height:footer-[URL="http://limpid.nl/lab/css/fixed/theory#length"][COLOR=#0000ff]<length>[/COLOR]](http://limpid.nl/lab/css/fixed/theory#length);
 }
 @media screen{
  body>div#header{
   position:fixed;
  }
  body>div#footer{
   position:fixed;
  }
 }
 * html body{
  overflow:hidden;
 } 
 * html div#content{
  height:100%;
  overflow:auto;
 }
</style>
<div id="header"> header </div>
<div id="footer"> footer </div>
<div id="content"> content </div>

i thought it had something to do with the two different codes referencing different tag names for the “header” or “footer” but switching them around didn’t do anything, i even deleted a whole section of code and didn’t see anything happen!

btw: the first one is from a wordpress template generator, the second one from a CSS website

also, do people find fixed headers and footers annoying?

thank you:kir:

2

Please post a link so that we can better help.

Thanks!

3

link to the website?

its bioloser.com (-: