Styling Multi step Form

Question

I am using a form page having multiple steps in it i want to design it something like this

the top part i.e. Step1, step2 etc. how to achieve this using CSS

Answer 1

An easy way would be make a css sprite of all the possible step states, and make it one background image ( with or without the rounded corners ), set it on the div containing all the steps.. change it depending on the state ( specify a class ). float the steps which are lis and contain them on the parent element.

Answer 2

Basic HTML structure:

<ul id="steps">
  <li class="visited"><a href="#"><span>Step 1</span><span>description</span></a></li>
  <li class="visited"><a href="#"><span>Step 2</span><span>description</span></a></li>
  <li class="current"><a href="#"><span>Step 3</span><span>description</span></a></li>
  <li class="upcoming"><a href="#"><span>Step 4</span><span>description</span></a></li>
  <li class="upcoming"><a href="#"><span>Step 5</span><span>description</span></a></li>
</ul>

You can then use css selectors li.visited, li.current, li.upcoming to select the li nodes and style them accordingly.