A simple CSS style of tabcontainer in ajaxcontroltoolkit

Because of project requirements, it is easier to use Ajax tabcontainer, but its default style is different from our existing style, so I checked the information and compiled a simple style.

:

CSS style:

<Style type = "text/CSS">
/* Following are tab control styles, special for outsourcing set-up process page */
/* Default tab */
. Ajaxtabstrip. Ajax _ tab_tab
{
Font-size: 12px;
Padding: 4px;
Width: 105px;/* your proper width */
Height: 16px;/* your proper height */
Background-color: # eaeaea;
}
/* When mouse over */
. Ajaxtabstrip. Ajax _ tab_hover. Ajax _ tab_tab
{
Font-weight: bold;
Text-Decoration: underline;
}
/* Current Selected tab */
. Ajaxtabstrip. Ajax _ tab_active. Ajax _ tab_tab
{
Background-color: # c2e2ed;
Font-weight: bold;
}
/* Tabpanel content */
. Ajaxtabstrip. Ajax _ tab_body
{
Border: 1px solid #999999;
Padding: 8px;
Background-color: # ffffff;
Margin-Right: 9px;/* your proper right-margin, make your header and the content have the same width */
Margin-top: 0px;
}
</Style>

Code in aspx

<PC3: tabcontainer id = "tabstrip11" cssclass = "ajaxtabstrip" runat = "server" activetabindex = "1"
Height = "121px" width = "590px">
<PC3: tabpanel id = "tabpanel1" runat = "server" headertext = "Tab 1">
<Contenttemplate>
Content of Tab 1
</Contenttemplate>
</PC3: tabpanel>
<PC3: tabpanel id = "tabpanel2" runat = "server" headertext = "Tab 2">
<Contenttemplate>
Content of Tab 1
</Contenttemplate>
</PC3: tabpanel>
<PC3: tabpanel id = "tabpanel3" runat = "server" headertext = "tab 3">
<Contenttemplate>
Content of tab 3
</Contenttemplate>
</PC3: tabpanel>
<PC3: tabpanel id = "tabpanel4" runat = "server" headertext = "tab 4">
<Contenttemplate>
Content of tab 4
</Contenttemplate>
</PC3: tabpanel>
<PC3: tabpanel id = "tabpanel5" runat = "server" headertext = "tab 5">
<Contenttemplate>
Content of tab 5
</Contenttemplate>
</PC3: tabpanel>
</PC3: tabcontainer>