WPDFD Issue #58 - January 01, 2003

New CSS Books

The trouble with books about Internet technologies is that they go out of date so quickly. The first book about Cascading Style Sheets that I bought was 'Cascading Style Sheets - Designing for the Web' by Håkon Wium Lie and Bert Bos. I don't think the information in it is outdated, it is still a very good CSS primer and general reference, but there are some excellent new books that cover the subject in ways a little more relevant to the latest browsers.

Happy New Year!

First of all, a big thank you to everybody who entered the WPDFD Holiday Competition and especially those who passed on suggestions for new articles. Most people want to read more about Cascading Style Sheets and so I'm kicking off the new year with an article about combining CSS and JavaScript. I am, of course, happy to receive suggestions at any time but please keep in mind that the focus of this site is on graphic design and creativity, so topics like databases, PHP and site management really belong somewhere else.


Scripting the Box In the November issue, I showed how to achieve rollover effects using just style sheets and no JavaScript. This time, I'm pulling out all the stops, no holds barred. CSS plus JavaScript makes a very potent mix indeed. With JavaScript, you can change CSS box properties in real time. You can make boxes come and go, change sizes, positions, colours - just about anything - and it's not too difficult.


Vertical Centering with CSS Although it is easy to centre elements horizontally in a CSS box, there is no direct equivalent of the 'valign' used for vertical alignment inside table cells – but there is a way to spoof it. When you think of absolute positioning, you probably think in terms of absolute pixels, but absolute positioning also works with percentages. For instance, if I have a box that is 250px wide by 70px high, I could position it at absolute 50% from the top and 50% from the left of the page and its top left corner would be at the centre of the browser window.