4 December 2006
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.
