I'm stuck and can't find a solution, so hopefully ya'll can help me out.
I can't get my footer to stay on the bottom of the page. Usually I don't have this problem, I dunno why I am now. I tried the absolute positioning with bottom:0; however that doesn't work. It works initially, but once the page stretches it doesn't go with it, just stays there.
style.css
/* kill defaults */
html, body, ul, dl, li, h1, h2, h3, h4, img {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
img {
border: 0;
}
/* ============= */
html {
height:100%;
}
body {
background-color:#1c261b;
height:100%;
}
.bg {
background-image:url(images/bg.gif);
background-repeat:repeat-y;
margin:auto auto;
width:1120px;
min-height:100%;
}
.container {
margin:auto auto;
width:979px;
min-height:100%;
margin-left:71px;
}
.banner {
background:url(images/banner.gif) no-repeat;
width:979px;
height:180px;
margin:auto auto;
}
.footer {
background:url(images/footer.gif) no-repeat;
width:979px;
height:68px;
position:absolute;
bottom:0px;
}
.nav {
background:url(images/navbg.gif) repeat-x;
width:100%;
height:29px;
}
.clear { clear:left; }
.leftColumn {
width:298px;
float:left;
border:1px solid #000;
border-left:none;
}
.middleColumn {
width:379px;
float:left;
border:1px solid #000;
}
.rightColumn {
width:298px;
float:right;
border:1px solid #000;
border-right:none;
}
.leftColumnSmall {
width:228px;
float:left;
border:1px solid #000;
border-left:none;
}
.middleColumnSmall {
width:449px;
float:left;
border:1px solid #000;
}
.headerFeaturedMatch {
background:url(images/header_featuredmatch.gif) no-repeat;
width:298px;
height:23px;
}
.headerRecentNews {
background:url(images/header_recentnews.gif) no-repeat;
width:379px;
height:23px;
}
.headerFidelityTeams {
background:url(images/header_fidelityteams.gif) no-repeat;
width:298px;
height:23px;
}
.headerMatchResults {
background:url(images/header_matchresults.gif) no-repeat;
width:228px;
height:23px;
}
.headerRecentNewsLarge {
background:url(images/header_recentnews_large.gif) no-repeat;
width:449px;
height:23px;
}
.result {
background:url(images/_result.gif) no-repeat;
width:298px;
height:153px;
border:1px solid #000;
border-left:none;
border-right:none;
}
.news {
background:url(images/_news.gif) no-repeat;
width:379px;
height:153px;
border:1px solid #000;
border-left:none;
border-right:none;
}
.teams {
background:url(images/_teams.gif) no-repeat;
width:298px;
height:358px;
border:1px solid #000;
border-left:none;
border-right:none;
}
.results {
background:url(images/_results.gif) no-repeat;
width:228px;
height:174px;
border:1px solid #000;
border-left:none;
border-right:none;
}
.post {
background:url(images/_post.gif) no-repeat;
width:449px;
height:287px;
border-left:none;
border-right:none;
}
index.php
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link rel="stylesheet" type="text/css" href="<?php echo rootpath; ?>style.css" />
</head>
<body>
<div class="bg">
<div class="container">
<div class="banner"></div>
<div class="nav"></div>
<div class="leftColumn">
<div class="headerFeaturedMatch"></div>
<div class="result"></div>
</div>
<div class="middleColumn">
<div class="headerRecentNews"></div>
<div class="news"></div>
</div>
<div class="rightColumn">
<div class="headerFidelityTeams"></div>
<div class="teams"></div>
</div>
<div class="clear"></div>
<div class="leftColumnSmall">
<div class="headerMatchResults"></div>
<div class="results"></div>
</div>
<?php
include ($page.'.php');
?>
<div style="clear:both;"></div>
<div class="footer"></div>
</div>
</div>
</body>
</html>Please excuse the very messy CSS, I was just testing stuff that would normally be dynamic in my template and will later clean it up.
This is what happens when the page stretches:
Let me know if you see anything out of place. I need this done ASAP.
decibel.places posted this at 15:18 — 4th January 2009.
He has: 1,557 posts
Joined: Jun 2008
try changing the footer position from "absolute" to "relative"
.footer {background:url(images/footer.gif) no-repeat;
width:979px;
height:68px;
position:relative;
bottom:0px;
}
I am unfamiliar with the use of "echo rootpath" in the stylesheet path
<link rel="stylesheet" type="text/css" href="<?php echo rootpath; ?>style.css" />does the stylesheet load at all? It might if the php expression is null and the style.css file is in the same directory....
at the very least, it should be "echo $rootPath" (I think) check these results at php.net
how about
$_SERVER["SITE_HTMLROOT"]?why not put in the actual path to the stylesheet? does it change?
Megan posted this at 16:20 — 4th January 2009.
She has: 10,764 posts
Joined: Jun 1999
You want your footer frozen to the bottom of the page even when the page scrolls? Or you just want it at the bottom of your content?
If you want it frozen, try position:fixed. Putting those
<div style="clear:both">shoudln't be necessary - just putting clear:both in the footer styles would do the same thing.It's aways helpful to post a working link when you are asking about HTML or CSS problems. That way we can see what's happening on the site and use Firebug to try out solutions.
By the way, that footer should be an id not a class. It doesn't appear more than once, doe it? If it's a unique item it should be an id.
Megan
My web design blog
decibel.places posted this at 18:16 — 4th January 2009.
He has: 1,557 posts
Joined: Jun 2008
Putting those
<div style="clear:both:">shoudln't be necessary - just putting clear:both in the footer styles would do the same thing.ah, I was unclear what you were saying because you didn't use the code tags.
you're correct, that empty div with the clear:both style is unnecessary.
[nb actual code is
<div style="clear:both;">with a semicolon, not<div style="clear:both:">]pr0gr4mm3r posted this at 16:28 — 4th January 2009.
He has: 1,338 posts
Joined: Sep 2006
It could be a constant the OP defined.
PHP Starter
decibel.places posted this at 18:11 — 4th January 2009.
He has: 1,557 posts
Joined: Jun 2008
It could be a constant the OP defined.
yes, but probably needs to be a variable formed with "$" eg $rootpath
pr0gr4mm3r posted this at 21:59 — 4th January 2009.
He has: 1,338 posts
Joined: Sep 2006
Not if it's a constant.
PHP Starter
decibel.places posted this at 22:42 — 4th January 2009.
He has: 1,557 posts
Joined: Jun 2008
how true
but I do not see any advantage in using a constant (which I suspect has not been set - so the path would default to the doc's dir and the given filename) as the path to the stylesheet
OP has stated elsewhere they have beginner's skills, so they may not even understand using a constant..
pr0gr4mm3r posted this at 23:53 — 4th January 2009.
He has: 1,338 posts
Joined: Sep 2006
I'm not sure what the advantages are, but some frameworks define the base path that way.
I know this wasn't part of the original question, but I saw a critical security problem with this line:
include ($page.'.php');I can set $page to be something like "http://example.com/evilscript" which would cause your site to run the script located at "http://example.com/evilscript.php". This can easily get your site hacked.
PHP Starter
webwiz posted this at 19:10 — 5th January 2009.
He has: 465 posts
Joined: May 2007
WRT the original question, it looks like you are trying to implement FooterStickAlt. If so, be aware that it only works when you have a single DIV to wrap the non-footer content. You have
<div class="bg">and<div class="container">wrapping your content. This does not work.Theoretically you should be able to do this by using CSS display properties of table, table-row, and table-cell. As you probably know, the World's Favorite Browser will not support these until version 8 comes out.
You may be able to take out one of those DIVs. Check the FooterStickAlt link I gave above for details.
Cordially, David
--
"Old web developers don't die, they degrade gracefully..."