Specify the Width of Tabs by px in a Tab Container RSS

• • Reply
  

  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...
  

• • Reply
  

  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

  Hi
   
  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.
  

   

  Lance Zhang
  • Marked as answer by Lance Zhang - MSFT on Feb 11, 2009 12:47 AM