Consilience Media » CSS Positioning

Ionic – CSS multi column framework

Phill Brown — Fri, 01 May 2009 21:27:52 +0000

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.

Pure CSS Rollover Map Demo – England Regions

Jason Judge — Tue, 07 Apr 2009 16:36:30 +0000

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

Full Size with Picture Roll-Overs

You are not limited to colours in the roll-over. You can add whatever images you like. If using PNGs (as we are here) you can even include alpha-transparency to overlay the main map with a semi-transparent roll-over image.

Since this demo uses PNGs, Internet Explorer 6 (and below) users may see grey-blue backgrounds around the images. You can work around this by using GIF images instead. However, I would encourage IE6 users to upgrade in the first instance.

Credits

The rest are my own snaps: Catbells, Drax Power Station, Angel of the North, a member of the Queen’s Guard and a Clapper Bridge in Cornwall.

Menu Challenges 1

Phill Brown — Thu, 21 Aug 2008 19:12:09 +0000

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 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.