Here i have share to apply a css code for ajax tab container in asp.net..
In previous article i wrote about custommize or how to use tab container for your reference i share a link below....
http://www.dotnetcode.in/2012/01/customize-ajax-tab-container-in-aspnet.html
<asp:TabContainer ID="Tabcont" runat="server"ActiveTabIndex="0" Width="300px" CssClass="Tabcss">
I hope you learn something useful........
In previous article i wrote about custommize or how to use tab container for your reference i share a link below....
http://www.dotnetcode.in/2012/01/customize-ajax-tab-container-in-aspnet.html
Apply below css for ajax tab container..
Css properties in ajax Tab container:
- .ajax__tab_header: Denotes heading section of your tabs and also the font that
appears in your tabs.
- .ajax__tab_outer: Denotes outside edges of any non-selected tabs.
- .ajax__tab_inner: Denotes inside of the non-selected tabs.
- .ajax__tab_hover: Denotes What the tab (either selected or not) look like when
the most is over them.
- .ajax__tab_active .ajax__tab_outer: Denotes outside edges of the selected tab.
- .ajax__tab_active .ajax__tab_inner: Denotes inside of the selected tab.
- .ajax_tab_tab: Denotes every tab
<style type="text/css">
.Tabcss
.ajax__tab_header
{
color:
Black;
font-size:
13px;
font-weight:
bold;
background-color:
White;
margin-left:
10px;
}
.Tabcss
.ajax__tab_outer
{
background-color:
White;
}
.Tabcss
.ajax__tab_inner
{
padding:
6px;
margin-right:
1px;
margin-left:
1px;
margin-top:
1px;
margin-bottom:
1px;
background-color:
#f8f6ea;
border-left:
1px solid #C21517;
}
.Tabcss
.ajax__tab_hover .ajax__tab_outer
{
background-color:
#000000; /* border:
1px solid #C21517;*/ /* border-radius:8px
8px 8px 8px;*/
}
.Tabcss
.ajax__tab_hover .ajax__tab_inner
{
background-color:
#FFFFE1; /*
border-radius:8px 8px 8px 8px;*/
}
.Tabcss
.ajax__tab_active .ajax__tab_outer
{
background-color:
#000000;
border-radius:
10px 10px 10px 10px;
}
.Tabcss
.ajax__tab_active .ajax__tab_inner
{
background-color:
#fefdf7;
border-radius:
10px 10px 10px 10px;
}
.Tabcss
.ajax__tab_tab
{
cursor:
pointer;
}
</style>
|
<asp:TabContainer ID="Tabcont" runat="server"ActiveTabIndex="0" Width="300px" CssClass="Tabcss">
I hope you learn something useful........
0 comments:
Post a Comment