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
Here is the CSS code
here is my form markup code
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.
Heres a pic of what it looks like
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;
}
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>
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.
i meant a link to the actual site
ASKER
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.:
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;
}
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;
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
this might help
https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size
background-size: 100% 100%;
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 -
but there may be some alignment issues, with text or placement.
.Tab .ajax__tab_active .ajax__tab_tab
{
color: #ffffff;
background:url("../images/Tabs/tab_active.gif") repeat-x;
height:17px;
width:200px;
}
but there may be some alignment issues, with text or placement.
ASKER
ok slick i will give it a try
@ jknj72 , , , It's been days, , are you able to get any results?
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...
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
that was my issue. the image was causing the problem. thanks for the help
Open in new window
but it would be better to see live code as there may be other css affecting the tab