Making a footer sticky problem:

johnmossel

11-10-2010, 02:34 PM

Hi, My footer wont stick to the bottom of the page, it appears in the middle of the page when .posts class is filled with content.

The code is below:

<!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="en">

<head>

<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

<style type="text/css">
/* Theme design by http://blog.0arrays.com */
html, body
{
padding: 0px;
margin: 0px;
}

*
{
margin: 0px;
}

body
{
font-family:Georgia,"Times New Roman",Serif;
font-size: 14px;
height: 100%;
}

a
{
padding-top: 3px;
margin: 2px;
color: #000000;
word-spacing: normal;
text-decoration: none;
}

p
{
margin-top:0px;
padding: 0px;
}

a.posttitle-link
{
margin-top: 3px;
}

#topbar
{
height: 25px;
background: #030303;
min-width: 800px;
width: 100%;
}

#container
{
width: 800px;
margin: 0 auto;
position: relative;
height: 100%;
display: block;
}

#header
{
height: 140px;
width: 800px;
}

#logo
{
font-size: 40px;
font-weight: bold;
margin-left: 0px;
margin-top: 45px;
position: absolute;
}

#tagline
{
font-size: 14px;
font-style: italic;
margin-top: 89px;
padding: 5px;
position: absolute;
}

#topmenu
{
margin-top: 55px;
position: absolute;
text-align: right;
margin-left: 494px;
}

#search
{
margin-top: 72px;
text-align: right;
margin-left: 590px;
float: right;
}

.search
{
width: 200px;
height: 20px;
border: 1px solid #CCCCCC;
line-height: 12px;
font-size: 14px;
margin-top: 1px;
padding: 3px;
}

input
{
padding:4px 0;
margin: 4px;
}

.toplinks
{
word-spacing: .5em;
font-weight: bold;
}

a:hover
{
background: #FF0000;
color: #ffffff;
text-decoration: none;
}

#next
{
color: #ffffff;
text-align: right;
width: 350px;
padding:3px;
float: right;
}

#previous
{
color: #ffffff;
text-align: left;
width: 350px;
padding:3px;
float: left;
margin-left: 0px;
padding-left: 0px;
}

#posts-container
{
width: 800px;
margin-bottom: 20px;
position: absolute;
min-width: 800px;
display: block;
margin-bottom: 3em;
}

.posts
{
width: 613px;
margin-top: 0px;
padding-top: 0px;
margin-left:177px;
padding-left: 3px;
text-align: left;
position: absolute;
}

.leftmenu
{
width:175px;
text-align: right;
margin-left: 0px;
}

.posttitle
{
font-size: 18px;
font-weight: bold;
text-align: right;
padding-top: 3px;
margin-left: 6px;
}

.date
{
background: #d4ff40;
width: 160px;
height: 14px;
text-align: center;
padding: 4px;
color: #7c9c2d;
font-size: 11px;
}

blockquote
{
background: #F0F0F0;
padding:3px;
width: 400px;
}

.clearfix
{
height: 20px;
width: 100%;
}

#footer {
width: 50px;
bottom: 0;
padding-bottom: 0;
display: block;
}

</style>

<title> {Title} </title>

</head>

<body>

<div id="topbar">
<div id="previous">
{block:PreviousPage}<a href="{PreviousPage}">« Previous</a>{/block:PreviousPage}
</div>
<div id="next">
{block:NextPage}<a href="{NextPage}">Next »</a>{/block:NextPage}
</div>

</div>

<div id="container">

<div id="header">

<div id="logo">
{title}
</div>

<div id="tagline">
So, why do arrays start from zero?
</div>

<div id="topmenu" class="toplinks">
<a href="/">Home</a> <a href="/archive">Archive</a> <a href="/ask">Ask Me</a> <a href="/rss">RSS</a>
<a href="/about">About</a>
</div>

<div id="search">
<form action="/search" method="get">
<input class="search" type="text" name="q" value="search" id="" />
</form>
</div>

</div>

<div id="posts-container">
{block:Posts}
<div class="posts">

{block:Text}
{Body}
{/block:Text}

{block:Quote}
<p><blockquote>
"{Quote}"
{block:Source}
<br><strong><i>-- {Source} </i></strong></br>
{/block:Source}
</blockquote></p>
{/block:Quote}

</div>

<div class="leftmenu">
<div class="date" >
{DayOfMonth}{DayOfMonthSuffix} {Month} {Year}
</div>

<div class="posttitle">

{block:Title}
<a class="posttitle-link" href="{Permalink}">{Title}...</a>
{/block:Title}

</div>
<i>- Filed under Misc -</i>

</div>

<div class="clearfix"> </div>
{/block:Posts}

</div>

<div id="footer"> bottom???</div>

</div>

</body>
</html>

You can see the live example here http://blog.0arrays.com/

I don't really care if the footer is sticky or not, I just want it to stick to the bottom of the page.
Thanks for any help in advance.

teedoff

11-10-2010, 02:46 PM

johnmossel

11-10-2010, 03:07 PM

I dont even see your footer..lol

But you have several coding errors that should be fixed. That may or may not fix your problem, but they need to fixed anyway, so why not eliminate thoe errors as the reason your footer isnt showing correctly.

You can see these errors here (http://validator.w3.org/check?uri=http%3A%2F%2Fblog.0arrays.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0).

I've sorted out my errors, but the remainder are from tumblr, I don't understand when it says "Line 237, Column 6: document type does not allow element "BODY" here", what on earth does that mean?

digitalclubb

11-10-2010, 03:18 PM

For sticky footers, the following example is ace: http://www.cssstickyfooter.com/using-sticky-footer-code.html

Have a read of that and see if you can get it working.

Good luck

teedoff

11-10-2010, 03:22 PM

Try self-closing your meta and link tags in the head section.

Instead of this:
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">

<link rel="shortcut icon" href="http://assets.tumblr.com/images/default_avatar_16.gif">
<link rel="alternate" type="application/rss+xml" href="http://blog.0arrays.com/rss">

Try this:
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

<link rel="shortcut icon" href="http://assets.tumblr.com/images/default_avatar_16.gif" />
<link rel="alternate" type="application/rss+xml" href="http://blog.0arrays.com/rss" />

johnmossel

11-10-2010, 03:42 PM

teedoff

11-10-2010, 03:51 PM

Hmm, well I copied your code and changed your doctype to transitional, added the self closing tags and got rid of most of the errors. There are 4 left, two of which are you arent self closing your input tags. Another one I think is the <strong> tag not used in the right place(i think it should start inside the <li>) and the last one is something in your tumblr code.

Im lost at this point about this cause you're using framesets and I dont want too tell you to change your doctype. Someone mightbe able to expand on this further.

johnmossel

11-10-2010, 04:00 PM

teedoff

11-10-2010, 04:03 PM

lol I still haven't seen your footer, nor looked at it closely. I merely suggested you fix all the errors to rule those out as the reason your footer wasnt rendering properly.

johnmossel

11-10-2010, 04:14 PM

lol I still haven't seen your footer, nor looked at it closely. I merely suggested you fix all the errors to rule those out as the reason your footer wasnt rendering properly.

I've fixed them, the footer still appears in a weird position.

Excavator

11-10-2010, 05:18 PM

Hello johnmossel,
Look at some changes I've made in your code (highlighted in red) - <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>0 arrays</title>

<link rel="shortcut icon" href="http://assets.tumblr.com/images/default_avatar_16.gif" />
<link rel="alternate" type="application/rss+xml" href="http://blog.0arrays.com/rss" />
<style type="text/css">
/* Theme design by http://blog.0arrays.com */
html, body {
font-family:Georgia, "Times New Roman", Serif;
font-size: 14px;
height: 100%; /*very important to have this on both body and html*/
padding: 0px;
margin: 0px;
}
* {
margin: 0px;
}
a {
padding-top: 3px;
margin: 2px;
color: #000000;
word-spacing: normal;
text-decoration: none;
}
p {
margin-top:0px;
padding: 0px;
}
a.posttitle-link {
margin-top: 3px;
}
#topbar {
height: 25px;
background: #030303;
min-width: 800px;
width: 100%;
}
#container {
min-height: 100%;
width: 800px;
margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
background: #ff0; /*for display puroposes only*/
position: relative;
}
#footer {
width: 100%;
height: 50px;
position:absolute;
bottom: 0;
margin: 0 0.3em 0;
padding: 0.2em 0 0;
background: #f00; /*for display only*/
text-align: center;
line-height: 50px;
}
#header {
height: 140px;
width: 800px;
}
#logo {
font-size: 40px;
font-weight: bold;
margin-left: 0px;
margin-top: 45px;
position: absolute;
}
#tagline {
font-size: 14px;
font-style: italic;
margin-top: 89px;
padding: 5px;
position: absolute;
}
#topmenu {
margin-top: 55px;
position: absolute;
text-align: right;
margin-left: 494px;
}
#search {
margin-top: 72px;
text-align: right;
margin-left: 590px;
float: right;
}
.search {
width: 200px;
height: 20px;
border: 1px solid #CCCCCC;
line-height: 12px;
font-size: 14px;
margin-top: 1px;
padding: 3px;
}
input {
padding:4px 0;
margin: 4px;
}
.toplinks {
word-spacing: .5em;
font-weight: bold;
}
a:hover {
background: #FF0000;
color: #ffffff;
text-decoration: none;
}
#next {
color: #ffffff;
text-align: right;
width: 350px;
padding:3px;
float: right;
}
#previous {
color: #ffffff;
text-align: left;
width: 350px;
padding:3px;
float: left;
margin-left: 0px;
padding-left: 0px;
}
#posts-container {
width: 800px;
margin-bottom: 20px;
position: absolute;
min-width: 800px;
display: block;
margin-bottom: 3em;
height: auto;
}
.posts {
width: 613px;
margin-top: 0px;
padding-top: 0px;
margin-left:177px;
padding-left: 3px;
text-align: left;
position: absolute;
height: auto;
}
.leftmenu {
width:175px;
text-align: right;
margin-left: 0px;
height: auto;
}
.posttitle {
font-size: 18px;
font-weight: bold;
text-align: right;
padding-top: 3px;
margin-left: 6px;
}
.date {
background: #d4ff40;
width: 160px;
height: 14px;
text-align: center;
padding: 4px;
color: #7c9c2d;
font-size: 11px;
}
blockquote {
background: #F0F0F0;
padding:3px;
width: 400px;
}
.clearfix {
height: 20px;
width: 100%;
}
</style>
</head>
<body>
<div id="topbar">
<div id="previous"> </div>
<div id="next"> </div>
</div>
<div id="container">
<div id="header">
<div id="logo"> 0 arrays </div>
<div id="tagline"> So, why do arrays start from zero? </div>
<div id="topmenu" class="toplinks"> <a href="/">Home</a> <a href="/archive">Archive</a> <a href="/ask">Ask Me</a> <a href="/rss">RSS</a> <a href="/about">About</a> </div>
<div id="search">
<form action="/search" method="get">
<input class="search" type="text" name="q" value="search" >
</form>
</div>
</div>
<div id="posts-container">
<div class="posts">
<p> nope nope nope </p>
<blockquote>
<p> "This is called a quote" <br>
<strong><i>-- Me </i></strong> </p>
</blockquote>
</div>
<div class="leftmenu">
<div class="date" > 8th November 2010 </div>
<div class="posttitle"> </div>
<i>- Filed under Misc -</i> </div>
<div class="clearfix"> </div>
<div class="posts">
<p> nope nope nope </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ullamcorper eleifend nunc, et ultricies diam cursus iaculis. Cras dignissim eleifend lacus non commodo. Nam interdum, eros at porttitor suscipit, tellus mi volutpat diam, vitae sollicitudin augue velit non felis. Aenean eros eros, blandit in tincidunt non, consequat at eros. In lacinia interdum lectus non commodo. Nulla vel est sit amet mauris varius accumsan ultrices id eros. Aliquam varius interdum magna ut malesuada. Nullam quam elit, tincidunt eget tempor sit amet, luctus sed leo. Nulla metus est, ullamcorper ac vestibulum vitae, rutrum luctus elit. Donec at elit a tellus imperdiet suscipit ac tempus odio. In hac habitasse platea dictumst. Sed congue ante et risus scelerisque scelerisque. Mauris sagittis nisl arcu, ut egestas leo. In elementum, risus vitae hendrerit tincidunt, tortor libero aliquet diam, nec rhoncus nibh mauris at eros. Cras tincidunt dictum neque quis blandit. Aenean consequat dolor vitae odio iaculis sed ullamcorper mauris consequat. Sed dolor ligula, mattis vitae blandit id, pretium eu nisl. Duis felis felis, suscipit accumsan semper in, accumsan et risus.</p>
<p>Donec at elit a tellus imperdiet suscipit ac tempus odio. In hac habitasse platea dictumst. Sed congue ante et risus scelerisque scelerisque. Mauris sagittis nisl arcu, ut egestas leo. In elementum, risus vitae hendrerit tincidunt, tortor libero aliquet diam, nec rhoncus nibh mauris at eros. Cras tincidunt dictum neque quis blandit. Aenean consequat dolor vitae odio iaculis sed ullamcorper mauris consequat. Sed dolor ligula, mattis vitae blandit id, pretium eu nisl. Duis felis felis, suscipit accumsan semper in, accumsan et risus. Mauris hendrerit posuere augue, eu lacinia urna suscipit ac. Donec feugiat ornare lectus ut egestas. Morbi in urna at lorem tempor ornare. Phasellus commodo ligula sit amet lacus auctor id molestie mi eleifend. Aenean ac erat ut nisl rutrum mollis. Vivamus sit amet est eget urna congue tempus. Duis condimentum augue id lacus imperdiet id facilisis leo auctor. Cras enim magna, vestibulum a auctor mollis, tempus id purus. Aenean et eros ante, non adipiscing libero. Integer elementum ultrices magna, et dignissim sapien varius eu. Cras vitae arcu a elit posuere pulvinar. Sed vel turpis ipsum. Curabitur fermentum commodo eros in venenatis. Duis non purus in sapien rutrum laoreet. Fusce vel felis a risus elementum vulputate. Cras sed eros lacus, sit amet interdum est. Ut sit amet magna in ligula viverra sagittis. Donec lectus libero, ornare eu condimentum sit amet, imperdiet nec sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ullamcorper vestibulum lacus sit amet elementum. Suspendisse et nibh dolor. Nulla facilisi. Morbi mauris est, porta id auctor ut, adipiscing et neque. Mauris varius dapibus elit quis malesuada. Maecenas consequat bibendum neque, ac luctus eros molestie eget. Suspendisse potenti. Nulla facilisi. Pellentesque mi eros, euismod vitae vestibulum ac, scelerisque nec lectus.</p>
</div>
<div class="leftmenu">
<div class="date" > 8th November 2010 </div>
<div class="posttitle"> <a class="posttitle-link" href="http://blog.0arrays.com/post/1520548329/my-first-post">My first post...</a> </div>
<i>- Filed under Misc -</i> </div>
<div class="clearfix"> </div>
</div>
<div id="footer"> bottom???</div>
</div>


<iframe src="http://assets.tumblr.com/iframe.html?8&src=http%3A%2F%2Fblog.0arrays.com%2F&lang=en_US&name=0arrays" scrolling="no" width="324" height="25" frameborder="0" style="position:absolute; z-index:1337; top:0px; right:0px; border:0px; background-color:transparent; overflow:hidden;" id="tumblr_controls"></iframe>
<script type="text/javascript">_qoptions={qacct:"p-19UtqE8ngoZbM"};</script><script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script>
<noscript>
<img src="http://pixel.quantserve.com/pixel/p-19UtqE8ngoZbM.gif" style="display:none; border-width:0px; height:1px; width:1px;" alt=""/>
</noscript>

</body>
</html>

That's based on this method (http://nopeople.com/CSS/full-height-layout/index.html).

Your #topbar is causing the bit of scroll you're seeing.