Single image tabs with three state rollover

The single image tabs, CSS only with three state rollover, almost perfect one.

I have to say "almost prefect" as it uses SPANS, if someone can "reduce" (remove) spans please let me know.
Note:The "Space" background image is just for transparency demo, please don't count it as a "second" one :-).
In order to get transparency for Internet Explorer 6 you may need to save image in GIF-transparency format,
or use PNG fix JavaScript's.

Live demo:

The single image:

The CSS code:

<style type="text/css">
 /* =========================================================================
 For any free or commercial usage please keep this credits text intact.
 Author : Femi Hasani www.vision.to .
 Credits: Jasson M.Knight cutcodedown.com .
 The original version of this stylesheet and the associated (x)html
 is available at http://www.vision.to/single-image-tabs-with-three-state-rollover.php
 A link to www.vision.to would be apperciated but not mandatory.
 =============================================================================== */
     #tabnav {
/* This div is optional. The "Space" background just for transparency demo  ...*/
    width:auto;height:100px;
    padding:30px 0 0 0;
    background: url(images/articles/demo_dark_bg.jpg)  0 0 repeat-x;

  }


#tabsDemo {
overflow:hidden; /* wrap floats */
height:44px; /* trips haslayout, wrap floats IE */
list-style:none;
/* the background image */
background:url(images/articles/buttons_tabs2.png) 0 0 repeat-x;
font:bold 14px/42px sans-serif;
}

#tabsDemo li {
display:inline;
}

#tabsDemo a {
  float:left;
  position:relative;
  padding-left:10px;
  margin-right:10px; /* adjust space between tabs ... */ 
  text-decoration:none;
  color:#fff;
  background:url(images/articles/buttons_tabs2.png) 0 -45px no-repeat;
  }

#tabsDemo a span {
  position:absolute;
  top:0;
  left:100%;
  width:10px;
  height:42px;
  background:url(images/articles/buttons_tabs2.png) -500px -45px no-repeat;
  }

#tabsDemo .current a {
  color:#fff;
  background-position:0 -135px;
   }

#tabsDemo .current a span {
  background-position:-500px -135px;
  }

#tabsDemo a:active,
#tabsDemo a:focus,
#tabsDemo a:hover {
  color:#fff;
  background-position:0 -90px;
   }

#tabsDemo a:active span,
#tabsDemo a:focus span,
#tabsDemo a:hover span {
  background-position:-500px -90px;
  }
</style>

The HTML markup:

<div id="tabnav">
<ul id="tabsDemo" >
	<li><a href="#">Welcome<span></span></a></li>
	<li><a href="#">Tutorials<span></span></a></li>
	<li class="current"><a href="#">Links<span></span></a></li>
	<li><a  href="#">Digital Art<span></span></a></li>
</ul>
</div>

If you want to support extreme font size increase by users,
this could be resolved by:
1. allowing the list items to grow in height as content increases
2. making the images deep enough to cover some of the more extreme possibilities.
Tip from Russ at maxdesign.com.au

Related Pages