...

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum