Hello there. I am Terry and I am a full-time undergraduate based in Singapore. I take photos, write a blog and design websites.

And no, I'm not a teddy bear.

Design Stuff

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 :razz: If you get lost along the way, refer back to this layout guide below:

Teddyrisation Gamma - Footer Design

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):

  1. <div class="footer-cap-top">Tagcloud header is placed here visually.</div>
  2. <div class="footer">
  3. <div class="footer-left">
  4. <div class="footer-top">Houses the WordPress tag cloud</div>
  5. <div class="footer-left-left">Houses the list of recent posts.</div>
  6. <div class="footer-left-right">Houses the list of recent comments.</div>
  7. </div>
  8. <div class="footer-right">Houses the About section.</div>
  9. </div>
  10. <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!

Be Sociable, Share!

Burn after reading » Now you're done reading. What's next?


Related posts that might interest you:


Posts that are popular among visitors: