PDA

View Full Version : CSS footer



factsonline
10-12-2005, 04:41 PM
Hi!

I have a site I'm working on which I'd like to have a footer on which is always at the bery bottom of the page regardless of how much text there is to fill up the page. Any help would be much appreciated. I've tried a few online tutorials but I can't seem to get any to work. Here is my code:

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=iso-8859-1" />
<title>Home</title>
<link href="styles.css" type="text/css" rel="stylesheet" />

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerwidth; document.MM_pgH=innerheight; onresize=MM_reloadPage; }}
else if (innerwidth!=document.MM_pgW || innerheight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>

</head>

<body>

<div id="header"><a href="index.htm"><img src="_images/facts_header.jpg" alt="FACTS" width="750" height="190" border="0" /></a></div>

<div id="navbar">
<a href="index.htm"><img src="_images/home1.jpg" alt="Home/News" width="188" height="45" border="0" class="blockimg" /></a>
<a href="factfiction/index.htm"><img src="_images/factfiction1.jpg" alt="FACT/Fiction" width="188" height="45" border="0" class="blockimg" /></a>
<a href="getinvolved/index.htm"><img src="_images/getinvolved1.jpg" alt="Get Involved" width="188" height="45" border="0" class="blockimg" /></a>
<a href="contact/index.htm"><img src="_images/contactus1.jpg" alt="Contact Us" width="188" height="45" border="0" class="blockimg" /></a>
</div>

<div id="linksbox">
<div class="floattext">Links</div>
<a href="external_link" target="_blank"><img src="_images/yes.gif" alt="Yes Group" width="100" height="35" border="0" class="linkimg" /></a></div>

<div id="main">
<p>On <b>10/11/2005</b> this site was still under construction. We expect to
have updated it within the next few days. <br />
Please check back soon.<br />
<span class="factsfooter">FACTS</span></p>
</div>

</body>
</html>

CSS File code:


body {
margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif;
}

.linkimg {
margin-bottom: 6px;
}

.factsfooter {
font-size: 12px; float: right;
}

.starform {
color: #00f;
}

#header {
position: absolute; height: 190px; width: 750px;
}

#navbar {
position: absolute; top: 190px; height: 180px; width: 188px;
}

.blockimg {
display: block;
}

#main {
position: absolute; left: 198px; top: 200px; width: 430px; padding: 3px;
}

.floattext {
font-size: 9px; margin-bottom: 5px; color: #999999; text-align: right;
}

#linksbox {
position: absolute; left: 642px; top: 200px; width: 100px; border: 1px solid #CCC; padding: 3px;
}

Thanks.