Navigation with a tabbed appearance is popular among web design and programming. Taking stability of appearance one step further, the appearance should not degrade when the user zooms in or out of a web page. This especially becomes an issue when a graphic of some kind is used as the background and shape of a menu tab.

To prevent degradation, a popular technique is called sliding doors. This employs using a small graphic that serves as an anchor point and an over-size graphic that shows less at smaller scale and becomes more visible as the text grows, filling in the background to give the appearance of growing with the text.

Tutorials on sliding door techniques I found did not cover how to horizontally center a tabbed menu as a block. This tutorial will show the results of combining a sliding doors technique from Sliding Doors Tabs Menu and Horizontally Centered Menus with no CSS hacks.

My hat is off to the authors of these tutorials. Their simple and clear articles make the synthesis of their information possible.

As a starting point, follow the tutorial for creating Sliding Doors Tabs Menu. The presentation of the tabbed menu below should look familiar.

The above code is taken from the Dynamic Drive CSS Library and can be found at http://www.dynamicdrive.com/style/.

The CSS to render the above tabbed menu:

[css] /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ #slidetabsmenu { float:left; width:100%; font-size:90%; line-height:normal; border-bottom: 1px solid gray; } * html #slidetabsmenu{ /*IE only. Add 1em spacing between menu and rest of content*/ margin-bottom: 1em; } #slidetabsmenu ul{ list-style-type:none; margin:0; margin-left: 10px; padding:0; } #slidetabsmenu li{ display:inline; margin:0; padding:0; } #slidetabsmenu a { float:left; background:url('media/tab-left.gif') no-repeat left top; margin:0; padding:0 0 0 9px; text-decoration:none; } #slidetabsmenu a span { float:left; display:block; background:url('media/tab-right.gif') no-repeat right top; padding:3px 14px 3px 5px; font-weight:bold; color:#3B3B3B; } /* Commented Backslash Hack hides rule from IE5-Mac */ #slidetabsmenu a span {float:none;} /* End IE5-Mac hack */ #slidetabsmenu a:hover span { color: black; } #slidetabsmenu #current a { background-position:0 -125px; } #slidetabsmenu #current a span { background-position:100% -125px; color: black; } #slidetabsmenu a:hover { background-position:0% -125px; } #slidetabsmenu a:hover span { background-position:100% -125px; } [/css]

For the next part of the tutorial, we need to examine the tutorial found at Horizontally Centered Menus with no CSS hacks.

The code block below illustrates the changes to the original tabbed menu CSS in order to center the menu. By and large they are additions to the selectors indicated.

[css] #slidetabsmenu { overflow:hidden; position:relative; } #slidetabsmenu ul{ clear:left; float:left; /*margin-left:10px;*/Comment it out or delete the line position:relative; left:50%; text-align:center; } #slidetabsmenu li{ /*display changes to block instead of inline*/ display:block; float:left; position:relative; right:50%; } [/css]

They key to understanding this method in Matthew James Taylor's article is under the section How the centering method works.

This will render the menu in a centered block as shown below:

Morsels to take away from this tutorial:

• Sliding doors technique is a reliable way to use graphics in menu items that will zoom in and out easily and not break the design.
• Solutions are out there on the internet. We simply need to apply skills to synthesise information and improve on ideas. Always give credit to the work being built upon.