How to Create Tab Panel Using Css

Question

I want to create Tab panel using css (Not use of AJAX). Can any one help me?

Using Ajax Control:

<asp:TabContainer ID="TabContainer1" runat="server" Height="120px" Width="99%" ActiveTabIndex="4"
                                        TabStripPlacement="Top"   CssClass="ajax__tab_xp" ScrollBars="Both" useverticalstripplacement="true"
                                        verticalstripwidth="100px">
<asp:TabPanel HeaderText="Exchange Rates" ID="TabPanel1" runat="server" Enabled="true"
                                            ScrollBars="Both">
</asp:TabPanel>
</asp:TabContainer>

But i want in Css...

Answer 1

HTMl-

<div class="tabGroup">
<input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked"/>
<label for="rad1">Tab 1</label>

<input type="radio" name="tabGroup1" id="rad2" class="tab2"/>
<label for="rad2">Tab 2</label>

<input type="radio" name="tabGroup1" id="rad3" class="tab3"/>
<label for="rad3">Tab 3</label>

<br/>

<div class="tab1">Tab 1 content</div>
<div class="tab2">Tab 2 content</div>
<div class="tab3">Tab 3 content</div>
</div>

CSS-

/* Set the size and font of the tab widget */
.tabGroup {
font: 10pt arial, verdana;
width: 800px;
height: 400px;
}

/* Configure the radio buttons to hide off screen */
.tabGroup > input[type="radio"] {
position: absolute;
left:-100px;
top:-100px;
}

/* Configure labels to look like tabs */
.tabGroup > input[type="radio"] + label {
/* inline-block such that the label can be given dimensions */
display: inline-block;

/* A nice curved border around the tab */
border: 1px solid black;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;

/* the bottom border is handled by the tab content div */
border-bottom: 0;

/* Padding around tab text */
padding: 5px 10px;

/* Set the background color to default gray (non-selected tab) */
background-color:#ddd;
}

/* Focused tabs need to be highlighted as such */
.tabGroup > input[type="radio"]:focus + label {
border:1px dashed black;
 }

/* Checked tabs must be white with the bottom border removed */
.tabGroup > input[type="radio"]:checked + label {
background-color:white;
font-weight: bold;
border-bottom: 1px solid white;
margin-bottom: -1px;
}

 /* The tab content must fill the widgets size and have a nice border */
.tabGroup > div {
display: none;
border: 1px solid black;
background-color: white;
padding: 10px 10px;
height: 100%;
overflow: auto;

box-shadow: 0 0 20px #444;
-moz-box-shadow: 0 0 20px #444;
-webkit-box-shadow: 0 0 20px #444;

border-radius: 0 5px 5px 5px;
-moz-border-radius: 0 5px 5px 5px;
-webkit-border-radius: 0 5px 5px 5px;
}

/* This matchs tabs displaying to thier associated radio inputs */
.tab1:checked ~ .tab1, .tab2:checked ~ .tab2, .tab3:checked ~ .tab3 {
display: block;
}

Answer 2

I will give you the CSS, HTML, and Code-behind. I ended up not using the AJAX tab control offered in the Toolkit. Instead I modified my Pure CSS tabs. This approach works great for me and removes all the postback flashing on the page. I am developing for an IE environment, so the CSS might need to be tweeked to display correctly in other browsers. I know that Firefox works okay, but the padding is a bit off. I think this is a great way to add AJAX tabs on your page and be able to modify the tab look and feel easily. I welcome any comments or suggestions. See example below:

CSS CODE:

 /* CSS Document */


#tabcontent {
border-left:1px solid #000000;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
padding:10px 5px 6px 5px;
}


/*Tab Navigation*/


ul#tabnav {
list-style-type:none;
margin:0;
padding-left:40px;
padding-bottom:24px;
border-bottom:1px solid #000000;
font: bold 11px verdana, arial, sans-serif;
}


ul#tabnav li {
float:left;
height:21px;
background-color:#C2DBF6;
color:#000000;
margin:2px 2px 0 2px;
border:1px solid #000000;


}


ul#tabnav a:link, ul#tabnav a:visited {
display:block;
color:#000000;
background-color:transparent;
text-decoration:none;
padding:4px;
}


ul#tabnav a:hover{
background-color:#72ABEB;
color:#FFFFFF;
}


ul#tabnav a.activeTab{
border-bottom:1px solid #FFFFFF;
color:#000000;
background-color:#FFFFFF;
}

Now the HTML and Code: (web.config should be setup already to handle ajax controls)

<head runat="server"><!--Make sure you add the the runat property to the HEAD tag or your page will break if you try and use the AJAX Toolkit-->
<link rel="stylesheet" type="text/css" href="css/ajaxnav.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tab Layout</title>

More about this you can find HERE