CSS - examples

Interface examples

Steel interface

Simple 3 page CSS site

Navigation

Text links

Simple text links

Mimicing vertical buttons

Mimicing horizontal buttons

Image links

Simple image rollover link

Multi-state links employing a single background image and an unordered list

An navigation bar that uses a single background image to create individual states for each link

Drop down / fly out menus

Note: Due to a bug the following don't work in IE5/6/7 ...

Using the display attribute to create a dropdown/flyout menu

Using the visibility attribute to create a dropdown/flyout menu

Styling text

Re-defining text tags

Superscript and Subscript

Styling tables

Re-defining table tags

Images stuff

Formatting images

Controlling image opacity

Controlling image visibility with CSS

JavaScript / CSS Rollover thumbnail image gallery

Layout & positioning

Layers

Layer positioning

Centering a site in a browser window

Fixed position sidebar with centered content

Layering with Flash movies

Footers

Positioning a footer that moves downwards as content is added to the page

Float & Clear

Creating columns

3 fixed columns centered in a browser window

2 floating columns

Boxouts

Multiple boxouts

Layer visibility

Controlling layer visibility with CSS

Controlling image visibility with CSS

Controlling layer visibility with JavaScript

Toggle layer visibility with JavaScript

Layering with Flash movies

Note: Due to a bug the following don't work in IE5/6/7 ...

Using the display attribute to create a dropdown/flyout menu

Using the visibility attribute to create a dropdown/flyout menu

Related downloads

None at present

Tell a friend

Recommend this page to a friend

Music by our artists

Contact us

Send us a message / join our mailing list

Related ads