Styling Multi step Form [closed]

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center. Closed 12 years ago. 开发者_如何学JAVA

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

_{(source: fellowshipone.com)}

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

---

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.

---

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.