• Locked
No replies
Tue, 2011-12-20 21:27
Stevetri
Offline
Last seen: 1 year 21 weeks ago
newbie
Timezone: GMT-6
Joined: 2011-12-20
Posts: 1
Points: 2

I am using tab container code I have downloaded from online. It works great but I need the tabs to be in different colors. I know it has something to do with the a link, but I have been trying for hours and have not been able to figure it out. I just need the background of each tab to be a different color. Thanks!

CSS code

.tab-content {
	border: 1px solid #666;
	background: white; 
	color: black;
 
	width:704px;
	min-height:140px;
	font-size:12pt;
	text-align:center;
 
}
 
 
.tab-header {
	position: relative;
	height: 3em;
 
	margin-bottom: 0px;
	padding-bottom: 0px;
}
 
.tab-header ul.tab-list {
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: -1px;
	width: 50em; 
}
 
.tab-header ul.tab-list li  {
	display: inline;
	list-style: none;
	margin: 0;
 
}
 
.tab-header ul.tab-list a,.tab-header ul.tab-list span,.tab-header ul.tab-list a.tab-active {
	width: 8em;
	display: block;
	float: left;
	padding: 4px 0;
	margin: 1px 2px 0 0;
	text-align: center;
 
	font-size: 12px;
	text-decoration: none;
	color: #333;
}
 
.tab-header ul.tab-list span, .tab-header ul.tab-list a.tab-active, .tab-header ul.tab-list a.tab-active:hover
{
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    border-right: 1px solid #666;
    border-bottom: none;
    background: Purple;
    color: White;
    padding-bottom: 6px;
    margin-top: 0;
}
 
/* a link in a background tab */
.tab-header ul.tab-list a {
 
	border-top: 1px solid #AAA;
	border-left: 1px solid #AAA;
	border-right: 1px solid #AAA;
	border-bottom: none;
	 background-color:Purple;
}
 
/* hover on a background tab */
.tab-header ul.tab-list a:hover {
	margin-top: 0;
	border-color: #666;
	background: #bbb;
	color: black;
	padding-bottom: 5px;
 
}
 
.tab  /* the heading that became the li */
{
display: none;
	width:100%;
 
}
 
#tab-container
{
 
}
 
.tabContainerLabels
{
    font-size: 10pt;
    font-weight: bold;
    margin-top: 20px;
    color: #006699;
 
}
 
 
.tabContainerLinks
{
 font-size:10pt 
 padding-left:5pt;  
}

Html Code

<div id="tab-container">
        <div class="tab-content">
            <h1 class="tab"  style="background-color: red;" title="Tab1">Tab1</h1>              
            <asp:image runat="server" NavigateURL="../images/IndustriesTemplate1.jpg" 
                ImageUrl="~/images/IndustriesTemplate4.jpg"  ></asp:image>       
        </div>
 
        <div class="tab-content">
            <h1 class="tab" title="Tab2">Tab2</h1>
            <asp:image runat="server" NavigateURL="../images/IndustriesTemplate1.jpg" 
                ImageUrl="~/images/IndustriesTemplate3.jpg"  ></asp:image>
        </div>
</div>

Top
Tags: