Gone are the days when a footer merely ended the page. Now it is just as likely to be an all-encompassing launchpad to other areas of the site. Typically a footer will run the full length of the layout, and it is usually used to display information at the bottom of the content hierarchy, such as copyright information, accessibility or validation information, and possibly contact details or company legal information.
For the quirky footer, the aim is to use a large background image that blurs the boundary between column area and footer, by acknowledging the background color of the page and having it influence the footer. In this case, the white background of the page becomes the bubble coming out of my mouth.
Let’s go through this idea step by step, but consider how you could use an equally inventive image to make your footers that bit quirkier. Armed with a correctly-sized image and some well-styled text, the dull footer can be consigned to history.
Prepare the Footer Markup
The first task is to add the information that you want to show in the footer. At this stage, you should not be thinking about the presentation, only the important stuff - the content. Here, it is important to show copyright information and other site acknowledgments, so these go into the markup inside paragraphs.
The idea is that whatever madness you use to make the footer seem all wacky and zany, the actual markup is never compromised. Basically, I know I’m going to place the information in a comedy bubble, but at no point should I limit the amount of information because I fear it might not fit the graphic. Content is always more important than presentation - but you already know that.
Apply the Background Image
The aim here is to make it look as if I’m speaking the information, so a speech bubble graphic is created. This graphic is exactly the same width as the layout (760 pixels), and has ended up being 128 pixels in height. As you’ll see in Figure 1, the author needs a shave.
Figure 1: Customized background image for the footer. Simon says…
Now the CSS. The first task is to ensure that there is no internal padding for the footer, or left or right margins. This ensures that the image will sit perfectly, and that any element to be placed within can be positioned using its own CSS rules to avoid confusion.
Next, the background image is declared and set to no-repeat. Sure, it’s the same size as the container, but it is worth ensuring there will be no hint of tiling. Finally, the height of the footer is adjusted to match the height of the image.
/* Footer */
#footer {
clear:both;
margin:10px 0 0 0;
background:url(/images/bubble_footer.jpg) no-repeat;
height:128px;
width:760px;
}
Figure 2 shows the result in the browser. Note that the juxtaposition of image and text is OK, but not quite right. Longer paragraphs extend beyond the boundary of the speech bubble.
Figure 2: The paragraphs are too long, extending outside of the bubble.
Fine-Tune the Paragraphs
This exact placement of the paragraphs can be controlled by first using 15 pixels of padding at the top of the footer to shunt the first paragraph down further into the bubble, and then by defining properties for all paragraphs that appear inside the footer. The key values are for the paragraph margins, and these can be tweaked until the exact effect is achieved.
Most importantly, the paragraphs are given a width, which is just a bit shorter than the average distance between the left side of the footer and the curve of the bubble. This width declaration will force the text to wrap way before it reaches the curve.
/* Footer */
#footer {
clear:both;
margin:10px 0 0 0;
padding-top:15px;
background:url(/images/bubble_footer.jpg) no-repeat;
height:128px;
width:760px;
}
#footer p {
margin:0 0 6px 35px;
padding:0;
width:330px;
font:13px/120% normal Verdana,Arial,sans-serif;
}
The final result is shown in Figure 3, as it would appear in the base of the browser window. It is possible that if more text were used, the paragraph margins and width might need adjusting as the curve sharpens, but it is fine for this example, and the quirky footer is achieved with minimal effort.
Figure 3: Simon says, “Touch this code, and I’ll find you…”
Like this article? Digg it!
The Book
This feature is an excerpt from ‘Beginning CSS Web Development: From Novice to Professional’ by Simon Collison. This book will quickly see you on your way to building rich CSS layouts, plus it has advice on common tricks and troubles. In the next part of this chapter, you’ll learn how to create advanced footers, such as this one from Derek Powazek. Order the book here.
But doing this, you can’t rezise the text in IE, and it’ll go everywhere if you try doing it in any other browser..? Or am I simply missing something here?
John: Unfortunately this is only an excerpt from the book - a mere teaser, so you don’t get the bit where we go on to make it bulletproof by aligning the background-image to the base of the footer (creating more white space above as text is resized), and also how to do away with the footer height.
It is a “Beginners…” book, so I tend to do things a certain way, and then break it down and look at ways to make it more flexible in other scenarios.
We had wanted to reproduce the section about “Action-packed Footers” but it was too long…
No, you’re right John. The article ended so abruptly…I was anticipating seeing how he’d address the text size issue. Includeing a lot more content or enlarging the text twice or more would definitely break the bounds of the bubble. However, the article sparked some fresh ideas in my head about footer use, so for that I’m grateful.
My thoughts: a nice teaser for the book… ;)
In your example you should make the arrow of the bubble pointing to your mouth, not to your forehead. Otherwise you might want to use smaller bubbles for “thinking” ;-)
Hm, i don’t think that thinkvitamin is the right address to present a beginner’s book. Most of the readers will have a advanced css- and xhtml-knowledge. And this few lines of starter-css might be possible for everyone out here. But it seems that your book offers good techniques for beginners. I don’t critizise the published content of the book, but seeing it published here.
Don’t liked this one. Waitin’ for better ones.
Greetings from Germany,
Stefan
Agreed with Stefan: thinkvitamin is not a beginner’s site. This isn’t the right forum for this level of tutorials. Ryan, you listening?
Er - that’d be me not Ryan, please feel free to get in touch with requests of what you would like to see.
Maybe I missed something but this article seems very rudimentary and of little help for anyone
who’s worked with CSS before.In reply to Stefan’s comment, “Hm, i don’t think that thinkvitamin is the right address to present a beginner’s book. Most of the readers will have a advanced css- and xhtml-knowledge.”
I would disagree. I have been developing with XHTML/CSS for almost 4 years now and still consume every CSS book that I can get my hands on. I just started Colly’s book last week and even though it covers a lot of stuff I am already doing I always pick up new nuggets of wisdom in almost every book or blog I read.
On top of all of that there are quite a few people who are still working out the kinks or just diving into the world of Responsible Website design and every example helps. I agree the teaser is not the best approach but anything that gets the hamster wheel turning is always welcomed.
I enjoyed it. You never know when you’ll run into a way to do something better than what you’re doing right now.
Wow, these comments are getting a little harsh… To toss my two cents in, I think this is an excellent idea for a vitamin article. While I agree that the css is a little basic, I find that most articles that include css examples spell it out a bit too much for my taste. If we’re such advanced css/xhtml writers, why do we need any of the code presented to us? If we’re so good, why not just save the author some time writing it out and the reader some time skipping through it?For example, recently ALA published an article about sandbag divs. I thought it was brilliant, and though I wouldn’t use an empty div to save my life, I still thought the idea was great, and the scripting/styling simple enough that the hand-holding code samples might have been a bit too much. But regardless, calculating whitespace and subtracting from the image width needed to be demonstrated somehow, and that was probably the easiest way to do it.Until reading this, I’ve always treated footers as a polite way to say to the user “Stop scrolling! That’s it”, and just filled them with whatever I could: accessibility statements, links to site maps, etc. The value in this article doesn’t seem like it’s supposed to be in teaching us how to code, but rather showing that a footer can be more than just a pretty way of saying “fin”, and in that I think this article succeeds.
To contrast some of the comments here: I agree that thinkvitamin should be an area for advanced topics. I will also say that this teaser is just a SMALL portion of an overall excellent book. Simon does an incredible job with this book, and even if you consider yourself an advanced CSS developer, this book is still worth having on your shelf.
Though some of your comments seem somewhat harsh, I understand your points completely - just don’t discredit this small teaser from an incredible web developer - do yourself a favor and check out more of his book, I promise you wont be disappointed.
In my opinion, the idea of the article was not to teach a few lines of simple CSS but to show an alternative to the standard footer used on most sites/blogs.
The article has certainly sparked my interest in looking for a more creative way to visualize the footer information on future design I’ll make. Thanks Simon!
Is that common practise to use both px and % in a font? I haven’t seen that before, but I must admit that i’m rather new to this css stuff.
A change from the standard boring footer is refreshing. I came across a site today that is doing just that with there footer, making it more of the focus on the page. Find it at www.northtemple.com
@Thomas,
In the font shorthand specification, the font SIZE and LINE-HEIGHT are declared in pairs, and can be mixed values. You can use em, px, or %.
In the code font:13px/120% normal Verdana,Arial,sans-serif;, 13px is the font-size, and 120% is the line-height.
Although, I do believe it is incorrect to declare anything but font-family after the size/line-height declaration.
Thank you for showing the coding - I’m a beginner and I really appreciate that you show the steps. If you are an advanced coder, you already know how to scroll down quickly, right?
I had to chime in with a statement about the simplicity of this article.
I personally consider myself advanced in CSS. However, from what I’ve seen, thinkvitamin is not just dedicated to CSS. I am constantly wanting to learn things about AJAX, Web 2.0, etc. In those fields, I consider myself a beginner. I imagine there are others who come to this site as beginners in the CSS field as well.
I am always referring people that have questions about learning HTML/CSS to this website (among others). Thank you for the simplicity of this article and others. It not only benefits us veterans of CSS, but also the CSS rookies out there.
Speaking of article topics, CSS and footers, one thing interesting is all CSS footers that are always at the bottom of the page even when content isn’t pushing it from above.
I’ve read several articles over the years about this, but none seemed to take the pie. Maybe it would be a good time to give an examples on hacking IE6 with grace for IE7.
Being advanced in one area of the topics Thinkvitamin publishes doesn’t mean being advanced in all topic areas this website publishes. Therefore, while I consider myself advanced in terms of CSS, I do consider myself relatively new to the realm of JavaScript in comparison. There is something here for almost everyone to learn. I’d be happy to see more unobstrusive Javascript/DOM articles but who am I to say? Who knows how many advanced Javascripters or Rubyers, devs would love more articles in the nature of this one here? I like it and I like the fact that more levels than one are adressed on Thinkvitamin. :)
I’m sorry, but this article is not up to par with Think Vitamin’s regular articles.
I liked the article. I’m not a graphic designer, so I like to read about these simple stylistic flourishes that anyone can do.
And PS: It’s not like ThinkVitamin is overflowing with content. What they have is good, but they clearly need more. The front page seems to stay the same for a week.
thanks for the article Simon.
although not the most advanced tutorial on CSS (which I don’t think was the main point anyway), I thought it was a great piece highlighting the rise of the footer, an often over looked and underused part of a page design. I’m loving the heavy footers used in sites such as www.garrettdimon.com and skype.com, really seems to round off a page and also keep the user involved with the site once they’re done & dusted with there reading and ready to rush off too another site.
thanks again.
Simon,
Thanks for the article from one of the beginners who reads Vitamin. I think the footer is great place to add some creativity to a web site. You have certainly given me some creative inspiration.
This was good for inspiring people to think about the design of footers.
I had to read the comments to find out that this is an excerpt out of a book. I think the article should be judged on its own merits, not on the book’s. I feel that this article is very short and doesn’t really take an in-depth look at the issues, such as text-resizing, box model incompatibilities, etc…
Beginners’ tutorials are great, even on this site (which really does have a more advanced audience), but make them more substantial, or if you are trying to showcase literature, which is excellent btw, mark it clearly so we know what the deal is.
This is my first stop by www.thinkvitamin.com. I was brought here by the HTML email article [excellent]. And I stuck around to read this. Honestly, it made kind of sad. It’s a nice, little idea, but it’s really about selling his book and not informing us. And it doesn’t do this site or the author justice. Put up the whole tutorial - and if I find that useful, I’ll probably pick up the book. If there is so little in the book that this one tutorial would weaken it’s sales…there’s not much there to be had…
OK, OK, OK.
I tried to be thick-skinned, but this is obviously going to go on and on and on.
I had very little to do with this appearing on Vitamin, so I ask you all to go easy. Likewise, Vitamin, nor myself where responsible for selecting the item to be used from the book. Books have to be sold, and publishers do whatever they feel necessary.
I’m not a Vitamin columnist (or “correspondent”) either, as this was not written specifically for this website, and it forms part of a much wider book chapter.
When I don’t like something, I tend to just move on, forget about it, rather than feel the need to comment and frustrate the author. I’m obviously a bit more easy going.
Merry Christmas…
Well, I must say you have tried your best to give a makeover to one of the most overlooked sections of website. A nice footer can not only change the overall look and feel of a website but also add a new meaning to the whole page.
Great effort, Keep it up. Hope to see some more tricks from you in the new year.
Merry Christmas and Happy New Year 2007.
I enjoyed the fresh look on footers which really are the most boring part of any web design job. So thanks for that…
Do you think that the upset people who commented are authors who could not find anyone to host a part of their book on a website? Sour grapes ;)
[…] Bye-bye to boring page footers Footers don’t have to be boring. Simon Collison describes one possibility to make footers visually appealing. […]
See us today for Denver Colorado’s best vinyl siding, doors and window companies.
I saw this and thought of a project I used to work on - http://www.gurn.net
the footer changes based on times of the day and if you are in the ibiza secton or not - uses exactly the same principles though.
Great article
[…] Bye Bye to Boring Page Footers - Simon Collison shows you how to sign off with style by adding a quirky footer to your site, using some nifty CSS and a background image. […]
[…] Bye Bye to Boring Page Footers - Simon Collison shows you how to sign off with style by adding a quirky footer to your site, using some nifty CSS and a background image. […]
tit and ass…
tit and ass company…
avi download free player…
ka-ka-sh-ka 4540125 Relevant information about avi download free player….
[…] read more | digg story Posted by seethepost Filed in news […]
The backgroung may be fix:
div.fix {
backgroung-image:url(bild.jpg);
backgroung-repeat: no-repeat;
Background-attachment:fixed;
}
oo very godd