A better tabs approach

This page shows an example for creating tabs that are

• more flexibel in size (grows with content and font-size)
• less markup (2 elements for each tab)
• cleaner javaScript

The height of the menu is not set... gets auto-set by fon-size in anchors (0.9em)

It uses one image used as a sprite that can handle a wide range of tab-sizes and is still quite small in size (859Bytes):

• Menu 01
• Menu 02 is a bit longer
• Menu 03
• Menu 04
• ...and here a very long menu (could be up to 800pixels wide)

Here is the clean HTML:

	<ul class="tabbar">
	  <li class="tabnotsel">
	    <a href="#div_aertocy9aencfguaerg">Menu 01</a>
	  </li>
	  <li class="tabsel">
	    <a href="#div_kertocy6aencfguaerg">Menu longer</a>
	  </li>
	  <li class="tabnotsel">
	    <a href="#div_yertocy8aencfguaerg">Menu 03</a>
	  </li>
	  <li class="tabnotsel">
	    <a href="#div_vertocy7aencfguaerg">Menu 04</a>
	  </li>
	  <li class="tabnotsel">
	    <a href="#div_kertocy9aencfguaerg"">...and here a very long menu (could be up to 800pixels wide)</a>
	  </li>
	</ul>
	<div id="div_aertocy9aencfguaerg" class="divTab">Text of element 1</div>
	<div id="div_kertocy6aencfguaerg" class="divTab">Text of element 2</div>
	<div id="div_yertocy8aencfguaerg" class="divTab">Text of element 3</div>
	<div id="div_vertocy7aencfguaerg" class="divTab">Text of element 4</div>
	<div id="div_kertocy9aencfguaerg" class="divTab">Text of element 5</div>