cre8d design

Last week my power supply died on my laptop so I had few unexpected days of spare time up my sleeve. I pulled out a couple of books I’ve been meaning to read but haven’t got around to: Web Standards Solutions: The Markup and Style Handbook and Bulletproof Web Design, both by Dan Cederholm of SimpleBits. I’d recommend both books. They’re easy to read, reasonably concise (although I found the chapter summaries a bit repetitive/redundant) and very practical.

If you’ve read about web standards and you’re delving around in HTML/CSS and wondering if your coding could do with some improvement, Dan is a great teacher. I’ve been using CSS for many years now…in fact, I still remember printing off a very long series of Web Monkey articles about CSS when its use was still fairly new and reading them on the bus on the way home from University. I remember thinking, oh wow, this will save a lot of time and code will go back to structured content and all the styles will be managed by CSS.

The great thing about CSS is that’s there’s always something new to learn with new challenges… thanks to browser differences (although this is less and less of a saga than it was. What Dan reminded me of is that I should focus really hard on thinking about the best tags to describe the data on my page – whenever there’s a list of items (e.g. on a menu), always use a list tag… For experienced CSS users, these books aren’t a waste of time. There’s always new approaches, tips and tricks that can be picked up when seeing coding through someone else’s eyes.

A handy tip I picked up from his book:

If you want to have a background image for a navigational tab, and a different background image for when you mouse-over the tab…and you don’t want to use messy Javascript to pre-load the mouse-over image so that it doesn’t pause before showing the mouse-over image… there’s a nice way using CSS!

Create one image for your tabs with the different tab images sitting one underneath each other. You’ll need to think about how high your tabs will (possibly) be. e.g.:

In your stylesheet, add in some code like this:

#mainmenu li a { background-image: url(images/tabs.png) no-repeat top left; }
#mainmenu li a:hover { background-image: url(images/tabs.png) no-repeat bottom left; }

What happens now is that you’ll normally see the top part of the tabs image but when you mouseover the link in the main menu, you’ll be seeing the bottom part of the tabs image!