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 kriswd40@yahoo.com 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 Smthop.com 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" >
</ajaxToolkit:TabContainer> 



This article has been view 29641 times.


Comments

adsf

Avatar

dfdss
7/21/2014 9:32:42 PM

sdfsfsdfs
debashis

Avatar

2/2/2015 11:38:41 PM

Thanx it is working fine


Add Comments

Name *
Website
  Name the animal in the picture below:

*  
Comment *
Insert Cancel
Things To Click


Tags
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)  ASP.net (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)