Converting Microsoft.Web.UI.WebControls TabStrip

[Super]

Hi,

I'm trying to evaluate the TabStrip control and try to match the functionality we currently use in our product using Microsoft.Web.UI.WebControls

So far functionality wise was accomplished by going through the help manual and the look and feel is where I'm unable to figure out how to match what we have. 

My Tab consists of 3 images left middle and right and base on the Status I have CSS to set the appropriate images (selected, hoover, default) 

I have looked at the skin and it is way beyond my expertise in CSS  I was wondering if there is a way to accomplish the same thing with local style sheet with out using the skin.

following is a sample declaration of a Microsoft

<iewc:tabstrip id="MessageSheet_Sheet" TargetID="MessageSheet"
    TabDefaultStyle ="border-width:0 px;
       border-color: #EFEFEF;
       border-style: Groove;
       background-image:url(images/TabMiddle-Normal.gif);
       background-color:#CACACA;
       color:#000000;
       font-family:verdana;
       font-size:11 px;
       text-decoration: None;
       border-left-style:none;
       border-right-style:none;
       border-bottom-style:none;
       border-top-style:none;
       cursor:pointer;"
    TabHoverStyle =" background-image:url(images/TabMiddle-Normal.gif);
       background-color:#CACACA;
       color:#000000;
       font-family:verdana;
       font-size:11 px;
       text-decoration: Underline;
       cursor:pointer;"
    TabSelectedStyle ="border-left-style:none;
       border-right-style:none;
       border-bottom-style:none;
       border-top-style:Groove;
       background-image:url(images/TabMiddle-Selected.gif);
       background-color:#DACEB5;
       color:#000000;
       font-family:verdana;
       font-size:11 px;text-decoration: None;"
    runat="Server"
    CssClass="MultiPage"
    tabindex="-1"
    >
    <iewc:TabSeparator DefaultImageUrl="images/TabBegin-Normal.gif" SelectedImageUrl="images/TabBegin-Selected.gif" />
    <iewc:Tab Text="&nbsp;&nbsp; Incoming &nbsp;&nbsp;" ID="IncomingMessages_Tab"></iewc:Tab>
    <iewc:TabSeparator DefaultImageUrl="images/TabEnd-Normal.gif" SelectedImageUrl="images/TabEnd-Selected.gif" />
    <iewc:TabSeparator DefaultImageUrl="images/TabBegin-Normal.gif" SelectedImageUrl="images/TabBegin-Selected.gif" />
    <iewc:Tab Text="&nbsp;&nbsp; Outgoing &nbsp;&nbsp;" ID="OutgoingMessages_Tab"></iewc:Tab>
    <iewc:TabSeparator DefaultImageUrl="images/TabEnd-Normal.gif" SelectedImageUrl="images/TabEnd-Selected.gif" />
</iewc:tabstrip>

Sincerely,

Fadi

[Alex Gyoshev]

Hello Super Dad,

Please find attached an aspx page that demonstrates the converted skin. If you provide a screenshot and the images, we could help you further.

All the best,
Alex
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Super]

Hi Alex,

Thanks a lot for your response,  that worked great I just needed to add "padding-right: 20px;" to the rstOut  and now my tabs look exactly as they should be.

Now the million dollar question,  is there a CSS Setting I can use to make the tab look over lapped?

Sincerely,

Fadi

[Alex Gyoshev]

Hello Fadi,

Well, there are a bunch. The solution I prefer would be to add the following styles:

/* makes the tabs overlap by 10px */
.RadTabStrip .rtsUL
{
    padding-right: 10px;
}

.RadTabStrip .rtsLI
{
    margin-right: -10px;
}

/* sets the selected tab to be over the others */
.RadTabStrip .rtsSelected
{
    position: relative;
    z-index: 5;
}

However, I'm writing these styles blindly - if you open a support ticket and submit your skin (w/ images) I'd be glad to fine-tune them.

Best wishes,
Alex
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Super]

Hi Alex,

That Style worked perfectly,  except the last tab,  if it is not selected then it shows the end cut off.

I will submit a sample project with the images.

thanks for all your help

Sincerely,

Fadi