TABBED HORIZONTAL MENU FOR FLUID OR FIXED WIDTH PAGE

This is my attempt at a simple tabbed menu using C.S.S.

Any WYSIFA forum members or Kompozer users feel free to use, adapt, or improve the menus.

Although using a list would have given more options for styling, I wanted to keep this first design as simple as possible and therefore floated the links in a wrapper.

The beauty of CSS is that once you've got a working design for the navbar, you can play around with it in Cascades to create as many variations as you desire without having to change the HTML code on the page.

There is also an alternative design with coloured current tab, and 3 versions of a tabbed button navbar using a definition list.

THE THEORY

1. "wrap1" provides the full page-width background image with top and bottom borders. By providing a background for the links that aren't the current link it avoids the necessity of setting a background image to a:link. In earlier versions I found that I couldn't override the background image for a:link with a "current" background image to provide the tab, probably due to the order of precedence of style rules.
2. "wrap2" is used to contain and centre the floated links using margin: auto; and also to set a width compatable with 800pix resolution.
3. To avoid double borders where the links meet the links are styled with a left border only and the id "bordrt" is applied to the last link in the menu to give it a right hand border.
4. The class "current" is applied only to the link for the page that is to be tagged, i.e. the current page you are working on.
5. The hover effect has been achieved by the familiar device of flipping the link background image the other way up in a graphics program. Its height has reduced by 1px to reveal the bottom border from the wrap.

IN PRACTICE

Had to make some changes to overcome the way IE6 rendered the page. Covered under browser tests.

THE HTML CODE FOR THIS PAGE

<!-- START of menu -->
<div id="wrap1">
<div id="wrap2">
    <a class="current" href="tabmenu1.html">HOME</a>
    <a href="tabmenu2.html">THE CSS</a>
    <a href="tabmenu3.html">IMAGES</a>
    <a href="tabmenu4.html">PAGE 4</a>
    <a href="tabmenu5.html">PAGE 5</a>
    <a id="bordrt" href="tabmenu6.html">PAGE 6</a>
</div>
</div>
<div class="clearl"></div>
<!-- END of menu -->

Go to page two for the code for that page, then page 3 etc.

LIMITATIONS

1. Have to keep the titles of each link short enough to fit within the fixed width of each tab. If the text is long enough to wrap it will spill out of the box.
2. If you have more or less than six pages that you want to link to from a horizontal menu you will have to recalculate the width of each link. If x is your number of links and y the thickness of your borders, then use the calculation, 760px (width of "wrap2") minus y(x + 1)px (combined width of borders) divided by x to get a starting width. If setting this width for a:link and a:visited causes the right end link to be displaced down the page, you will have to reduce the widths in single pixels until the end link pops up into "wrap2" in both IE and FF, (note: the width seems to need to be marginally smaller for IE than for FF.)
3. If you alter the top padding to the a:link and a:visited you will find all the heights will have to be adjusted to compensate, note that the height set for a:hover is 1 pixel less than a:link and a:visited. If it is made the same height then the bottom border disappears on hover.

BROWSER TESTS

Tested at 800px resolution in 32 browser versions at browsershots.org, works fine in modern browsers for Windows, Mac, and Linux. Works in all versions of FF for Windows from 1.5 onwards. But is not quite right in, (the usual culprits), IE5 and 6.

IE5.5 renders it like this, probably due to the different box model that was adopted for this version of IE (ignoring padding in o/a dimensions).

IE6 renders it like this. Perfectly usable as a menu but the bottom margin has reappeared on the tab.

Given that the number of worlwide users still utilising IE5 stands at 1- 2% according to some statistics and will be diminishing every day, you may chose to ignore the appearance in IE5.

IE6 though, again according to some statistics, is still being utilised by 20 - 30% of browser users.
I have been looking at various sources on the web about how to write a conditional statements and hacks for IE but in the end came up with a simpler practical solution. This is a graphic fix that cures the bottom border appearing on the tab in IE6. The bottom border for "wrap1" has been removed and the background image now has a 1px green line at the base as part of the image that substitutes for the border. The heights were also adjusted accordingly by 1px.

IE6 now renders it as it should appear as did all the other browsers that I tested it for.

BACK TO TOP OF PAGE