CSS in page-head.
This is a copy of the basic navigation-bar above, with added “sprites”. The tabs display different backgrounds on hover, just to show how easy such a nav-bar can be adapted to different designs.
I've changed background-color and repositioned background-image on :hover, to make sure it'll work well both with and without images. Each link-state can have its own, unique, look – only limited by imagination and the design it ends up as part of.
These images are oversized to the extreme, but is isn't much of an effort to cut them down to size in ones preferred photo-handling software. Make sure the text doesn't outgrow its background when subjected to font-resizing.
Image-corners are colored to go with a white background, and may need re-coloring to go with other backgrounds. The inside is transparent for the upper 150px, with 3 150px tall colored parts below.
left side image:
right side image:
created: 02.sep.2006
updated: 04.des.2007
Georg Sørtun