Tabbed Content > Posts >

 

How to make each tab a different background colour?

Markus
2 years ago
Viewed: 11197
59
Useful
Question. I am also using your tabbed content code as well but I want to use a different color background for each tab?
When I try changing the color on the background portion

.tabs li a
{
    font: normal 12px Verdana;
    text-decoration: none;
    position: relative;
    z-index: 1;
    padding: 15px 40px;
    border: 1px solid #CCC;
    border-bottom-color:#B7B7B7;
    color: #000;
    background: #505050 url(tabbg.gif) 0 0 repeat-x;
    border-radius: 25px 0px 25px 0px;
    outline:none;
}

where indicated..it hits all of the tabs.

Any tips?


2 years ago
john   Edit
8

Hi Markus,
Try the CSS:
.tabs li a:nth-child(2) {background-color:#FF0000;} .tabs li a:nth-child(3) {background-color:#336699;} ....

Above is not supported by IE 8 and earlier.

If you also want to support the IE 8 and earlier, you have to give each tab another class and define the background for each of those classes:

HTML:
<a href="#" rel="view1" class="tab1"> ...</a> <a href="#" rel="view1" class="tab2"> ...</a> <a href="#" rel="view1" class="tab3"> ...</a>
CSS:
.tabs li a.tab1 {background-color:#FF0000;} .tabs li a.tab2 {background-color:#FF0000;} ...

Please try if that helps.

2 years ago
Markus   Edit
4

It works great!

Thanks so much!
11 months ago
Joe   Edit
-1

Hi im trying to also get the content box below to show the same colour as the tab.
So each tab shows a different colour and when you click it, the content background should match the tab.

But I cant get it to work, it shows multiple content boxes at the moment.
This is what ive done in the css, but it is obviously wrong, I need one box but with different background colours to match each tab.

div.tabcontents1
{
    border: 1px solid #B7B7B7; padding: 30px;
    background-color:#e3d0e6;
    border-radius: 0 3px 3px 3px;
}

     

div.tabcontents2
{
    border: 1px solid #B7B7B7; padding: 30px;
    background-color:#00adef;
    border-radius: 0 3px 3px 3px;
}

     

div.tabcontents3
{
    border: 1px solid #B7B7B7; padding: 30px;
    background-color:#8dc63b;
    border-radius: 0 3px 3px 3px;
}


How can I do this?
11 months ago
Joe   Edit
2

Ive had a go at doing it another way, but it hasnt made any difference at all...:

Css :

/* Tab Content - menucool.com */

ul.tabs
{
    padding: 7px 0;
    font-size: 0;
    margin:0;
    list-style-type: none;
    text-align: left; /*set to left, center, or right to align the tabs as desired*/
}
        
ul.tabs li
{
    display: inline;
    margin: 0;
    margin-right:3px; /*distance between tabs*/
}
        
ul.tabs li a.tab1 
{
    font: normal 12px Verdana;
    text-decoration: none;
    position: relative;
    padding: 7px 16px;
    border: 1px solid #CCC;
    border-bottom-color:#B7B7B7;
    color: #000;
  /*  background: #F0F0F0 url(tabbg.gif) 0 0 repeat-x; */
  background-color:#e3d0e6;
    border-radius: 3px 3px 0 0;
    outline:none;
}

ul.tabs li a.tab2 
{
    font: normal 12px Verdana;
    text-decoration: none;
    position: relative;
    padding: 7px 16px;
    border: 1px solid #CCC;
    border-bottom-color:#B7B7B7;
    color: #000;
  /*  background: #F0F0F0 url(tabbg.gif) 0 0 repeat-x; */
  background-color:#00adef;
    border-radius: 3px 3px 0 0;
    outline:none;
}
   
   
ul.tabs li a.tab3 
{
    font: normal 12px Verdana;
    text-decoration: none;
    position: relative;
    padding: 7px 16px;
    border: 1px solid #CCC;
    border-bottom-color:#B7B7B7;
    color: #000;
  /*  background: #F0F0F0 url(tabbg.gif) 0 0 repeat-x; */
  background-color:#8dc63b;
    border-radius: 3px 3px 0 0;
    outline:none;
}
       
ul.tabs li a:visited
{
    color: #000;
}
        
ul.tabs li a:hover
{
    border: 1px solid #B7B7B7;
    background:#F0F0F0 url(tabbg.gif) 0 -36px repeat-x;
}
        
ul.tabs li.selected a, ul.tabs li.selected a:hover
{
    position: relative;
    top: 0px;
    font-weight:bold;

    border: 1px solid #B7B7B7;
    border-bottom-color: white;
}
/* 
.tabs li a.tab1 {background-color:#e3d0e6;}       
.tabs li a.tab2 {background-color:#00adef;}
.tabs li a.tab3 {background-color:#8dc63b;}
  */
        
ul.tabs li.selected a:hover
{
    text-decoration: none;
}
     
div.tabcontainer
{
    border: 1px solid #B7B7B7; padding: 30px;
    border-radius: 0 3px 3px 3px;
}

div.tabcontents1
{
    border: 1px solid #B7B7B7; padding: 30px;
  /*  background-color:#e3d0e6; */
    border-radius: 0 3px 3px 3px;
}


#sub1{ background: #e3d0e6; }
#sub2{ background: #00adef; }
#sub3{ background: #8dc63b; }     




HTML:
<div style="width: 1000px; margin:0 auto; padding: 0px 0 0px;">
        <ul class="tabs" data-persist="true">
            <li><a href="#view1" class="tab1"><b>tab 1</b></a></li>
            <li><a href="#view2" class="tab2"><b>tab 2</b></a></li>
            <li><a href="#view3" class="tab3"><b>tab 3</b></a></li>
        </ul>
        <div class="tabcontents1" id="sub1">
          <div id="view1">
                <p>
                tab 1 text
		    </p>
          </div>
        </div>
      <div class="tabcontents1" id="sub2">
            <div id="view2">
                <p>
                tab 2 text
			  </P>
            </div>
      </div>
        <div class="tabcontents1" id="sub3">
            <div id="view3">
                <p>
                tab 3 text
			  </p>
            </div>
        </div>
    </div>

It is displaying the tabs at the top the right colours, and below it shows 3 content boxes overlapping one above the other.
Any ideas on how I can get this to layout properly and show a single contents box and change the tabcontents background colour to match the tab background colour please?
New Answer