Hendra asked me in a tag about how to design a blog footer like mine, so I thought I should be sharing a little about my footer layout. Here’s the rough layout of my blog footer, with the names of the classes of the <div> tags. I’m sorry to my visitors who are colour blind, because the div containers are colour coded…
Note: the following article contains CSS terms which you might not understand. Don’t try too hard to understand it if you can’t - you can always ask me in the comment section 
If you get lost along the way, refer back to this layout guide below:
The main <div> classes for the whole footer layout are footer-cap-top (red), footer (orange) and footer-cap-btm (red). The reason why I didn’t actually merged them into one whole container is because the current version of CSS (which is CSS 2) does not support more than one background image per element. And since I wanted to make the footer expandable alongside with its content (ie, the footer’s height is not restricted, it stretches as far as the content goes) and wanted to add rounded caps to both its top and bottom, I can only cut it into 3 pieces.
Here’s the overall HTML code for the footer (heavily simplified):
<div class="footer-cap-top">Tagcloud header is placed here visually.</div><div class="footer"><div class="footer-left"><div class="footer-top">Houses the Wordpress tag cloud</div><div class="footer-left-left">Houses the list of recent posts.</div><div class="footer-left-right">Houses the list of recent comments.</div></div><div class="footer-right">Houses the About section.</div></div><div class="footer-cap-btm">Links to XHTML and CSS validator.</div>
Acknowledgement: The CSS styling for the display of the code above is created by Veerle.
Now the tricky part - visually I wanted to split the footer section into 3 columns, but this is impossible with the current CSS standards because for the float element only has two attributes, namely float: left and float:right. There’s nothing called center :S so what I did was to further separate the footer container into footer-left and footer-right (both are yellow).
The footer-right container is simple, I just had my contents housed inside paragraph tags and that’s all. It’s footer-left that is the one more on the crazy side. There are another three containers housed inside the yellow footer-left container - footer-top (green), footer-left-left and footer-left-right (both blue).
I think my styling is imperfect! I hope there’s a simpler way to hold my entire footer content together, because sometimes when I want to review the code it’s pretty tedious also! I also noticed that I should have named footer-top as footer-left-top, but I was too lazy to edit it when I was styling the footer, as it was about 2am in the morning and but hands are itching to upload this theme.
When Ivy made her new Springly wordpress theme, she talked about using tables instead of floated div containers to house her contents. I agree with her views, because in terms of cross-browser compatibility, tables are more suitable. Internet Explorer is well-known for its cranky CSS and HTML interpretation.
If you have any questions or CSS tips to share, feel free to drop a comment!
15 responses to Design Stuff
Responses can be separated into comments and trackbacks
Comments »
March 2nd, 2008 at 3:49 pm
wow, it’s one hella complicated footer
thx for sharing,
i was really curious too..:)
Check out momo’s last blog post: Momo & Five Vices Meme
March 2nd, 2008 at 11:09 pm
Yea haha it is indeed complicated! I actually wanted to use tables after reviewing the code but heck, I was way too lazy to do that (and fix the mess up, in case any comes by)…
March 2nd, 2008 at 11:11 pm
Thanks for visiting my blog! Hehe.
If you could provide a little “explanation” as to what the techie terms mean somewhere once - that would be great for reference.
Check out ^dee’s last blog post: I voted!
March 3rd, 2008 at 2:21 am
Whoa.. complicated footer indeed! Technically, when a div is going to only appear once in a page it’s best to use div id instead of div class. But it shouldn’t be a problem to use div class instead of div id. The problem starts when one uses div id instead of div class. It won’t validate.
There is one drawback to using tables though. Blind people cannot access it because it’s read by their browser as one block of image, rather than text. So I only use tables if I have no other options for less pertinent information (for the damn IE). That means I will never put my entries into tables.
Then again you gotta look at the demographics of your site. How many blind people actually visit your site? A tiny blog most likely won’t attract many blind people. At most 5. On the other hand, big sites like Dell, Microsoft, Apple, Google and CNN should make their sites more accessible to blind people. Unfortunately, they don’t.
Check out Ivy’s last blog post: Five Vices: An Internet Meme
March 3rd, 2008 at 2:30 am
Oh actually, my footer worked by splitting into 3. I had a float left, float right and then a center section which I float left as well. This is the actual CSS code. Since my footer headings like “tags” “categories” are actually part of the background, I had to really tweaks the alignment of the footer content to align with the background hence the margin-changes. If not, I don’t think they’ll be needed.
.table-left {
float:left;
width:200px;
margin-right:30px;}
.table-center {
float:left;
width:315px;}
.table-right {
float:right;
width:170px;}
Check out Ivy’s last blog post: Five Vices: An Internet Meme
March 3rd, 2008 at 11:26 am
Thanks for the two long comments
haha! I never knew tables are not blind-friendly! So far I’ve rarely used tables in Wordpress because the WYSIWYG editor doesn’t support insertion of tables (but I’ve installed extended tinymce plugin to expand its function)… I never really dared touch tables. The only table element in my blog is perhaps the WP-calendar, heh 
Oh and the 3-column floating hack I’ve thought of it before! I wanted to float the first 2 columns to the left and the other to the right, but I’m afraid of the complications (eg having divs floated all around the place). Haha!
March 3rd, 2008 at 2:25 pm
Ooh you use the WYSWYG editor, eh? I’m retro so I use the plain editor and hand-code everything. I use Dreamweaver to create the theme but I don’t use any of the features - I always end up just hand-coding. LOL. I don’t know why; it’s just easier on me.
Since I started in designing (more like messing with HTML) in 1996, tables are a lot more familiar to me than divs. Back then there was no CSS. So, layouts like ours will have to be fully coded in tables. It’s actually a lot easier than divs and is definitely going to be cross-browser functional. Too bad blind people can’t see it, so most designers phase tables out.
To control the floating tables, I use a wrapper to position it. The code is like this:
Left Column
Center Column
Right Column
Check out Ivy’s last blog post: One Thousand Blood Sweat Words
March 3rd, 2008 at 2:27 pm
Dammit the code didn’t show! I meant to say this:
[div id=footer-table]
[div class=table-left]
[div class=table-center]
[div class=table-right]
[/div]
Check out Ivy’s last blog post: One Thousand Blood Sweat Words
March 3rd, 2008 at 2:28 pm
Dammit the code didn’t show! I meant to say this:
[div id=footer-table]
[div class=table-left][/div]
[div class=table-center][/div]
[div class=table-right][/div]
[/div]
Check out Ivy’s last blog post: One Thousand Blood Sweat Words
March 3rd, 2008 at 9:47 pm
Sorry about the confusion about WYSIWYG thing. I was talking about not using tables in my posts because Wordpress’ WYSIWYG editor does not support tables insertion, but an extended tinymce plugin will help. Well back to the blog template designing part, I also stick to the old hand-coded, trial-and-error way
I just like it. I don’t usually use Dreamweaver, unless when it comes to imagemaps or the usage of sliced images because they involve way more complicated stuff (especially imagemaps, they’re pixel-precise)…
Same here. I actually try to wrap everything up before using floats because floated containers are notorious trouble-makers
heheh. Anyway thanks for leaving so many comments, I really appreciate them!
March 3rd, 2008 at 9:53 pm
What a footer! Haha! I went through it and didn’t understand like half of it, but I think that’s because my eyes are aching right now. I’m thinking of implementing additional functions in my footer, so I’ll definitely keep this post in mind!
Check out Id’s last blog post: Feels Like Tonight.
March 3rd, 2008 at 11:13 pm
I must say that my footer styling is one of the worst nightmare I’ve ever had. I hope there’s a way to optimise it! I think I’m really bad at explaning design in words, sorry!
March 5th, 2008 at 12:16 am
teddY - Your footer is freakin’ huge in terms of height and width! But it doesn’t really matter ’cause it looks so attractive and contains a lot of good information. I guess the trick though is making sure your users know there’s important information down there which is something I’m personally always leery about.
Check out Bush Mackel’s last blog post: Fixing Up - Learn Stuff Online (Part 1)
March 6th, 2008 at 12:17 am
Yea it is definitely the hugest of all the Wordpress themes I’ve used so far. I guess it’s the size of the tag cloud that has increased the size. The previous theme’s footer is almost identical to the current one (minus the tag cloud) and it was way smaller, haha
I was also worried that nobody bothered to read the footer, that’s why I’ve added a “Tag Cloud” link at the top of the page 
teehee.
One trackback »
You can link this post by getting it's permalink.
March 31st, 2008 at 11:05 am
Garage Door Hardware…
I always thought that was true until I talked to my brother. He has a different opinion….