Step by Step Menu a 'Wizard Lke'

There has been very little about Step by Step menu, around the net ... Below is the image and Step by Step Menu Demo.

The system uses a single image, I don't like to much "slicing" images :-)

I did some experiments with line-height in em  , but if you want to support extreme font sizes you will need to make bigger image(s) than experiment for optimal background-position ...

If you have any tip's please let me know.
The current image height per line is at 100px.

/* Step by Step Menu, Author: Femi Hasani at www.vision.to */
/* Single Image Solution */
/*for free use please leave this credit intact, thank you */
ul.steps{ list-style-type: none;min-width:900px;width:100% }

ul.steps li{
/*used em just to experiment with different font sizes and resolutions, but it is more accurate to use pixels */
    position:relative;
    float: left;
	color: #C2C2C2;
   	background: url('steps.png') left -15px no-repeat;
    min-height:60px;
    height: 4em; 
    min-width:170px;
    width:20%;
line-height: 4em;
	font-weight: bold;
	font-size: 110%;
    margin-bottom:1em;
    text-align:center;
    overflow:hidden;
}

ul.steps li span{ color: #FFF; margin: 0 5px 0 10px; }

ul.steps li.empty{
    background-position: left -15px;
}
ul.steps li.start {
	color: #fff;
    background-position: left -515px;
}
ul.steps li.next{
    background-position: left -115px;
}
ul.steps li.current{
  color:#fff;
    background-position: left -215px;
}

ul.steps li.prevDone{
	color: #fff;
    background-position: left -415px;
}

ul.steps li.lastDone, ul.steps li.Done {
	color: #fff;
    background-position: left -315px;
}


.clear {
  clear:both;
}

Related Pages