Webbits

Gel button navigation bar with dividers

The bar appears like:


  Link one Link two Link three  

The HTML is:

Again in the actual HTML all the links are on the same line, to avoid whitespace from line breaks.

So here we just use a set of links - some real (class menu), some are the left and right ends, and some are gaps.

The CSS for the menudiv is just to center the menubar:

The 'proper' links are

left and right are the same except for the background image and the left or right padding:/p>

and gap is just

The hover effect is simply:

rightblack.gif is

leftblack.gif is

middleblack.gif is

gapblack.gif is

back to webbits

Syntax highlighting by Alex Gorbatchev