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;
}

 

 

Blinklist Blogmarks del.icio.us Digg Ma.gnolia My Web 2.0 Newsvine Reddit Segnalo Simpy Spurl Wists Technorati



Recommended

Link Partners

Web Design Forum