Hari's Corner

Humour, comics, tech, law, software, reviews, essays, articles and HOWTOs intermingled with random philosophy now and then

New fixed width look

Filed under: Site management by Hari
Posted on Mon, Mar 5, 2007 at 17:34 IST (last updated: Wed, Sep 26, 2007 @ 14:47 IST)

In my constant attempt at tweaking the XHTML and CSS code on this site, I've changed my theme yet again. It shouldn't surprise regular readers of my blog. However, this one is a fixed-width theme (and not a fluid theme like my previous themes). The header image is from a photo taken by my mother several years ago on a business visit to Germany and I thought I should spice up the look with a nice photographic image instead of a solid block of colour or a pattern.

I've taken a lot more effort over this theme, but the result has been pretty decent I think. CSS is quite fun and rewarding for web design and I highly recommend using it to achieve layout effects. You can get a lot of control using <div> tags and I still haven't explored the advanced cool effects that can be attained with CSS (like shadowed borders for boxes, curved layouts using images and so on).

Hope you like this design. On a related note I'm planning on making all my previous themes available for download after removing all the extra code changes made for plugins.

Update: Theme now works correctly with IE 6 too. Just a minor CSS change did the trick (used the padding attribute instead of the margin attribute)

11 comment(s)

  1. Damn, why does a pixel-correct theme like this give problems with extra spacing with IE 6? I hate Internet Explorer... :evil:

    Comment by hari (blog owner) on Mon, Mar 5, 2007 @ 18:54 IST #
  2. Anyway it looks cool in IE7 Hari!

    Comment by Logesh TamilSelvan (visitor) on Mon, Mar 5, 2007 @ 22:12 IST #
  3. Does the sidebar appear correctly or is it at the bottom of the content?

    Comment by hari (blog owner) on Mon, Mar 5, 2007 @ 22:14 IST #
  4. This is definitely cooler: good job! Sidebar appears correctly

    Comment by Sudipta Chatterjee (visitor) on Mon, Mar 5, 2007 @ 22:48 IST #
  5. Thanks Sudipta. The sidebar is fine in Opera and in Firefox/Iceweasel. I am more concerned about how it looks in IE 7. Since I don't have Windows XP could you confirm this for me when you have the time? :smile:

    Comment by hari (blog owner) on Mon, Mar 5, 2007 @ 22:50 IST #
  6. Looks good!IE6 is indeed broken tho - the sidebar is at the bottom.

    Comment by Dominic (visitor) on Tue, Mar 6, 2007 @ 15:11 IST #
  7. And how about in IE 7? I don't think too many people will be using IE 6 these days. I took a lot of trouble over this theme and IE 6 *has* to spoil the party. :evil:Thanks Dominic. :grin:

    Comment by hari (blog owner) on Tue, Mar 6, 2007 @ 15:16 IST #
  8. Update: theme now works perfectly with IE 6 as well. Must post the fix before I forget.

    Comment by hari (blog owner) on Tue, Mar 6, 2007 @ 16:27 IST #
  9. Looks ok in Opera as well.

    Comment by drew (visitor) on Wed, Mar 7, 2007 @ 01:16 IST #
  10. Seems as if your top logo isn't a link to the homepage any longer. Much easier than clicking on the home link off in the sidebar.. ;)

    Comment by drew (visitor) on Wed, Mar 7, 2007 @ 01:17 IST #
  11. Drew, the top logo couldn't be made a link because it's a background image of the &lt;div&gt; tag. Unfortunately I could find no easy way because I didn't want to use the &lt;img&gt; tag since I'd have to use the path from the main directory. And use the &lt;a&gt; tag to wrap the &lt;div&gt; tag does not validate as XHTML.I'll probably just put a text link in the header as well for the home page.

    Comment by hari (blog owner) on Wed, Mar 7, 2007 @ 07:38 IST #

Comments closed

The blog owner has closed further commenting on this entry.