TabStrip Style Problem

[Neda]

Hello

I have attached to photos in this thread , i want to set my style in a way that , my tab looks like photo2,what ever I do i cant make it looks like photo2 ,i have attached my style ,please help me...

Thanks a lot


.RadTabStrip
{
    
   margin-top:3px;    
   height:37px;
   float:right;
   margin-right:200px;
}
.RadTabStrip div
{
    float:right;
}

.RadTabStripTop_Default_rtl .rtsLevel .rtsLink
{
    padding-right:0 !important
}
.RadTabStrip .rtsUL, .RadTabStripVertical .rtsUL
{
    
}
.RadTabStrip_Default .rtsLI, .RadTabStrip_Default .rtsLink
{


}
.RadTabStrip .rtsLI .rtsLink
{
   
}
.RadTabStrip .rtsLevel1 .rtsLI .rtsLink
{
    color:#fff;
    background:url(../Images/Cool_Tab/tab-uselected-left.png) 10px 0 no-repeat;
    height:37px;
    font-family:Yekan,YekanNumbers,Tahoma;
    font-size:9pt;
    font-weight:normal;
    padding-left:53px;
    margin-left:0;
 
}
.RadTabStrip .rtsLevel1 .rtsLI .rtsLink .rtsOut
{
   background:url(../Images/Cool_Tab/tab-uselected-right.png) right 0px no-repeat;
    height:37px;
    padding-right:53px;
 
     
}
.RadTabStrip .rtsLevel1 .rtsLI .rtsLink .rtsIn
{
      background-image:url('../Images/Cool_Tab/tab-uselected.png');
 height:37px;
   background-repeat:repeat-x;
   line-height:37px;
}
.RadTabStrip .rtsLevel1 rtsLI .rtsLink:hover
{
    color:Green;
}
.RadTabStrip .rtsLevel1 .rtsLI .rtsLink.rtsSelected
{
    padding-top: 0px;
   background: transparent url('../Images/Cool_Tab/tab-selected-left.png') 10px 0px no-repeat;
   line-height:40px;
   width:53px;
   
   z-index:2 !important
 
}
.RadTabStripTop_Default_rtl .rtsLevel .rtsLink
{
   /*padding-right:5px !important*/
}
.RadTabStrip .rtsLevel1 .rtsLI .rtsLink.rtsSelected .rtsOut
{
   background-image:url('../Images/Cool_Tab/tab-selected-right.png');
   background-position:right;
   background-repeat:no-repeat;
   height: 40px;
   color: #fff;   
   font-family:Yekan,YekanNumbers,Tahoma;
   font-size:9pt;
   font-weight:normal;
 
   
}
.RadTabStrip .rtsLevel1 .rtsLI .rtsLink.rtsSelected .rtsIn
{
  background-image:url('../Images/Cool_Tab/tab-selected.png');
 height:40px;
   background-repeat:repeat-x;
   color:#000
    
}

[Ivan Zhekov]

Hello.

I have attached a proof of concept skin that illustrates how to achieve something similar to your desired skin.

In a nutshell: tab containers are shifter to the left (or right in your case); the tabs are given z-index and then the selected tab is given a higher z-index so it "pops" out.

Regards,
Ivan Zhekov
Telerik