Aug 20
Designing a CSS based template - part VII
2004 at 12.50 pm posted by Veerle
UPDATE: 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. (Previous parts: part 1, part 2, part 3, part 4, part 5 and part 6.)
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:
<html>...<body><div id="container"> ... </div><div id="footer"> ... </div></body></html>
This is the CSS code we add for the footer:
#footer {margin: 0px auto;position: relative;background-color: #717F51;border-top: 9px solid #F7F7F6;width: 692px;padding: 5px 0;clear: both;}
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:
#footer h2 {maring: 0;text-align: center;font: normal 10px Verdana, Arial, Helvetica, sans-serif;color: #D3D8C4;}#footer h2 a:visited, #footer h2 a:link {color: #D3D8C4;text-decoration: none;border-bottom: 1px dotted #D3D8C4;}#footer h2 a:hover {color: #F7F7F6;text-decoration: none;border-bottom: none;background-color: #A5003B;}
We use h2 tag for our text:
<div id="footer"><h2>....</h2></div>
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:
<div class="clear"> </div>
We add this class:
.clear {clear: both;}
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 ;-)
23served
1
Nice article, once again :-)
When doing this sort of design a while back, using a number of columns, 2 or 3 and paragraphs with a bottom margin in the middle column, a footer set to clear:both. You will come across a horrible Opera bug, that still exists in 7.54
Basically in Opera, ending your middle column in a paragraph will affect the spacing below your left column!
I submitted it, but apparently it wasn’t new still isn’t not fixed. I also found a sollution, quite unnecessary really. Basically always end your middle column on <div></div>.
See original discussion.
2
I love your blog, I love your blog, I love you blog!!!
Just so you know :D
Keep up the good work!!!
3
What an amazing article. Thanks for addressing the bugs!
-Shade
4
The funny thing is with the use of this [removed] If you enlarge the text, the footer will remain the same distance from the end of the content. Once you reload again, it either put’s itself at the bottom of the page or at the end of the content.
To try this you need to decrease the text size, reload and then enlarge the size of the text again.
This probably won’t be noticed to quickly on small screens (10x7 and under) but on larger screens it might raise some eyebrows.
5
AkaXakA, you are right, this happens since the page doesn’t reload when you enlarge fonts and since it doesn’t reload, it doesn’t execute the javascript (which is needed to place the footer right at the bottom). I find this a minor thing, it’s much worse when the total layout looks messed up. At this point in time it’s the best solution available out there.
6
I agree, except if you could force a reload on text-resize. It’d probably just add more weight to the JS though.
7
Hi, a question:
I was wondering: why not put the footer IN the container, and use clear:both to place it below the content and menu? Then no javascript is necessary at all. That’s a fairly common way of doing a layout like this (see this example).
Or do I understand it correctly that you want to have a full-height container no matter what the height of the content is?
I know there are more ways to solve things: that’s why I ask!!
Matthijs
8
@AkaXakA, I see, but unfortunately I’m not a JavaScript specialist :-( But if anybody has experience with this, don’t let it stop you ;-)
@maththijs, it’s just that in our design the column background sits in the body tag, so it goes all way down to the bottom of the window. In this design we need to have a footer that sticks at the bottom.
Of course if I would change things here and there (in my design and in the CSS) I could achieve what you are suggesting: a footer that comes right under the content, no matter the height (just like my blog). But changing things like that will make it complicated to learn it step-by-step, and I’m afraid people will get lost along the way. You know, I started this tutorial and I prepared just step-by-step 1 day a week. I didn’t create it all in once and then post part by part. Maybe I should have done that, but I thought, if I do it that way I may forgot my actual steps and the “problems” I’ve encountered etc. and it might not be as good. I’ve wrote it now from my experience step-by-step of each part.
But on the other hand, if I created the whole page first and then wrote the tutorial, I would have known the “end” and I could have changed a few things here and there to create an “easier” template, and easier tutorial with less “surprising problems” on the way. I could leave out the drop shadow around the layout, since it makes things more difficult to implement because I use background pattern. Then I could have created a footer like you are suggesting (since the white frame would be just a 9px white border defined in the CSS, the background would be just a repeated pattern etc.)…
Thanks for the URL here btw :-)
9
Ok, that’s clear. I forgot about the background image on the body element.
It wasn’t meant as a critique by the way! I think these tutorials, and the step-by -step approach you take are very nice and informative. Certainly for people with little css experience. You don’t want to expose someone with all the possible techniques for layouts, and all the bugs etc. Many of the obvious bugs, difficulties, questions etc will.appear here, in the comments ;)
So my compliments! I think I would have learned css a lot faster if I had come across these tutorials earlier (still a lot to learn of course....).
Matthijs.
10
@matthijs, I know it wasn’t meant as criticizing. I’m always keen on learning myself here. And yes it’s better to learn about the pitfalls along the way (one by one) instead of putting it all in a tutorial.
11
Just noticed that you have Part VII out too. Great, great, great!! :)
12
Veerle, could it be that there is a problem with the javascript?
If you compare my version without the javascript here with one with the javascript, in Mozilla Firefox (you’ll need a resolution of at least 1280 x 960 I think) the one without obviously isn’t placed at the bottom, but the one with the javascript is placed at the bottom, but then almost a whole further screen down. And this doesn’t happen in IE, as the version with javascript sticks to the bottom as expected, without the extra screen problems Mozilla Firefox has.
I could almost swear I’ve copied your example code bit by bit and checked it through over and over again, so how come your example site does look fine in Firefox by sticking to the bottom of the page without scrolling it down, and mine just doesn’t want to?
Thanks if you have the time to help, although I realise you must be busy too. Problem is that I think you may be the only one capable of answering this question since you wrote the tutorial of course. :o)
13
Huh? This all of a sudden worked as soon as I put <p></p> tags around the text in the footer. I swear the weirdest things happen as soon as I start using CSS.
14
Hmm, I spoke too soon. That was just because I wasn’t using the Javascript at the time, but with the script the footer still moves down a screen further from the content.
15
I am having an odd problem that the footer’s background-color does not show in Firefox. It shows transparent. Here is the CSS code:
#footer {
margin: 0px auto;
position: relative;
background-color: #26325C;
border-top: 1px solid #000;
width: 780px;
color: #fff;
clear: both;
}
It work’s fine in IE (these are the only 2 browsers I have) but for some reason not in Firefox.
Any help would be appreciated.
Thanks
16
@cmhampton, is there an URL where I can look at? I can’t fix anything or give you some help from this code only I’m afraid.
17
Let me work on that. It’s behind a secure server, and I doubt my boss would like me giving out login info. I’ll get back to you.
Thanks,
Chris
18
Hello Veerle,
i’ve learned loads from your tutorials, and think you’ve done a great job… thank u!
i was wondering if you could help me with a problem i’m having with my css.
1. i’ve decided i wanted the main container to be 699px so that the background white area stretches to 750px.
as a result, i’ve changed the container widths appropriately. however, in IE6, my header only stretches to about 700px. if i change this, it pushes the container to the left and doesnt align with the background image. why is this? it works fine in firefox. and even with the Tan Hacks i can’t seem to get it right.
2. the same thing happens to the footer. and strangely enough, it happens to the footer in firefox as well. ??? what have i done?
please let me know if you have any idea how to fix this. i’m beginning to think its the background area, maybe you found the perfect width?
thanks!
betta
19
Hi Veerle,
I came to your blog since three months ago.I just love the tutorials you made. I want to tell you that I had done all the exercises listed in TUTORIAL, from them I really learned a lot. So thank you so much for writing great things for the CSS beginners.
For four months learning,I created the Hispanic dating service site.It’s the first site i’ve made.
Thank you again!
20
very good tutorials, i wish i found this site sooner. anyway thanks
21
Came across your blog while looking for CSS Tutorials and I have to say - Excellent tutorial :) and super blog.
Nice work, Veerle
22
congratulations for the great tutorial!!!
23
Hi Veerle!
First of all, i really like your new blog style/layout!
Thnx for your great tutorial! i made some websites before, but never with CSS, it was a great help! i plan to use this tutorial for other websites i will be creating!
There’s only one slight problem with my current webpage, and it actually is pretty much the same as Atlantis desribed earlier. The footer doens’t stick at the bottom of the page (e.g. window). Instead it jumps a little downward. This only occurs in FireFox, in IE it is just working fine.
I tried alot but can’t figure it out what the problem is.
the address where the site is located:
www.scd33.nl/index2.htm
and the CSS file:
www.scd33.nl/styles.css
I hope you can help me out here, thnx in advance!
With Regards,
Boy Litjens
ps: the webpage itself is in Dutch, i created it for my soccerclub. (on www.scd33.nl you will find the current website)