A better tabs approach (no IDs)

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)
See other demo including IDs for tabs and connected content...

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
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
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="#">Menu 01</a>
	  </li>
	  <li class="tabsel">
	    <a href="#">Menu longer</a>
	  </li>
	  <li class="tabnotsel">
	    <a href="#">Menu 03</a>
	  </li>
	  <li class="tabnotsel">
	    <a href="#">Menu 04</a>
	  </li>
	  <li class="tabnotsel">
	    <a href="#">...and here a very long menu (could be up to 800pixels wide)</a>
	  </li>
	</ul>
	<div class="tabcontent">
	  <div>Text of element 1</div>
	  <div>Text of element 2</div>
	  <div>Text of element 3</div>
	  <div>Text of element 4</div>
	  <div>Text of element 5</div>
	</div>