Separate image for each tab head

Hi,

I am trying to add a separate image for each tab button at the top. Can any one guide me through this.
I have attached a design output along this post. Can any one with sound help.
It will be really appreciated

Hi,

I think you have to make a separate class to each tab button. For example:

Code: Select all

<ul id="mainmenu">
<li class="official"><a href="#">official</a></li>
<li class="individual"><a href="#">individual</a></li>
<li class="emplyer"><a href="#">emplyer</a></li>
<li class="training provider"><a href="#">training provider</a></li>
</ul>

and then in css file:

Code: Select all

#mainmenu li.official
{
        padding-left: 25px;
        background: url(images/official.gif) no-repeat 0 2em;  /*your image*/
}
#mainmenu li.individual
{
        padding-left: 25px;
        background: url(images/individual.gif) no-repeat 0 2em;
}
#mainmenu li.emplyer
{
        padding-left: 25px;
        background: url(images/employer.gif) no-repeat 0 2em;
}
#mainmenu li.training provider
{
        padding-left: 25px;
        background: url(images/training provider.gif) no-repeat 0 2em;
}