Design exercises

1. An exercise in CSS, transparency and Javascript

The object of this exercise was to produce an accessible and visually attractive site using XHTML 1.0 strict, CSS and Javascript.

I wanted the pages to be semi-transparent and to sit on top of a large background image which could be seen through the page's content. I also wanted to use background rollover images for the main navigation links.

2. Multi-column lists using CSS and ASP

I was looking for a generic way of writing a variable number of records in a variable number of lists to a variable number of columns and making each column roughly the same length.

Instead of using a table/cell based layout, I wanted to write the page using simple, semantically correct XHTML (i.e. just lists) styled with CSS.

It works by dividing the total number of records by the number of columns required and then writing out the lists into columns of roughly this length.

3. Switching background images using CSS and JavaScript

I wanted a way to switch background images when they were hovered over.

I used CSS to change the background image for each list item on hover, JavaScript to help out with Internet Explorer and CSS again to preload the on hover images.

4. UK Postcode Locator

This tool will display the location of any existing UK Postcode together with it's Latitude, Longitude & Ordnance Survey Grid Reference.