[Solved] Background image(s) and overlapping tabs

[Ozzy Knox]

Hi,

I am in the process of a new development using ASP.NET MVC.  I need to reproduce a UI experience from an older application which uses Telerik ASP.NET AJAX controls.  My current focus is the TabStrip extension.  The equivalent Telerik AJAX control in our other application uses 3 background images to produce the look of the tab button and then it also produces an overlapping look.  

I would like to know if this look can be reproduced using the TabStrip MVC extension, or whether there are limitations on this.  If the exact approach is not possible, is there a way I can put in a single bg image per tab button and control padding within the tab button and also control margins by using a negative margin value in order to create the overlapping look.

Thanks for any helpful input.

[Alex Gyoshev]

Hello Ozzy,

Indeed, you can achieve this effect with negative margins (since there isn't enough rendered HTML to take the ASP.NET AJAX approach). Therefore:

1. set the active tab state to be above all others, like this:
       .t-tabstrip li.t-state-active { z-index: 2 }
2. set a negative left (or right) margin on all tabs, like this:
       .t-tabstrip-items .t-item { margin-left: -10px; }
3. add padding to the items wrap so that the items stay within it
       .t-tabstrip-items { padding-left: 10px; }

The above steps (plus setting the tab backgrounds) should be sufficient to achieve the effect.
Regards,
Alex Gyoshev
the Telerik team