Maze Solutions – Web & Software Development Lebanon - KSA

The last CSS tutorial i wrote was about making a two level menu using CSS/JS, well this one is about fixed footers…



You know how it is ! you just wanna keep this footer still while navigating through the page.

Peace of cake

The main thing is to fix that position to bottom: 0px and the rest will follow !

Check the demo http://mazesolutions.me/demos/footer/
Download the files http://mazesolutions.me/demos/footer/footer.rar
To get the full working menu http://mazesolutions.me/website-production/how-to-do-a-menu-with-sub-items-using-css/130

Hope i helped in a way
// Jo

You’re the best Joe!

Thanks for the tips, I love finding out about new tricks

Hi Jo,

I was already looking for a solution like this.

thanks.

btw. the download and demo link are not working

@Olaf:
here is the demo: http://joeabiraad.com/demos/footer/
and the download link: http://joeabiraad.com/demos/footer/footer.rar

Very good!!

Hey there! Nice work. Kindly view the demo in IE6, it’s breaking up!

IE problem:

I’ve copied the examples the run in my localhost, but there is error.

only suit in *.html page not in *.php.

the result in ie, footer not scrolled

There’s not much point creating sites/code for IE6 anymore anyway. It’s poorly supported and people should move on.

It works;
Thanks

Hello, I googled to find fixed footer, and you were first on the list! However, there are no files to download.

@pj: Sorry post updated !

Check the demo http://joeabiraad.com/demos/footer/
Download the files http://joeabiraad.com/demos/footer/footer.rar
To get the full working menu http://joeabiraad.com/website-production/how-to-do-a-menu-with-sub-items-using-css/130

Thank you so much!

Hey, This is the first footer placement I got working, I do have a big problem though, It’s not working in Google Chrome, the text/links is placed centered between the right border of the page and the right border of the Browser window. Any ideas?

Hi there,

thanks for your info, but my css just doesn’t get it….or what do I forget???

Here is my CSS footer part:

.footer{
padding:240px 0px 0px 0px;
color:#f4e8c3;
margin-top:5px;
font-size:13px;
text-align:center;
background:url(images/grass.png) repeat-x left top;
overflow:hidden;
}
.footer_bg
{
background:url(images/ground.gif) repeat;
height:100%;
}
.footer_content
{
width:1000px;
margin:0px auto;
padding-bottom:25px;
letter-spacing:1px;
}
.footer_nav
{
padding-bottom:10px;
}
.footer ul, .footer li
{
display:inline;
}
.footer li a
{
margin:0px;
padding:0px 6px 0px 10px;
border-left:solid 1px;
}
.footer p{
padding:3px 0px;
}
.footer a, .footer a:visited
{
color:#f4e8c3;
text-decoration:none;
}
.footer a:hover
{
text-decoration:underline;
color:#ffffff;
}

Here is my Footer HTML code:

Copyright 2010 | Powered by WordPress

Do you know what I’ve missed???? Many thanks! Menno

Sorry, my footer HTML again…..

Copyright 2010 | Powered by WordPress

So, where in my CSS do I put the position: fixed; and what else should I put there because with these settings it gives an error!

Worked like magic. Thanks a million

Hi Jo,

Very nice this footer, thank you for this. One question, is there any way I can make the footer the same with as the header. My website looks just like your example and I want the footer just the same with and in the same position (center) as the header. Do you know a solution? Thanks!

thanks! i applied it in my site.

hey thanks this helped a lot