CSS footer way down the page.

[queentoad]

Hi! I'm not that new, but it's my first time posting, so yeah.

I'm the owner of Knightville, a virtual pet-site in the making. I'm currently on a free domain and hosting here. Just having a small problem with my layout. I've coded the template using definite/absolute positioned CSS and HTML. Upon doing so, I've realized that the footer will not go down if the main info would stretch. So, I concluded that I should try using the "sticky footer" scheme. It did work as I can see it move down the page whenever I stretch the main information. Although, there is one big problem, it's located on about 700px below the text box.

If you don't get it, here:
http://knightville.x10hosting.com/trialagain.html

I attempted to re-code it, although I thought of it as useless since I will result to the same/similar style of positioning with the links. So why code the entire piece again? Also, if I get this to work, I will take the copyright above the header.

I used 4 different images. The header, sidebar, buttons and copyright are those images. I will post the code here:

Here's the CSS:

.html {
height: 100%;
}

body {
background-color: #a06ec5;
}

.wrapper {
min-height: 100%; 
height: auto !important; 
height: 100%; 
margin: 0 auto -44px;
} 

.push {
height: 44px;
}

.footer {
height: 44px;
width: 700px;
left: 152px;
position: relative;
background-image: url(http://i4.photobucket.com/albums/y101/robinrecato/dwtl/lowercredits.png)
}

a:link, a:visited, a:hover, a:active {
color: #FFFFFF;
text-decoration:none;
background-color: none;
}

.userinformation {
border-width: 1px;
border-style: solid;
border-color: black;
border-collapse: separate;
width: 120px;
height: 120px;
left: 27px;
top: 63px;
position: absolute;
padding: 2px
color: #000000;
font-size: 13px;
background-color: #c7a7e0;
opacity: .45;
}

.details {
border-width: 1px;
border-style: solid;
border-color: black;
border-collapse: separate;
width: 699px;
left: 150px;
top: -530px;
Padding: 10px;
min-height: 600px;
position: relative;
color: #000000;
text-align: center;
font-size: 13px;
background-color: #FFFFFF;
opacity: .30;
height: 100%
}


.home {
width: 102px;
height: 44px;
left: 27px;
top: 280px;
position: absolute;
color: #FFFFFF;
text-align: center;
font-size: 13px;
background-image: url(http://i4.photobucket.com/albums/y101/robinrecato/dwtl/buttoncopy.png)
}

.Pets {
width: 102px;
height: 44px;
left: 27px;
top: 330px;
position: absolute;
color: #FFFFFF;
text-align: center;
font-size: 13px;
background-image: url(http://i4.photobucket.com/albums/y101/robinrecato/dwtl/buttoncopy.png)
}

.Inventory {
width: 102px;
height: 44px;
left: 27px;
top: 380px;
position: absolute;
color: #FFFFFF;
font-size: 13px;
text-align: center;
background-image: url(http://i4.photobucket.com/albums/y101/robinrecato/dwtl/buttoncopy.png)
}


.Explore {
width: 102px;
height: 44px;
left: 27px;
top: 430px;
position: absolute;
color: #FFFFFF;
font-size: 13px;
text-align: center;
background-image: url(http://i4.photobucket.com/albums/y101/robinrecato/dwtl/buttoncopy.png)
}

.Shops {
width: 102px;
height: 44px;
left: 27px;
top: 480px;
position: absolute;
color: #FFFFFF;
font-size: 13px;
text-align: center;
background-image: url(http://i4.photobucket.com/albums/y101/robinrecato/dwtl/buttoncopy.png)
}

.Forums {
width: 102px;
height: 44px;
left: 27px;
top: 530px;
position: absolute;
color: #FFFFFF;
font-size: 13px;
text-align: center;
background-image: url(http://i4.photobucket.com/albums/y101/robinrecato/dwtl/buttoncopy.png)
}


.Battle {
width: 102px;
height: 44px;
left: 27px;
top: 580px;
position: absolute;
color: #FFFFFF;
font-size: 13px;
text-align: center;
background-image: url(http://i4.photobucket.com/albums/y101/robinrecato/dwtl/buttoncopy.png)
}


.Games {
width: 102px;
height: 44px;
left: 27px;
top: 630px;
position: absolute;
color: #FFFFFF;
font-size: 13px;
text-align: center;
background-image: url(http://i4.photobucket.com/albums/y101/robinrecato/dwtl/buttoncopy.png)
}


.Search {
width: 102px;
height: 44px;
left: 27px;
top: 680px;
position: absolute;
color: #FFFFFF;
font-size: 13px;
text-align: center;
background-image: url(http://i4.photobucket.com/albums/y101/robinrecato/dwtl/buttoncopy.png)
}

.News {
width: 102px;
height: 44px;
left: 27px;
top: 730px;
position: absolute;
color: #FFFFFF;
font-size: 13px;
text-align: center;
background-image: url(http://i4.photobucket.com/albums/y101/robinrecato/dwtl/buttoncopy.png)
}

.header {
width: 797px;
height: 249px;
left: 102px;
top: 1px;
position: absolute;
background-image: url(http://i4.photobucket.com/albums/y101/robinrecato/dwtl/banneryey2copy.png)
}

#sidebar {
width: 102px;
height: 802px;
left: -8px;
top: -8px;
padding: 0px;
margin: 0px;
position: relative;
background-image: url(http://i4.photobucket.com/albums/y101/robinrecato/dwtl/sidebarcopycopy.png)
}


.copyrightup {
width: 500px;
height: 50px;
left: 382px;
top: 5px;
position: absolute;
font-size: 12px;
opacity: .60;
}

That's pretty messy. XD

Here's the html:

<div class="wrapper">
<div id="sidebar"></div>
<div class="header"></div>
<div class="home"><br />
<a href="">H O M E</a></div>
<div class="Pets"><br />
<a href="">P E T S</a></div>
<div class="Explore"><br />
<a href="">E X P L O R E</a></div>
<div class="Forums"><br />
<a href="">F O R U M S</a></div>
<div class="Shops"><br />
<a href="">S H O P S</a></div>
<div class="Inventory"><br />
<a href="">I N V E N T O R Y</a></div>
<div class="Search"><br />
<a href="">S E A R C H</a></div>
<div class="Games"><br />
<a href="">G A M E S</a></div>
<div class="News"><br />
<a href="">N E W S</a></div>
<div class="Battle"><br />
<a href="">B A T T L E</a></div>
<div class="userinformation">User Information:<br />
Welcome back to Knightville.<br />
Please <a href="index.php">Login</a> or <a href="register.php">Join</a><br />
<br /></div>
<div class="details">Welcome to Knightville! Knightville isn't finished yet but coding is well under way! Watch this space!<br />
you can also keep up to date with us on the Pre forums
<form action="index.php" method="post">
<table>
<tbody>
<tr>
<td colspan="2">Login:</td></tr>
<tr>
<td width="50%">Username:</td>
<td width="50%"><input name="username" size="18" type="text" /></td></tr>
<tr>
<td width="50%">Password:</td>
<td width="50%"><input name="password" size="18" type="password" /></td></tr>
<tr>
<td colspan="2"><input name="submit" value="submit" type="submit" /></td></tr></tbody></table></form><a href="register.php">[Register]</a><br />
<a href="lostpassword.php">[Lost Password]</a><br />
</div>
<div class="copyrightup"><br />
| <a href="">Terms of Service</a> | <a href="">Staff</a> | <a href="">Contact Us</a> | This site is Copyright Knightville 2009-2010</div>
<div class="push"></div></div><!--–end wrapper–-->
<div class="footer"><br />
<center>| <a href="">Terms of Service</a> | <a href="">Staff</a> | <a href="">Contact Us</a> | This site is Copyright Knightville 2009-2010</center></div>

Thank you so much for reading this! I hope to be able to fix the site with your help! c:

 

[lemon-tree]

Your wrapper element is too big and is pushing the footer down.

 

[queentoad]

But isn't it that it should be the negative of the push/footer length?

I'll try editing it again. Thank you! c:


Edit:
I tried manipulating the Wrapper, it seems to be doing nothing on the layout. I can't find where I'm wrong. D:

 

[garrettroyce]

hm. Can you try changing these elements like this:

.html {
height: auto;
}

body {
background-color: #a06ec5;
}

.wrapper { 
height: auto !important;  
margin: 0 auto -44px;
}

 

[vol7ron]

The space is created because that is the holder for the "details" div -- that's where it would be if you didn't position absolute it.

There are a few options you have to get the effect you want, but they are more HTML restructuring, rather than CSS modifications.

The easiest fix, I think, is to:
1) put your div=footer inside your div=details (at the bottom of details should be fine)
2) change the CSS of div=footer so that:
bottom: -50px;
position: absolute;
(remove the left


That should be the quick fix. The other way is to remove all the position absolutes and actually fix your HTML elements so everything is relative. Let me know if it works.

By the way, it looks like there is some alpha, or something on the details so the color doesn't stand out as much, you're going to want to modify the css to not include the footer div

 

[lemon-tree]

Alternatively to the previous response, you should be able to use a negative value margin-bottom to shuffle everything up a bit. However, I would just recommend you don't rely on absolute positioning.

 

[vol7ron]

Alternatively to the previous response, you should be able to use a negative value margin-bottom to shuffle everything up a bit. However, I would just recommend you don't rely on absolute positioning.

This will not work once details has content that stretches it's height. The footer will overlay or be hidden, depending on the z-index

 

[queentoad]

Hi guys!
Thanks for all the replies! I appreciate the help.

But, I've tried all except changing everything to relative and none have worked yet. So I do hope editing the whole thing to relative would work. c:

Sorry, was busy with commissions. >.>

Thank you again! c:

 

[vol7ron]

I changed your exact page, so I know it works. You're not doing something right.

 

[queentoad]

Well, uhh. It's still not working even if I changed everything into relative. [/fail]

Haha! That's okay. It's just the test layout anyway. Just for my programmer to be able to do the coding. So, yeah. I'll patch up a new CSS by the time my site will be for testing by my staff. c:

Thanks anyway! I appreciate the help so much! If I have problems with the new one, I'll be sure to ask around again. Thank you! c:

 

[vol7ron]

no, you have to put "footer" inside "details" and make footer positioned absolute.