03-01-2011, 05:06 PM
In this Tutorial, I'll do my best to explain and show you how to create Tabs, using HTML and CSS.
A Demo Preview can be seen here.
I'll show you how to create Tabs using HTML and CSS only, in addition I'll show you how to make the contents change with basic PHP.
Let us start with HTML.
In this code, we have one main div, this div holds our structure together, we will set the attribute class to "content-box".
Within the main div, we have 2 other divs, one using the class "tab-parent" and the other "content", as the names tell you one will be used
for tab placement and the other for the actual content.
The div "tab-parent", contains to children divs, one haveing the class "tab" and another "active-tab".
The "active-tab" will be styled to show current active tab, as the name says, and "tab" will be every other tab in the list. (it can be more than two, this is just a structure)
Both of those divs, have 3 childs, "tab-left", "tab-main" and "tab-right", tab-main holds our tab title, while the other two are just playing the role of an stylist. ;)
Ok, that's our HTML, now further on we use CSS to style the Structure...
This is alot more than the HTML so I'll go slowly.
First let's do the basic steps.
Important part to remember is, .content-box .content, has the selector position set to relative and z-index to two, if you don't apply
position, z-index will not work and we need it so we can set our hovers beneath the .content.
The next part of the CSS is:
With this we apply style to .tab and .active-tab, we define display as "inline-block", so our divs can act as spans. (i just like divs better for such things)
Notice the z-index, it's set on layer up then our .content div.
The selector top is set to 1px, just enough to bring our active-tab over the border of .content parent.
Now we have defined some rules for the divs within our .tab parent should follow.
Here is important to apply display, position and float, otherwise you'll encounter some ugly things. (I dare you to try it out)
And finally...
First, take a look at .content-box .tab-parent .tab:hover, we have set the z-index to 1, one lower than the .content parent, so it will be placed
behind the content div, just for a nice mouse-over effect.
In all other declarations, we apply background rules, most important part of this are the 2 pixel values and the repeat-x value.
Since we use only one image, a sliced image, we can use CSS to define the starting positions for the picture.
The first 0px defines the postions of the image from the left corner, while the second 0px/-68px does the same withthe top.
That's about it....
I will not cover the PHP, as this was meant to be only HTML/CSS Tutorial, however I will give you an picture of a way to do it in php whit this script:
![[Image: xhtml_valid.png]](http://www.unmatchedsolutions.co.uk/wp-content/themes/twentyten/images/xhtml_valid.png)
![[Image: css_valid.png]](http://www.mlgc.eu/images/icons/css_valid.png)
Hope I was able to teach you a thing or two!!! Thank you for reading.
Add Ajax to your tabs
A Demo Preview can be seen here.
Sliced-Image for the Tabs (Click to View)
![[Image: tabsy.png]](http://img710.imageshack.us/img710/5563/tabsy.png)
I'll show you how to create Tabs using HTML and CSS only, in addition I'll show you how to make the contents change with basic PHP.
Let us start with HTML.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de-DE" xml:lang="de-DE" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SupportForums Tutorial - Creating Tabs</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div class="content-box">
<div class="tab-parent">
<div class="tab">
<div class="tab-left"></div>
<div class="tab-main">Home</div>
<div class="tab-right"></div>
</div>
<div class="active-tab">
<div class="tab-left"></div>
<div class="tab-main">Forums</div>
<div class="tab-right"></div>
</div>
</div>
<div class="content">
We will later place our Page contents here, with PHP.
</div>
</div>
</body>
</html>In this code, we have one main div, this div holds our structure together, we will set the attribute class to "content-box".
Within the main div, we have 2 other divs, one using the class "tab-parent" and the other "content", as the names tell you one will be used
for tab placement and the other for the actual content.
The div "tab-parent", contains to children divs, one haveing the class "tab" and another "active-tab".
The "active-tab" will be styled to show current active tab, as the name says, and "tab" will be every other tab in the list. (it can be more than two, this is just a structure)
Both of those divs, have 3 childs, "tab-left", "tab-main" and "tab-right", tab-main holds our tab title, while the other two are just playing the role of an stylist. ;)
Ok, that's our HTML, now further on we use CSS to style the Structure...
This is alot more than the HTML so I'll go slowly.
First let's do the basic steps.
Code:
body
{
background:#8d8dda;
}
.content-box
{
margin:30px;
position:relative;
}
.content-box .content
{
background-color:#d8d8d8;
padding:10px;
width:500px;
border:1px solid white;
position:relative;
z-index:2;
}
.content-box .tab-parent
{
height:34px;
}Important part to remember is, .content-box .content, has the selector position set to relative and z-index to two, if you don't apply
position, z-index will not work and we need it so we can set our hovers beneath the .content.
The next part of the CSS is:
Code:
.content-box .tab-parent .tab, .content-box .tab-parent .active-tab
{
display:inline-block;
position:relative;
float:left;
top:1px;
z-index:3;
margin-left:3px; margin-right:3px;
cursor:pointer;
}With this we apply style to .tab and .active-tab, we define display as "inline-block", so our divs can act as spans. (i just like divs better for such things)
Notice the z-index, it's set on layer up then our .content div.
The selector top is set to 1px, just enough to bring our active-tab over the border of .content parent.
Code:
.content-box .tab-parent .tab .tab-left, .content-box .tab-parent .tab .tab-main, .content-box .tab-parent .tab .tab-right,
.content-box .tab-parent .active-tab .tab-left, .content-box .tab-parent .active-tab .tab-main, .content-box .tab-parent .active-tab .tab-right
{
display:inline-block;
position:relative;
float:left;
height:34px;
}
.content-box .tab-parent .tab .tab-left, .content-box .tab-parent .tab .tab-right,
.content-box .tab-parent .active-tab .tab-left, .content-box .tab-parent .active-tab .tab-right
{
width:8px;
}
.content-box .tab-parent .tab .tab-main, .content-box .tab-parent .active-tab .tab-main
{
padding-left:4px; padding-right:4px;
padding-top:5px;
height:29px;
}Now we have defined some rules for the divs within our .tab parent should follow.
Here is important to apply display, position and float, otherwise you'll encounter some ugly things. (I dare you to try it out)
And finally...
Code:
.content-box .tab-parent .active-tab .tab-left
{
background:url('tabs.png') 0px 0px no-repeat;
}
.content-box .tab-parent .active-tab .tab-main
{
background:url('tabs.png') 0px -34px repeat-x;
}
.content-box .tab-parent .active-tab .tab-right
{
background:url('tabs.png') 0px -68px no-repeat;
}
.content-box .tab-parent .tab:hover
{
z-index:1;
}
.content-box .tab-parent .tab:hover .tab-left
{
background:url('tabs.png') 0px -102px no-repeat;
}
.content-box .tab-parent .tab:hover .tab-main
{
background:url('tabs.png') 0px -136px repeat-x;
}
.content-box .tab-parent .tab:hover .tab-right
{
background:url('tabs.png') 0px -170px no-repeat;
}First, take a look at .content-box .tab-parent .tab:hover, we have set the z-index to 1, one lower than the .content parent, so it will be placed
behind the content div, just for a nice mouse-over effect.
In all other declarations, we apply background rules, most important part of this are the 2 pixel values and the repeat-x value.
Since we use only one image, a sliced image, we can use CSS to define the starting positions for the picture.
The first 0px defines the postions of the image from the left corner, while the second 0px/-68px does the same withthe top.
That's about it....
I will not cover the PHP, as this was meant to be only HTML/CSS Tutorial, however I will give you an picture of a way to do it in php whit this script:
Script (Click to View)
Full HTML (Click to View)
Full CSS (Click to View)
Hope I was able to teach you a thing or two!!! Thank you for reading.
Add Ajax to your tabs