FIXED OR FLUID WIDTH TABBED HORIZONTAL NAV
COMMENTS
This is a third layout version of the menu incorporating buttons and using a definition list.
The button image for the pages that are not the "current" page is applied to the <dd> elements rather than the a:link. This avoids the problems of trying to overule any style set for a:link to make it tab.
I have only styled one page with this style, so clicking on the other 5 links will take you back to the first green navbar.
IMAGES
Above are the necessary images. Just right click and chose "save image as" from the drop down menu to save them on your hard disc. If you want the page background as well, in IE right click on it and pick "save background as." In FF right click on it and pick "view background image and then right click on the image and pick "save image as."
STYLES
The stylesheet.
EXPANDABLE BOX
To go with this menu I decided to have a go at creating a vertically expandable box with rounded corners and drop shadow, and here it is.
I created the original image in photofiltre and then cropped the top, bottom and middle to create 3 images.
The top image is applied to the background of the containing div positioned top, the middle image is vertically tiled as the background of the first contained div and the bottom image is applied as a background to the last contained div.
Now, however much content is added to the box, the image with its drop shadow will expand down the page to accommodate it.
THE HTML CODE FOR THE EXPANDABLE BOX
<!--
START of box
-->
<div class="lftcol">
<div class="midcol">
<h2>EXPANDABLE BOX</h2>
<p></p>
<p></p>
<p></p>
</div>
<div
class="botcol"></div>
</div>
<!-- END of box
-->
IMAGES
