Link to home
Start Free TrialLog in
Avatar of jknj72
jknj72

asked on

CSS question

I have used this CSS I got off a site with a tab control and I kinda like it and think it may work for me. The only problem I have is the bottom of the tab background is white. I tried to set the repeat-y for the background pic I am using but nothing has worked for me and Ive been spending way too much time trying to figure this out.

Heres a pic of what it looks like
User generated image

Here is the CSS code
/*Header*/
.Tab .ajax__tab_header
{
    color: #4682b4;
    font-family:Calibri;
    font-size: 14px;
    font-weight: bold;
    background-color: #ffffff;
    margin-left: 0px;
}
/*Body*/
.Tab .ajax__tab_body
{
    border:1px solid #b4cbdf;
    padding-top:0px;
}
/*Tab Active*/
.Tab .ajax__tab_active .ajax__tab_tab
{
    color: #ffffff;
    background:url("../images/Tabs/tab_active.gif") repeat-x;
    height:20px;
    width:200px;
}
.Tab .ajax__tab_active .ajax__tab_inner
{
    color: #ffffff;
    background:url("../images/Tabs/tab_left_active.gif") no-repeat left;
    padding-left:10px;
}
.Tab .ajax__tab_active .ajax__tab_outer
{
    color: #ffffff;
    background:url("../images/Tabs/tab_right_active.gif") no-repeat right;
    padding-right:6px;
}
/*Tab Hover*/
.Tab .ajax__tab_hover .ajax__tab_tab
{
    color: #000000;
    background:url("../images/Tabs/tab_hover.gif") repeat-x;
    height:20px;
    width:200px;
}
.Tab .ajax__tab_hover .ajax__tab_inner
{
    color: #000000;
    background:url("../images/Tabs/tab_left_hover.gif") no-repeat left;
    padding-left:10px;
}
.Tab .ajax__tab_hover .ajax__tab_outer
{
    color: #000000;
    background:url("../images/Tabs/tab_right_hover.gif") no-repeat right;
    padding-right:6px;
}
/*Tab Inactive*/
.Tab .ajax__tab_tab
{
    color: #666666;
    background:url("../images/Tabs/tab_Inactive.gif") repeat-x;
    height:20px;
    width:200px;
}
.Tab .ajax__tab_inner
{
    color: #666666;
    background:url("../images/Tabs/tab_left_inactive.gif") no-repeat left;
    padding-left:10px;
}
.Tab .ajax__tab_outer
{
    color: #666666;
    background:url("../images/Tabs/tab_right_inactive.gif") no-repeat right;
    padding-right:6px;
    margin-right: 2px;
}

Open in new window


here is my form markup code
    <cc1:TabContainer ID="TabContainer2" runat="server" ActiveTabIndex="0" Width="659px" CssClass="Tab">
    <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="Tab 1">
            <ContentTemplate>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>                          
            </ContentTemplate>
     </cc1:TabPanel>
     <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="Tab 2">
        <ContentTemplate>
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                </ContentTemplate>
    </cc1:TabPanel>
    <cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="Tab 3">
        <ContentTemplate>
            <asp:Button ID="Button1" runat="server" Text="Button1" />
                </ContentTemplate>
    </cc1:TabPanel>
    </cc1:TabContainer>

Open in new window


The only problem is the middle background of each tab at the bottom is not the same color of the tab itself and I would like to make it the same.

Any help would be appreciated...

PS - I copied this code from the site that I got it from so this isnt my code. I just think it would be way easier for someone to hook up real quick so I can get the help I need.  im just trying to customize it to my needs.
Avatar of James Rodgers
James Rodgers
Flag of Canada image

try changing this

.Tab .ajax__tab_header
{
    color: #4682b4;
    font-family:Calibri;
    font-size: 14px;
    font-weight: bold;
    background-color: #ffffff; <---- 
    margin-left: 0px;
}

Open in new window


but it would be better to see live code as there may be other css affecting the tab
Avatar of jknj72
jknj72

ASKER

this is the live code

User generated image
i meant a link to the actual site
Avatar of jknj72

ASKER

I changed the background-color to yellow and it changes the color under the tab(which is what I want) but also changes the whole background color which is not what I want. I only want to fill in under the tab

 User generated image
Avatar of jknj72

ASKER

Just let me know what you want to see and Ill show you
then you will need to update each of the "tab" definitions, active, inactive, hover etc., to use a background colour

e.g.:

/*Tab Active*/
.Tab .ajax__tab_active .ajax__tab_tab
{
    color: #ffffff;
    background:url("../images/Tabs/tab_active.gif") repeat-x;
    background-color: #matching-color-hex
    height:20px;
    width:200px;
}
.Tab .ajax__tab_active .ajax__tab_inner
{
    color: #ffffff;
    background:url("../images/Tabs/tab_left_active.gif") no-repeat left;
    background-color: #matching-color-hex
    padding-left:10px;
}
.Tab .ajax__tab_active .ajax__tab_outer
{
    color: #ffffff;
    background:url("../images/Tabs/tab_right_active.gif") no-repeat right;
    background-color: #matching-color-hex
    padding-right:6px;
}

Open in new window

Avatar of jknj72

ASKER

thats what I have been trying to do. First I tried to repeat-y hoping it would stretch down but I have been trying to find the color for the bottom of the active tab color but cant match it.I think your on the right path with this...
try adding this after the background image

background-size:cover;

Open in new window

Avatar of jknj72

ASKER

didnt work. Could it possibly be the middle image? If I could lower it a few pixels, maybe it would line up better?
might do it but also try

background-size: 100% 100%;

Open in new window


this might help
https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size
greetings jknj72, , It is my view that you do not use a background image, that correctly shows what you say you want as your individual TAB display. It looks as though you use a "Transparent GIF" file, that has transparency, in the area that is underneath that you do not like, If you fill the background with a COLOR, then it will show a color underneath, BUT it will also show a color at the top , where it's suppose to look, rounded. If I were doing this, I'd use an IMAGE Editor, and fill the bottom of the GIF file image, with a color. If you need to use just CSS, then What I would try is to reduce the height of all the tabs, to say 17 or 18 pixels -
.Tab .ajax__tab_active .ajax__tab_tab
{
    color: #ffffff;
    background:url("../images/Tabs/tab_active.gif") repeat-x;
    height:17px;
    width:200px;
}

Open in new window


but there may be some alignment issues, with text or placement.
Avatar of jknj72

ASKER

ok slick i will give it a try
@ jknj72   , , , It's been days, , are you able to get any results?
Avatar of jknj72

ASKER

Sorry I got pulled off to help with something else.
I couldnt get it to work so I went in another direction. Still not sure what the problem is but Im gonna try it again today and see what happens. I will keep you in the loop...
ASKER CERTIFIED SOLUTION
Avatar of Member_2_248744
Member_2_248744
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of jknj72

ASKER

that was my issue. the image was causing the problem. thanks for the help