Results 1 to 3 of 3

Thread: 5 tabs but 1 Unique tab

  1. #1
    Join Date
    Jul 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 5 tabs but 1 Unique tab

    1) Script Title:

    2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...age-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/Mer...t_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>

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Add the highlighted:
    Code:
    <li><a href="#" rel="tcontent2" id="unique">&nbsp;Video Clip&nbsp;</a></li>
    And add this in your CSS:
    Code:
    #unique
    {
    color:#000;
    background:#ff3;
    }
    See if it helps.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. #3
    Join Date
    Jul 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •