A better tabs approach

This page shows an example for creating tabs that are

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):


Text of element 1
Text of element 2
Text of element 3
Text of element 4
Text of element 5


Here is the clean HTML:

	<ul class="tabbar">
	  <li class="tabnotsel">
	    <a href="#div_aertocy9aencfguaerg">Menu 01</a>
	  <li class="tabsel">
	    <a href="#div_kertocy6aencfguaerg">Menu longer</a>
	  <li class="tabnotsel">
	    <a href="#div_yertocy8aencfguaerg">Menu 03</a>
	  <li class="tabnotsel">
	    <a href="#div_vertocy7aencfguaerg">Menu 04</a>
	  <li class="tabnotsel">
	    <a href="#div_kertocy9aencfguaerg"">...and here a very long menu (could be up to 800pixels wide)</a>
	<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>