Results 1 to 2 of 2

Thread: DD Color Tabs and Tab Content Merge

  1. #1
    Join Date
    Aug 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default DD Color Tabs and Tab Content Merge

    1) Script Title: DD Color Tabs & Tab Content

    2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...olor-tabs/P10/

    3) Describe problem:

    Ok I have merged these two Items and almost have them working pretty good. I have one problem.

    Selected Tab is call Current and the CSS is not merging well. Below is my code.

    Code:
    /* start of tabcontent */
    .shadetabs{
    margin-left: 4px;
    padding: 0;
    width: 100%;
    background: transparent;
    voice-family: "\"}\"";
    voice-family: inherit;
    padding-left: 5px;
    }
    
    .shadetabs ul{
    font: bold 12px Verdana;
    margin:0;
    padding:0;
    list-style:none;
    }
    
    .shadetabs li{
    display:inline;
    margin:2px 2px 0 0;
    padding:0;
    }
    
    .shadetabs a{
    float:left;
    color: black;
    background: #cccccc url(Images/color_tabs_left.gif) no-repeat left top;
    margin:0 2px 0 0;
    padding:0 0 1px 3px;
    text-decoration:none;
    letter-spacing: 1px;
    }
    
    .shadetabs a span{
    float:left;
    display:block;
    background: transparent url(Images/color_tabs_right.gif) no-repeat right top;
    padding:4px 9px 2px 6px;
    }
    
    .shadetabs a span{
    float:none;
    }
    
    .shadetabs a:hover{
    background-color: #cbcbea;
    }
    
    .shadetabs a:hover span{
    background-color: #cbcbea;
    }
    
    .shadetabs #current a, .shadetabs #current span{ /*currently selected tab*/
    background-color: #cbcbea;
    }
    
    .tabcontentstyle{ /*style of tab content oontainer*/
    border-top: 1px solid #778;
    width: 90%;
    margin-bottom: 1em;
    /* margin-left: 25px; */
    padding: 10px;
    background: #f5f5f5;
    }
    
    .tabcontent{
    display:none;
    }
    
    @media print {
    .tabcontent {
    display:block!important;
    }
    }
    
    <ul id="maintab" class="shadetabs">
    <li class="selected" id="current"><a href="#" rel="tcontent1"><span>Tab 1</span></a></li>
    <li><a href="#" rel="tcontent2"><span>Tab 2</span></a></li>
    <li><a href="#" rel="tcontent3"><span>Tab 3</span></a></li>
    <li><a href="#" rel="tcontent4"><span>Tab 4</span></a></li>
    </ul>

  2. #2
    Join Date
    Aug 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ok so now I have fixed the issues except one. For some reason the Tabs sit a little too low on the tabcontent. Any help with this would be appreciated and then I will bundle it all back up as there are people here who wanted rounded corners on the tab content script.

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
  •