Fun Infused Games  |   Smooth Operator  |   Evil Scale  |   Starcraft Live  |   Wellplayed.net RSS Feed Available RSS 

  Home   |    Archive   |    Subscribe   |    Search   |    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 AJAX, CSS    (10)

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>
0" style="display:none">

Wellplayed.net
This article has been view 207 times.

Advertisement:

Comments

Jef Claes

Avatar

1/20/2009 11:48:30 PM

Useful. But it would have been nice to have some screenshots :)
Kris

Avatar

1/25/2009 2:22:35 PM

I figured you can see it live... http://www.smthop.com for the exact version in this example and at the top-right portion of this page for a similar one.
satish

Avatar

4/16/2009 12:11:21 AM

how can we add the tabcontainer border. due to this css tabconatiner border removed. sr
satish

Avatar

4/16/2009 12:16:49 AM

how can we add the tabcontainer border. due to this css tabconatiner border removed. sr
satish

Avatar

4/16/2009 12:20:22 AM

how can we add the tabcontainer border. due to this css tabconatiner border removed. sr
satish

Avatar

4/16/2009 2:30:24 AM

how can we add the tabcontainer border. due to this css tabconatiner border removed. sr
Yair

Avatar

9/1/2009 12:57:47 AM

Thank you very much dude!

I Find your article very useful.n.
John

Avatar

9/25/2009 1:54:11 PM

Thanks for a "get to the point" article.
Sanjeev

Avatar

12/2/2009 1:17:33 AM

How can we add new tab with different background or image. Suppose my one tab is blue and I want second tab red. How can we do it?
Horizon

Avatar

12/30/2009 6:07:41 AM

No doubt. Very "to the point". I was looking for such thing since long. Thank you very much.<i


Add Comments

Current disabled. Check back soon!

Website Developed by SteeleITS - Privacy Policy
top
top


top
Tags
ASP.net (17)  Annoyances (4)  Video Games (6)  Sage-Like Advice (12)  Domain Name (1)  Internet (5)  NFL (2)  Writing (1)  Visual Studio (1)  Hypership (12)  Site News (2)  Xbox (1)  C# (15)  Sage-Like Advise (1)  Education (1)  Tech Support (1)  MSSQL (1)  Absurd (1)  Abduction Action! (27)  Nasty (36)  Economy (1)  Cool (2)  Sports (11)  .Net (1)  Web Tools (2)  Abduction! (1)  Rant (40)  XBLIG (20)  Tutorial (2)  Nastier (1)  Books (1)  Realty (1)  Programming (3)  Weird (1)  Vista (1)  Development (14)  Design (3)  XNA (35)  Links (1)  Security (2)  JavaScript (7)  CSS (1)  Video (2)  Web Development (1)  Computing (1)  Abudction Action! (1)  Popularity (1)  Game Design (4)  Google (1)  AJAX (4)  Game Development (8)  
top

top
top


Twitter

    Follow me on Twitter



    Buy My Games:
    Abduction Action!
    Nasty

    I'm with Coco.