I feel extra stupid about this one... but could someone point me to the correct class for specifying the width of the tabs? Everything I try seems to make the container of the tab smaller but not the tab itself, which results in the tabs overlapping one
another...
I'm using the stylesheet from the example code, but I made my own images.
Schmakt
Member
309 Points
209 Posts
Specify the Width of Tabs by px in a Tab Container
Feb 05, 2009 04:53 PM|LINK
I feel extra stupid about this one... but could someone point me to the correct class for specifying the width of the tabs? Everything I try seems to make the container of the tab smaller but not the tab itself, which results in the tabs overlapping one another...
I'm using the stylesheet from the example code, but I made my own images.
/* XP IE7 theme - Backgrounds */
.visoft__tab_xpie7 { height:100%;text-align:left;width:90%; }
.visoft__tab_xpie7 .ajax__tab_header { background:url(../images/tabs/tab-line.gif) repeat-x bottom; }
.visoft__tab_xpie7 .ajax__tab_outer { background:url(../images/tabs/tab-right.gif) no-repeat right; }
.visoft__tab_xpie7 .ajax__tab_inner { background:url(../images/tabs/tab-left.gif) no-repeat;font-family:Arial; }
.visoft__tab_xpie7 .ajax__tab_tab { background:url(../images/tabs/tab.gif) repeat-x;font-family:Arial; }
.visoft__tab_xpie7 .ajax__tab_hover .ajax__tab_outer { background:url(../images/tabs/tab-hover-right.gif) no-repeat right; }
.visoft__tab_xpie7 .ajax__tab_hover .ajax__tab_inner { background:url(../images/tabs/tab-hover-left.gif) no-repeat; }
.visoft__tab_xpie7 .ajax__tab_hover .ajax__tab_tab { background:url(../images/tabs/tab-hover.gif) repeat-x; }
.visoft__tab_xpie7 .ajax__tab_active .ajax__tab_outer { background:url(../images/tabs/tab-active-right.gif) no-repeat right; }
.visoft__tab_xpie7 .ajax__tab_active .ajax__tab_inner { background:url(../images/tabs/tab-active-left.gif) no-repeat; }
.visoft__tab_xpie7 .ajax__tab_active .ajax__tab_tab { background:url(../images/tabs/tab-active.gif) repeat-x; }
/* XP IE7 theme - Other Styles */
.visoft__tab_xpie7 .ajax__tab_header { font-family:verdana,tahoma,helvetica;font-size:16px;color:White;font-weight:bold;font-style:italic; }
.visoft__tab_xpie7 .ajax__tab_outer { height:29px; }
.visoft__tab_xpie7 .ajax__tab_inner { padding-left:3px; }
.visoft__tab_xpie7 .ajax__tab_tab { padding:8px 40px;margin:0;width:158px; }
.visoft__tab_xie7 .ajax__tab_body { font-family:Arial;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px;background-color:White;}
<ajaxToolkit:TabContainer ID="tcServices" runat="server" CssClass="visoft__tab_xpie7">
<ajaxToolkit:TabPanel ID="tpMobile" runat="server" HeaderText="Mobile Services" Height="100%" BackColor="White">
<ContentTemplate>
....
....
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
I need the left and right to be 8px wide and the main body of the tab to be 158px wide.
Thanks...
Lance Zhang ...
All-Star
33091 Points
2361 Posts
Re: Specify the Width of Tabs by px in a Tab Container
Feb 10, 2009 06:48 AM|LINK
In this scenario, I would like to suggest you try to reduce the font-size in the TabHeader and remove the width property of ajax__tab_tab.
Please have a look at the following links, which have tutorials and demos about how to build themes for TabContainer:
AjaxControlToolkit TabContainer Theme Gallery
http://mattberseth.com/blog/2008/04/ajaxcontroltoolkit_tabcontaine.html
Creating a Simple Dashboard using the TabContainer and ListView Controls
http://mattberseth.com/blog/2008/06/creating_a_simple_dashboard_us.html
LinkedIn Style Themes for the AjaxControlToolkit Tab Container Control
http://mattberseth.com/blog/2008/02/linkedin_style_themes_for_the.html
Five AjaxControlToolkit Tab Themes created from DynamicDrive.com
http://mattberseth.com/blog/2008/01/five_ajaxcontroltoolkit_tab_th.html
Dev.Opera.com Style TabContainer Theme
http://mattberseth.com/blog/2007/11/devoperacom_style_tabcontainer.html
Using CSS Image Sprites with the XP Themed TabContainer
http://mattberseth.com/blog/2007/09/using_css_image_sprites_with_t.html
Creating a YUI TabView Style Theme for the AjaxControlToolkit's TabContainer Control
http://mattberseth.com/blog/2007/09/creating_a_yui_tabview_style_t.html
More Sample AjaxControlToolkit TabContainer Themes ...
http://mattberseth.com/blog/2007/09/more_sample_ajaxcontroltoolkit.html
Thanks.