Veerle's blog

In part 1 I’ve showed you how I divided the design into different container div areas. In this post I’m going more into detail on the CSS/XHTML of the horizontal navigation. As I mentioned already in part 1, I use a technique called the Navigation Matrix written by Didier Hilhorst. In this technique, you use only 1 background image for the whole navigation. This background image is then placed to its pixel precise position using CSS background positioning.

Microsoft released a new Beta preview release of IE 7 at MIX06 a few weeks ago and said that it is feature complete and that no stuff will be added anymore. For me this was the perfect opportunity to test how my blog renders with this new version. For those who have no intension to read further I can say the browser is doing very well and there was only 1 minor issue but more on that later. There are still some bugs left but to me it is surprising that Microsoft is actually listening to us now and that alone is a very welcome change. The IE team has also set up an Internet Explorer Feedback site and issues reported during the IE 7 Beta 2 will be looked at. They will do their best to fix issues reported. So that’s why I wrote this article.

FACE stands for: Faruk’s Animated CSS Enhancements. It is a technique that combines JavaScript with the flexibility of CSS. It’s a way for designers to create animations without having to know Flash or JavaScript, so you could say that it fits in the world of script.aculo.us and MOOFx.

Time for a bit of CSS styling fun! When working with CSS you need to have the ability to analyze your layout and see how you would place your div containers. That’s what differs from working with a classic table layout. You need a whole different approach and think more in terms of containers. Stop thinking of how you’ll slice your layout, start thinking on how to put each graphic into a container… How much containers do I need without overdoing it?

While I’ve learned HTML back in the day when there weren’t any WYSIWYG editors yet (1996), I’ve always believed in their added value. I never developed websites entirely in the ‘Design view’ (even not during my table-based period), but I always appreciated the fact that I had the choice to switch between ‘Code view’ and ‘Design view’. During my table-based’ period I used DreamWeaver’s ‘Split view’ a lot, this way I kept an eye on what was happening under the hood. If you select an item in the ‘Design view’, the corresponding code is highlighted, a real time saver if you ask me.