CSS Footer help??

Hey all,

a quick question, i was wondering if someone could provide me with a tutorial or help on how to create a footer that stretches the whole way across the webpage at 50px or so height and has the links centered on the page with font size 12px with a white background??

Thanks

Kyle

 

Put this in your css file

#footer {
background: #fff;
font: normal 0.8em Arial;
height: 50px;
width: 100%;
text-align: center;
margin:0;
padding:0;
}

#footer a {
color: #000;
text-decoration:underline;
margin:0;
padding:0;
}

#footer a:hover {
color: #ECC34F;
text-decoration:underline;
margin:0;
padding:0;
}

Code (markup):

<div id="footer">
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
<li><a href="#">link5</a></li>
</ul>
</div>

HTML:

 

Hi again, I have added the css to add a footer but have encountered some problems, first of all the footer sits at the top of the page and secondly the gray doesnt stretch the whole length of the viewed page instead it is set at the length of the wrapper and I also cant see the links, how can I sort these problems out? :s

test page link in title

Thanks for your help

Kyle

p.s can the main links at the head of the page be centered in the wrapper without padding etc??

 

It sounds as if you're using absolute positioning to lay out the page. While this is a legitimate method, it has a lot of gotchas waiting to bite you on the butt—as you have seen.

If that's the case, you ought to rethink your approach.

Post a link.

//edit: Didn't notice the subject line. Will take a look.

cheers,

gary

 

Try adding clear:both; to the footer's CSS. It's a bit hard to determine the nature of the problem without seeing the actual page, but if you're using floats, chances are you're not clearing it properly.

 

Yup. Not a good use of absolute positioning.

What's the page supposed to look like? Can you supply a drawing?

cheers,

gary

 

I made some changes to the layout. Now it looks ok in FF. Has a little IE tweaking to do. Hope it suits your needs. you can take the file from the zip package.