Designing a CSS based template - part VII

Before we start part 7 I want to correct a minor mistake of mine, mea culpa. When adding blocks of text I told you to put this between div tags but that is not semantically correct. It should be between paragraphs instead. This way everything still looks fine when the CSS stylesheet is dissabled. Doing so allows you to use top and bottom margins to adjust the vertical spacing between paragraphs. This way we also don’t need to use linebreak tags anymore. With this out of the way, bring on part 7. We will add a footer that sticks to the bottom of the browser window. I decided not to add the favorite links in this part yet because it would be too much. After all, this will be rather challenging and there is a lot to read too.

First I need to inform you that things are quite different when creating a footer that sticks to the bottom of your browser window in CSS compared to table layout. Unfortunately since Safari is such a young browser some things are still missing like min-width and min-height which we need for our footer (min-height). The good news is that support for this is coming. More on vertical positing and adding footers can be found in this very interesting article on A List Apart by Bobby Van Der Sluis. Actually, I recommend you to read this before continuing since it explains it all so clearly, and I really don't think I can do a better job here.

After reading the entire article you should know that we need to have 2 major containers to make this work: 1 container holding all the content and one container with the footer. Our container that holds the entire content is the "#container" id. This is the very first div in the code (after the body tag) which closes just above the closing tag of the body. In other words our footer div should be placed below the closing tag of the "container" id div:

This is the CSS code we add for the footer:

1. #footer {
2. margin: 0px auto;
3. position: relative;
4. background-color: #717F51;
5. border-top: 9px solid #F7F7F6;
6. width: 692px;
7. padding: 5px 0;
8. clear: both;
9. }

We add a footer with a dark green background and we give it a 9 pixel border at the top, in the same color as our frame. We define width and add "clear: both", which means that there are no floating elements allowed on both the left or right side of the footer. The footer is aligned the same way as our container by "margin: 0px auto" which has the same effect as a centered aligning. To leave some space around the text we add a padding of 5px on top and bottom. The position of the footer is relative. Explanation about positioning of elements can be found here on the W3C website.

Next we add styles for the text and text links for our footer:

1. #footer h2 {
2. maring: 0;
3. text-align: center;
4. font: normal 10px Verdana, Arial, Helvetica, sans-serif;
5. color: #D3D8C4;
6. }
7. #footer h2 a:visited, #footer h2 a:link {
8. color: #D3D8C4;
9. text-decoration: none;
10. border-bottom: 1px dotted #D3D8C4;
11. }
12. #footer h2 a:hover {
13. color: #F7F7F6;
14. text-decoration: none;
15. border-bottom: none;
16. background-color: #A5003B;
17. }

We use h2 tag for our text:

1. ....

We add this piece of code just under the closing div tag of the "container" id, in other words just above the closing body tag.

Next we add the javascript that Bobby Van Der Sluis suggests. This is necessary to make sure the footer sticks at the bottom of the browser window in Safari.

Make sure that the id you're referring to in the javascript has the same name as the one in your content.

If you preview what we have so far, you'll see that the footer doesn't show in Safari. What is happening in Safari? It might (not sure) occur because we have 2 (left) floating containers (#left and #content) above that needs to be cleared. I've written an article about this collapsing effect a while ago, but Eric Meyer published a full article about this matter which make things even more clear. As Andy Budd mentioned in my comments back then "When you float something you take it out of the normal flow of the document, thus it takes up no vertical height." Couldn't said it better ;-)

To fix this we need to add a clearing div:

1. 
   

We add this class:

1. .clear {
2. clear: both;
3. }

Here is the final result.

In our next part we will be adding the favorite links under the left navigation buttons. Hope you have learned a lot ;-)

from www.veerle.duoh.com