Navbar with Tabs

These are difficult to do in elastic layouts, mainly because you need exact pixel control over the graphic images.

One image needs to show just the left side of each tab, twice. The top half shows the tab in its normal state. The bottom half shows the tab in its hover state. You must know the exact width of the image, in pixels. (This one is 10 pixels wide). And you must know the distance from the top of the image to the top of the lower tab (87 pixels in this case). This image is in the navimages folder and is named tableft.gif

tableft

The second image shows the rest of the tab. Again, the top half shows the background in the normal state. The bottom half in the hover state. You must know the exact distance, in pixels, from the top of the image to the top of the lower tab. Again, it's 87 pixels. This image is named tabright.gif in the navimages folder.

tabright.gif

The tabs use a technique called CSS Sliding Doors. Not easy on the brain cells. But the main reason I didn't bring it up in the course is because the graphics editing skills required to create the images are outside the scope of a course on CSS and XHTML. Those of you who have such skills (or access to people who have those skills) can see all the code in the source for this page.

Click Home to return to opening page. Other tabs are just placeholders (they don't take you anywhere).