Introducing Ionic, a CSS framework put together to specifically handle layouts with more than 2 columns in CSS.

The framework, originally written by Jason under the name ‘fluid1′, has been used on our client’s website, IEMA.net, since 2005. The aim of the project was to make it accessible to all the common browsers, whilst keeping the HTML markup as semantic as possible.

Currently the script only supports a maximum of 3 columns, but there is no reason why the algorithm can’t be extended to support any number of columns.

Ionic has its own microsite under development where you’ll be able to grab the latest releases and find out more about the framework. The link is:
www.consil.co.uk/ionic.

A tutorial for producing these maps will be provided soon. With the help of InkScape and a spreadsheet, they are not quite as fiddly as you would expect. Each map consists of a single image, with all the roll-over images as a part of the main map image.

It uses a ‘sprite’ technique to move the roll-over background images into position when the mouse hovers over the [square] regions. Why do it like this? Firstly there is no JavaScript involved. Secondly it keeps the number of objects downloaded to a minimum – just one stylesheet (or set of styles) and one image. Lastly, it degrades nicely to a simple unordered list when CSS is not available or relevant.

Half Size

• North East
• North West
• Yorkshire & Humberside
• West Midlands
• East Midlands
• South West
• South East
• London
• East Of England

Continue reading »

Follow me on Twitter

Ok, so I’m getting into my site now. The wrapper is in place, and I’m moving on to the menu:

As you can see, this isn’t your ordinary set of tabs and is causing a number of problems for browsers.

Rounded Corners

The problem with this menu is that it’s got a curved highlight hover. There are 4 different ways to curve boxes:

1. Nifty Corners:

Uses JavaScript to insert <b> 1px in height and reducing in width.

PROS: Scalable, Works on all browsers
CONS: Doesn’t support borders, Fixed Radius

2. Background image

Have a single fixed image appear in the background.

PROS: Fast loading speed, Works on all browsers, Supports borders, Flexible radius
CONS: Isn’t scalable

3. Positioned Spans

Have 4 span blocks load up inside the list item. The blocks are given a background image and are then absolutely positioned into the 4 corners.

PROS: Scalable, Adjustable radius, Supports borders
CONS: Slow loading speed, Doesn’t work well on IE6

4. CSS 3

Use the new CSS 3 rounded corner properties:

• -webkit-border-radius (safari)
• -moz-border-radius (firefox 3)

PROS: Fast loading speed, Scalable, Adjustable radius, Supports borders
CONS: Doesn’t work on IE and old browsers

In the end I took the CSS 3 option. The lack of curvy corners didn’t make it look dirty as it would on sites that are totally curvy.