different colored tabs

[Skinnybobb]

http://www.dynamicdrive.com/style/csslibrary/item/half-moon-tab-menu/

Half Moon Tab Menu

How would I make each tab for this css menu a different color?

I have been messing with the css for hours with no joy :(

Please help
SB

[codeexploiter]

.halfmoon li a{
text-decoration: none;
padding: 3px 9px 2px 5px;
margin: 0;
margin-right: 1px; /*distance between each tab*/
border-left: 1px solid #DDD;
color: black;
font-size: 13px;
background: #ECEEEC url(media/tabright.gif) top right no-repeat;
}


Remove the blue colored line from the above style class

Insert the following CSS code along with the other styles



.one
{
background-color:#33FFFF;
}
.two
{
background-color:#FF6699;
}
.three
{
background-color:#0099CC;
}
.four
{
background-color:#666666;
}
.five
{
background-color:#CCCC66;
}


You can change the style class selector name and the background color. I've mentioned it just for the testing purpose.

In the HTML Part please use it based on the following code



<li><a href="http://www.dynamicdrive.com" class="one">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" class="two">DHTML</a></li>
<li class="selected"><a href="http://www.dynamicdrive.com/style/" class="three">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/" class="four">Forums</span></a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/" class="five">Gif Optimizer</a></li>


Using this method you can achieve what you've mentioned in your post.

[Skinnybobb]

I must be missing something cos it aint working??
CSS



.halfmoon{
margin-bottom: 4px;
}

.halfmoon ul{
padding: 3px 9px 2px 5px;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: right; /*set to left, center, or right to align the menu as desired*/
border-bottom: 1px solid #929492;
}

.halfmoon li{
display: inline;
margin: 0;
}

.halfmoon li a{
text-decoration: none;
padding: 3px 9px 2px 5px;
margin: 0;
margin-right: 30px; /*distance between each tab*/
border-left: 1px solid #DDD;
color: #ffffff;
font: bold 14px Arial;

}

.halfmoon li a:visited{
color: #ffffff;
}

.halfmoon li a:hover, .halfmoon li a.current{
background-color: #C85E35;
color: #ffffff;
}

#tabcontentcontainer{
width:95%; /*width of 2nd level content*/
height:1.5em; /*height of 2nd level content. Set to largest's content height to avoid jittering.*/
}

.tabcontent{
display:none;
}

.tabone
{
background: #33FFFF url(../images/tabright.gif) top right no-repeat;
}
.tabtwo
{
background: #444444 url(../images/tabright.gif) top right no-repeat;
}
.tabthree
{
background: #0099CC url(../images/tabright.gif) top right no-repeat;
}
.tabfour
{
background: #666666 url(../images/tabright.gif) top right no-repeat;
}
.tabfive
{
background: #CCCC66 url(../images/tabright.gif) top right no-repeat;
}


and my html


<div id="ddimagetabs" class="halfmoon">
<ul>
<li><a href="#" class="tabone" onMouseover="expandcontent('sc1', this)">Google</a></li>
<li><a href="#" class="tabtwo" onMouseover="expandcontent('sc2', this)">MSN</a></li>
<li><a href="#" class="tabthree" onMouseover="expandcontent('sc3', this)">Yahoo</a></li>
<li><a href="#" class="tabfour" onMouseover="expandcontent('sc4', this)">Alta Vista</a></li>
<li><a href="#" class="tabfive" onMouseover="expandcontent('sc5', this)">Dogpile</a></li>
</ul>
</div>



??

I am overlooking something?

[Skinnybobb]

Once again I was being too inpatient.
Sorted Cheers.
SB