Fun Infused Games  |   Smooth Operator

  Home   |    Archive   |    About
Posts prior to 8/2/2010 may be missing data. If you need one of those posts, please contact and I will try and recover/find it.

Styling an AJAX Tab Container
Date 11/13/2008    Tags Web    (2)

One of the cooler controls the Microsoft included with their implementation of AJAX is the TabContainer. The TabContainer easily allows you to create (not surprisingly) a tabbed container. While it's easy to setup, it's pretty plain out of the box. Thankfully with just a little CSS, we can change this.

Let's start first by creating the CSS you will need to style your container. Below is a brief description of what each element in the CSS for the TabContainer does.
  • .ajax__tab_header: The heading section of your tabs and also the font that appears in your tabs.
  • .ajax__tab_outer: The outside edges of any non-selected tabs.
  • .ajax__tab_inner: The inside of the non-selected tabs.
  • .ajax__tab_hover: What the tab (either selected or not) look like when the most is over them.
  • .ajax__tab_active .ajax__tab_outer: The outside edges of the selected tab.
  • .ajax__tab_active .ajax__tab_inner: The inside of the selected tab.
Below is the CSS I'm going to use to style these a bit. While you can go crazy and use images, I'm just going to go for a simple, clean look by using some different coloring and font styles.

.NewsTab .ajax__tab_header 
    color: #aa976b;
    font-size: 13px;
    font-weight: bold;
    background-color: White;
    margin-left: 10px;
.NewsTab .ajax__tab_outer
    background-color: White;
.NewsTab .ajax__tab_inner
    padding: 6px;
    margin-right: 1px;
    margin-left: 1px;
    margin-top: 1px;
    margin-bottom: 1px;
    background-color: #f8f6ea;
.NewsTab .ajax__tab_hover .ajax__tab_outer
    background-color: Orange;
.NewsTab .ajax__tab_hover .ajax__tab_inner
    background-color: #FFFFE1;
.NewsTab .ajax__tab_active .ajax__tab_outer
    background-color: White;
.NewsTab .ajax__tab_active .ajax__tab_inner
    background-color: #fefdf7;
If you want to see this in action, visit and look at the TabContainer on the top of the right side bar. You can also see a variation of this used for this site(with slightly different coloring) on the right side bar of this page.

After you get your CSS created, you just need to associate it with your TabContainer, which is done simply by added a CssClass property pointing to this CSS class in your TabContainer.
<ajaxToolkit:TabContainer ID="myTabContainer" runat="server" Width="100%" CssClass="NewsTab" >

This article has been view 29641 times.




7/21/2014 9:32:42 PM



2/2/2015 11:38:41 PM

Thanx it is working fine

Add Comments

Name *
  Name the animal in the picture below:

Comment *
Insert Cancel
Things To Click

Video Games (7)  Trivia or Die (3)  SQL (1)  iOS (3)  Game Dev (11)  Advise (14)  PC (1)  World of Chalk (2)  FIN (20)  Abduction Action! (27)  XBLIG (32)  Abduction Action (1)  Nastier (4) (18)  Absurd (2)  Volchaos (11)  Web (19)  Fin (1)  XNA (40)  Rant (50)  Cool (2)  Visual Studio (1)  Trivia Or Die (1)  Xbox (1)  C# (14)  Sports (11)  Design (2)  Development (13)  Hypership (28)  WP7 (8)  VolChaos (1)  Nasty (34)  Abdction Action! (1)