PDA

View Full Version : Sticky Footer



sith717
05-05-2009, 11:28 PM
Hello, I am currently having a problem, the footer of the page wont stick to the bottom of the screen.

Picture:
http://img7.imageshack.us/img7/7810/footersfr.png


Here is the html:



<div class="promo-link">
<ul>

<li class="link-microsoft"><a href="http://www.microsoft.com/">Microsoft</a></li>

<li class="link-redhat"><a href="http://www.redhat.com/">Redhat</a></li>
<li class="link-dell"><a href="http://www.dell.com/">Dell</a></li>

<li class="link-cisco"><a href="http://www.cisco.com/">Cisco</a></li>
<li class="link-hp"><a href="http://www.hp.com/">HP</a></li>

<li class="link-amd"><a href="http://www.amd.com/">AMD</a></li>
</ul>

</div>
<!-- Banners end -->
<div class="hold-footer">
<div id="footer">

<ul class="menu">
<li class="item183"><a href="******"><span>Home</span></a></li>
<li class="item201"><a href="******"><span>Hosting</span></a></li>
<li class="item189"><a href="******"><span>Solutions</span></a></li>
<li class="item187"><a href="******"><span>Support</span></a></li>
<li class="item188"><a href="******"><span>Help</span></a></li>
<li class="item200"><a href="about.php"><span>About</span></a></li>
<li class="active item184"><a href="******"><span>Contact</span></a></li>
</ul>
<p>Copyright &copy; 2009 by <strong>*********</strong>. All rights reserved.</p>

</div>
</div>

CSS:



.promo-link{
width:1002px;
overflow:hidden;
margin:0 auto;
}
.hold-footer{
border-top:1px solid #a7b2b9;
}
#footer{
width:978px;
overflow:hidden;
margin:0 auto;
padding:27px 3px 27px 21px;
}



Please add me on MSN: Sith717@hotmail.com

I need the footer to stick to the bottom of the screen.

Like this:
http://img9.imageshack.us/img9/3141/footercorrect.png

Excavator
05-06-2009, 12:51 AM
Hello sith717,
Have a look at this and see if it does what you want - http://nopeople.com/CSS/full-height-layout/index.html

sith717
05-06-2009, 06:36 PM
It does, now what is the code to make it so its works?

Css and html codes I need to add.

Excavator
05-07-2009, 02:47 AM
View the source to see how it's done.
View Source should be on your browser toolbar somewhere.

You could also File/Save As to save the whole webpage.

sith717
05-07-2009, 06:19 PM
I did, but do not know what to add. Like can you give me the css to add to my

.promo-link{
width:1002px;
overflow:hidden;
margin:0 auto;
}
.hold-footer{
border-top:1px solid #a7b2b9;
}
#footer{
width:978px;
overflow:hidden;
margin:0 auto;
padding:27px 3px 27px 21px;
}

And what to add to my HTML file.

marilynn.fowler
05-07-2009, 08:42 PM
Hint: Pay particular the heights and the negative margin line in the NoPeople CSS. That should point you in the right direction.