Subcide

10. Footer

First we need to make the text look right. The design shows very light grey (#c9c9c9) Tahoma 10px text. I'm sure you can figure this one out yourselves, but for the sake of copy/paste:

#footer {
	clear: both;
	height: 66px;
	font-family: Tahoma, Arial, Helvetica, Sans-serif;
	font-size: 10px;
	color: #c9c9c9;
}

And to change the link colour (and remove the link underline) we add this:

#footer a {
	color: #c9c9c9;
	text-decoration: none;
}

But the links need some way to stand out when you mouse over them, so we'll make them turn orange on hover:

#footer a:hover {
	color: #db6d16;
}

We've also got to add a 1 pixel top border on the footer div, set some padding, and make the line-height 18px (increasing the leading). Because we are setting padding on the footer div, we will remove the height property to stop the padding/width/height bug I mentioned earlier. We don't really need height on this div anyway:

#footer {
	clear: both;
	font-family: Tahoma, Arial, Helvetica, Sans-serif;
	font-size: 10px;
	color: #c9c9c9;
	border-top: 1px solid #efefef;
	padding: 13px 25px;
	line-height: 18px;
}

The last thing left to do is float the alternate navigation to the right. Note that floated elements must have a width specified to work properly, so set the width to slightly larger than the nav actually needs, and set the text alignment to right so the text sits where it should.

#footer #altnav {
	width: 350px;
	float: right;
	text-align: right;
}

Tada! We have a footer.