Thursday, March 15, 2012

Css for Ajax tab Container


<style>
/*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
{font-family: verdana,tahoma,helvetica;
        font-size: 10pt;
        border: 1px solid #999999;
        border-top: solid 1px #999999;
        padding: 8px;
        background: url(../images/skins/shiny/cream-header.png);
        background-color:#FFFFFF;
       
    /*border:1px solid #b4cbdf;*/
   /* padding-top:0px;*/
    border-radius: 20px 20px 20px 20px;
}
/*Tab Active*/
.Tab .ajax__tab_active .ajax__tab_tab
{
    color: #ffffff;
    background:url(../images/tab_container/tab_active.gif) repeat-x;
    height:20px;
}
.Tab .ajax__tab_active .ajax__tab_inner
{
    color: #ffffff;
    background:url(../images/tab_container/tab_left_active.gif) no-repeat left;
    padding-left:10px;
}
.Tab .ajax__tab_active .ajax__tab_outer
{
    color: #ffffff;
    background:url(../images/tab_container/tab_right_active.gif) no-repeat right;
    padding-right:6px;
}
/*Tab Hover*/
.Tab .ajax__tab_hover .ajax__tab_tab
{
    color: #000000;
    background:url(../images/tab_container/tab_hover.gif) repeat-x;
    height:20px;
}
.Tab .ajax__tab_hover .ajax__tab_inner
{
    color: #000000;
    background:url(../images/tab_container/tab_left_hover.gif) no-repeat left;
    padding-left:10px;
}
.Tab .ajax__tab_hover .ajax__tab_outer
{
    color: #000000;
    background:url(../images/tab_container/tab_right_hover.gif) no-repeat right;
    padding-right:6px;
}
/*Tab Inactive*/
.Tab .ajax__tab_tab
{
    color: #666666;
    background:url(../images/tab_container/tab_Inactive.gif) repeat-x;
    height:20px;
}
.Tab .ajax__tab_inner
{
    color: #666666;
    background:url(../images/tab_container/tab_left_inactive.gif) no-repeat left;
    padding-left:10px;
}
.Tab .ajax__tab_outer
{
    color: #666666;
    background:url(../images/tab_container/tab_right_inactive.gif) no-repeat right;
    padding-right:6px;
    margin-right: 2px;
}
</style>

example tab view:-


Download Images:  Ajax_tab_Images.rar

add this css code to between <head></head> tag of page
then add class="tab" to your ajax tab container tag. like this

<ajaxToolkit:TabContainer ID="TabCon1" runat="server" ScrollBars="Auto"  CssClass="Tab">




No comments:

Post a Comment