PDA

View Full Version : 5 tabs but 1 Unique tab



hughvia3
07-02-2008, 10:19 PM
1) Script Title:

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/shade-image-tabs-menu/

3) Describe problem:

I would like to be able to make one tab out of the 5 or 6 in the menu unique. By this I mean if I have tag 1, tab 2, tab 3 and tab 4 using a shaded blue graphic with white text when inactive and a white graphic with black text when active, but I want tab 5 to to be bright yellow with black text all of the time. How can I do this with the CSS?

Thanks for your assistance.

Hugh

Here is the menu in question. I want the Video Clip tab to be yellow with black text.

http://www.transcriptiongear.com/Merchant2/merchant.mvc?Screen=PROD&Product_Code=LFH0955

The CSS is here: http://www.transcriptiongear.com/style/tabcontent.css

Here is what I use now for the html:

<table width="100%" border="0" align="center" cellpadding="" cellspacing="0">
<tr>
<td>
<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1">tab link 1</a></li>
<li><a href="#" rel="tcontent2">tab link 2</a></li>
<li><a href="#" rel="tcontent3">tab link 3</a></li>
<li><a href="#" rel="tcontent4">tab link 4</a></li>
<li><a href="#" rel="tcontent5">tab link 5</a></li>
</ul>

<div class="tabcontentstyle">

<div id="tcontent1" class="tabcontent">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td><br>
<p>Enter the text for tab 1 here </p>
</td>
</tr>
</table>

</div>

<div id="tcontent2" class="tabcontent">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td><br>
<p>Enter the text for tab 2 here</p>
</td>
</tr>
</table>
</div>

<div id="tcontent3" class="tabcontent">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td><br>
<p>Enter the text for tab 3 here</p>
</td>
</tr>
</table>

</div>

<div id="tcontent4" class="tabcontent">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td><br>
<p>Enter the text for tab 4 here</td>
</tr>
</table>
</div>

<div id="tcontent5" class="tabcontent">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td><br>
<p>Enter the text for tab 5 here</p>
</td>
</tr>
</table>
</div>
</div>

<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("maintab")
</script>
</td>
</tr>
</table>

rangana
07-03-2008, 12:15 AM
Add the highlighted:


<li><a href="#" rel="tcontent2" id="unique">&nbsp;Video Clip&nbsp;</a></li>


And add this in your CSS:


#unique
{
color:#000;
background:#ff3;
}


See if it helps.

hughvia3
07-03-2008, 12:54 AM
That seems to have done the trick. Thank you for the quick reply and the invaluable information. I hope to some day get my head wrapped around the whole CSS gambit but until then I will need lots of help from good people such as yourself..

Hugh