PDA

View Full Version : DD Color Tabs and Tab Content Merge



fastcarsspeed
09-07-2007, 12:35 AM
1) Script Title: DD Color Tabs & Tab Content

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/dd-color-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.


/* 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>

fastcarsspeed
09-07-2007, 12:49 AM
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.