Tab container background styling
0
Hi, I have been working on the styling of our tab containers so they appear white and stand out in front of the background. Mostly, this has been successful, but I am still having a problem with the blank area to the right of the tabs. The example below is how it should look and how it does look on a very light grey container: However, when the tab container is placed directly on a page (slightly darker), this area to the right of the tabs becomes visible. I believe this area is coloured by the following css: .nav-tabs { border-bottom: none; background-color: #f4f4f5 ; } My first thought was to make the background colour transparent, but this doesn’t help: So, I thought I could create separate classes for each tab container, but I don’t seem to be able to get this to apply the styling in exactly the right place. The following css…. with the classes applied to relevant tab containers, will look like this: I believe the two different background colours could work, if I knew where exactly to refer to them. The tab containers seems to be the wrong place. Any ideas would be greatly appreciated.
asked
Wendy Booth
1 answers
0
Hi Wendy,
Hopefully I'm not to late. I was able to change the color of the whitespace next to the tabs with the ul and li selectors:
.white-tabcontainer {
background-color: white;
ul {
background-color: red;
li{
background-color: white;
}
}
}
On the page this will look like this:
answered
Patrick K