Customize Ajax Tab CSS
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title><a href="http://www.asp.net/ajaxlibrary/ajaxcontroltoolkitsamplesite/tabs/tabs.aspx">Ajax Tab</a> Customize CSS</title>
<style>
/* style sheet for tab*/
.TabStyle .ajax__tab_header
{
cursor: pointer;
background-color: #f1f1f1;
font-size: 14px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
height: 36px;
border-bottom: 1px solid #bebebe;
width:650px;
}
.TabStyle .ajax__tab_active .ajax__tab_tab
{
border: 1px solid;
border-color: #bebebe #bebebe #e1e1e1 #bebebe;
background-color: #e1e1e1;
padding: 10px;
border-bottom: none;
}
.TabStyle .ajax__tab_active .ajax__tab_tab:hover
{
border: 1px solid;
border-color: #bebebe #bebebe #e1e1e1 #bebebe;
background-color: #e1e1e1;
padding: 10px;
border-bottom: none;
}
.TabStyle .ajax__tab_tab
{
border: 1px solid;
border-color: #e1e1e1 #e1e1e1 #bebebe #e1e1e1;
background-color: #f1f1f1;
color: #777777;
cursor: pointer;
text-decoration: none;
padding: 10px;
}
.TabStyle .ajax__tab_tab:hover
{
border: 1px solid;
border-color: #bebebe #bebebe #e1e1e1 #bebebe;
background-color: #e1e1e1;
color: #777777;
cursor: pointer;
text-decoration: none;
padding: 10px;
border-bottom: none;
}
.TabStyle .ajax__tab_active .ajax__tab_tab, .TabStyle .ajax__tab_tab, .TabStyle .ajax__tab_header .ajax__tab_tab
{
margin: 0px 0px 0px 0px;
}
.TabStyle .ajax__tab_body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
border-top: 0;
border: 1px solid #bebebe;
border-top: none;
padding: 5px;
background-color: #e1e1e1;
width:638px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:toolkitscriptmanager id="ToolkitScriptManager1" runat="server">
</asp:toolkitscriptmanager>
<asp:tabcontainer activetabindex="0" autopostback="true" cssclass="TabStyle" id="TabContainer1" runat="server" width="100%">
<asp:tabpanel id="TabPanel1" runat="server" style="background-color: #bebebe;" tabindex="0">
<headertemplate>
My Account
</headertemplate>
<contenttemplate>
<div style="background-color: white; height: 200px; width: 638px;">
You are in first Tab
</div>
</contenttemplate>
</asp:tabpanel>
<asp:tabpanel id="TabPanel2" runat="server" style="background-color: #e1e1e1;" tabindex="1">
<headertemplate>
My Account
</headertemplate>
<contenttemplate>
<div style="background-color: white; height: 200px; width: 638px;">
You are in Second Tab
</div>
</contenttemplate>
</asp:tabpanel>
<asp:tabpanel id="TabPanel3" runat="server" style="background-color: #e1e1e1;" tabindex="2">
<headertemplate>
My Account
</headertemplate>
<contenttemplate>
<div style="background-color: white; height: 200px; width: 638px;">
You are in Third Tab
</div>
</contenttemplate>
</asp:tabpanel>
</asp:tabcontainer>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title><a href="http://www.asp.net/ajaxlibrary/ajaxcontroltoolkitsamplesite/tabs/tabs.aspx">Ajax Tab</a> Customize CSS</title>
<style>
/* style sheet for tab*/
.TabStyle .ajax__tab_header
{
cursor: pointer;
background-color: #f1f1f1;
font-size: 14px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
height: 36px;
border-bottom: 1px solid #bebebe;
width:650px;
}
.TabStyle .ajax__tab_active .ajax__tab_tab
{
border: 1px solid;
border-color: #bebebe #bebebe #e1e1e1 #bebebe;
background-color: #e1e1e1;
padding: 10px;
border-bottom: none;
}
.TabStyle .ajax__tab_active .ajax__tab_tab:hover
{
border: 1px solid;
border-color: #bebebe #bebebe #e1e1e1 #bebebe;
background-color: #e1e1e1;
padding: 10px;
border-bottom: none;
}
.TabStyle .ajax__tab_tab
{
border: 1px solid;
border-color: #e1e1e1 #e1e1e1 #bebebe #e1e1e1;
background-color: #f1f1f1;
color: #777777;
cursor: pointer;
text-decoration: none;
padding: 10px;
}
.TabStyle .ajax__tab_tab:hover
{
border: 1px solid;
border-color: #bebebe #bebebe #e1e1e1 #bebebe;
background-color: #e1e1e1;
color: #777777;
cursor: pointer;
text-decoration: none;
padding: 10px;
border-bottom: none;
}
.TabStyle .ajax__tab_active .ajax__tab_tab, .TabStyle .ajax__tab_tab, .TabStyle .ajax__tab_header .ajax__tab_tab
{
margin: 0px 0px 0px 0px;
}
.TabStyle .ajax__tab_body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
border-top: 0;
border: 1px solid #bebebe;
border-top: none;
padding: 5px;
background-color: #e1e1e1;
width:638px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:toolkitscriptmanager id="ToolkitScriptManager1" runat="server">
</asp:toolkitscriptmanager>
<asp:tabcontainer activetabindex="0" autopostback="true" cssclass="TabStyle" id="TabContainer1" runat="server" width="100%">
<asp:tabpanel id="TabPanel1" runat="server" style="background-color: #bebebe;" tabindex="0">
<headertemplate>
My Account
</headertemplate>
<contenttemplate>
<div style="background-color: white; height: 200px; width: 638px;">
You are in first Tab
</div>
</contenttemplate>
</asp:tabpanel>
<asp:tabpanel id="TabPanel2" runat="server" style="background-color: #e1e1e1;" tabindex="1">
<headertemplate>
My Account
</headertemplate>
<contenttemplate>
<div style="background-color: white; height: 200px; width: 638px;">
You are in Second Tab
</div>
</contenttemplate>
</asp:tabpanel>
<asp:tabpanel id="TabPanel3" runat="server" style="background-color: #e1e1e1;" tabindex="2">
<headertemplate>
My Account
</headertemplate>
<contenttemplate>
<div style="background-color: white; height: 200px; width: 638px;">
You are in Third Tab
</div>
</contenttemplate>
</asp:tabpanel>
</asp:tabcontainer>
</form>
</body>
</html>
