hosted by liquidweb


Go Back   Web Hosting Talk : Web Hosting Main Forums : Web Hosting Talk Tutorials : Web Design and Content Tutorials : How to create Tabs using HTML and CSS
Reply

Forum Jump

How to create Tabs using HTML and CSS

Reply Post New Thread In Web Design and Content Tutorials Subscription
 
Send news tip View All Posts Thread Tools Search this Thread Display Modes
  #1  
Old 05-05-2011, 02:47 AM
Netshop-Isp Netshop-Isp is online now
Junior Guru Wannabe
 
Join Date: Apr 2010
Posts: 80

How to create Tabs using HTML and CSS


Tabs can be really useful especially for content-crowded web sites. You can save plenty of space just by placing your block of content in tabs and displaying one block at a time in the same place.

The content that you break-up in tabs, though, should be somehow relevant. For example, you can separate in tabs content about Weather Forecasting; tabs could be cities in your country, or forecast days.

If you are in the web hosting business, you might want to "tabularize" the different type of web hosting plans you offer, like Shared Web Hosting, VPS Hosting, Cloud Hosting, Dedicated Servers etc.

However, grouping content in tabs can be a “double-edged sword”. As the content is being compact in one tab, other tabs’ content is hidden. If, for example, you are running an e-commerce website that offers technology products like laptops, groupin the various laptop models will forbid potential customers from comparing the laptop features!

Now that we have discussed the importance and value of tabs in a website, lets proceed to the technical side of things: How to create tabs using HTML and CSS. The following example is for a horizontal tab area. We will create the tabs without any images; pure css and html and a small bit of javascript.

In the css file create the following classes:

Code:
#Tabs ul {
padding: 0px;
margin: 0px;
margin-left: 10px;
list-style-type: none;
}

#Tabs ul li {
display: inline-block;
clear: none;
float: left;
height: 24px;
}

#Tabs ul li a {
position: relative;
margin-top: 16px;
display: block;
margin-left: 6px;
line-height: 24px;
padding-left: 10px;
background: #f6f6f6;
z-index: 9999;
border: 1px solid #ccc;
border-bottom: 0px;

/* The following four lines are to make the top left and top right corners of each tab rounded. */
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
/* end of rounded borders */

width: 130px;
color: #000000;
text-decoration: none;
font-weight: bold;
}

#Tabs ul li a:hover {
text-decoration: underline; // a very simple effect when hovering the mouse on tab
}

#Tabs #Content_Area { // this is the css class for the content displayed in each tab
padding: 0 15px;
clear:both;
overflow:hidden;
line-height:19px;
position: relative;
top: 20px;
z-index: 5;
height: 150px;
overflow: hidden;
}

p { padding-left: 15px; }
That’s all you need to do in the css file. Let’s go to the HTML file now.

Wherever you want to place your horizontal tabs, place the following code:

<div id=”Tabs”>
<ul>
<li id=”li_tab1″ onclick=”tab(‘tab1′)” ><a>Tab 1</a></li>
<li id=”li_tab2″ onclick=”tab(‘tab2′)”><a>Tab 2</a></li>
</ul>
<div id=”Content_Area”>
<div id=”tab1″>
<p>This is the text for tab 1</p>
</div>

<div id=”tab2″ style=”display: none;”> <!– We set its display as none because we don’t want to make this
tab visible by default. The only visible/active tab should be Tab 1 until the visitor clicks on Tab 2. –>
<p>This is the text for tab 2.</p>
</div>
</div> <!– End of Content_Area Div –>
</div> <!– End of Tabs Div –>

At the end of your HTML file place the following javascript code. It is necessary for the tabs switching:

Code:
<script type=”text/javascript”>
function tab(tab) {
document.getElementById(‘tab1′).style.display = ‘none’;
document.getElementById(‘tab2′).style.display = ‘none’;
document.getElementById(‘li_tab1′).setAttribute(“class”, “”);
document.getElementById(‘li_tab2′).setAttribute(“class”, “”);
document.getElementById(tab).style.display = ‘block’;
document.getElementById(‘li_’+tab).setAttribute(“class”, “active”);
}
</script>

__________________
NetShop Internet Services Ltd
Shared / Virtual / Dedicated Servers & Collocation Hosting in Cyprus, Malta and UK Data Centers

Leading Web Development Services & eCommerce Solutions since 2004
www.netshop-isp.com.cy| Netshop Blog



Sponsored Links
  #2  
Old 06-08-2011, 02:00 PM
phudq90 phudq90 is offline
Newbie
 
Join Date: Jun 2010
Posts: 20
Thanks for this greatful tutorial!

  #3  
Old 06-10-2011, 11:55 AM
lost_wanderer lost_wanderer is offline
Newbie
 
Join Date: Apr 2011
Posts: 15
nice share! thanks

Sponsored Links
  #4  
Old 07-29-2011, 12:39 PM
KirkHansen KirkHansen is offline
Newbie
 
Join Date: Jun 2011
Posts: 18
Beautiful Tutorial. Thank you so much!

  #5  
Old 09-07-2011, 11:33 AM
echh1993 echh1993 is offline
Newbie
 
Join Date: Aug 2011
Posts: 10
Pretty good tutorial, I had some issues, but I solved it

  #6  
Old 12-10-2012, 05:14 PM
toddt1 toddt1 is offline
New Member
 
Join Date: Dec 2012
Posts: 0
Wouldn't Work

Would not work, even with the java and css in the header of the html file. I just saw white boxes with "Tab 1" and "Tab 2" and the text for tab 1 displayed. None of the styling or clicking worked.

  #7  
Old 12-31-2012, 09:04 AM
Shinjiru Technology Shinjiru Technology is offline
Disabled
 
Join Date: Aug 2010
Location: Kuala Lumpur, Malasiya
Posts: 1,524
Awesome tutorial. I combined the tutorial into one place, check it out.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>

<style type="text/css">
#tabs ul {
padding: 0px;
margin: 0px;
margin-left: 10px;
list-style-type: none;
}

#tabs ul li {
display: inline-block;
clear: none;
float: left;
height: 24px;
}

#tabs ul li a {
position: relative;
margin-top: 16px;
display: block;
margin-left: 6px;
line-height: 24px;
padding-left: 10px;
background: #f6f6f6;
z-index: 9999;
border: 1px solid #ccc;
border-bottom: 0px;
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
width: 130px;
color: #000000;
text-decoration: none;
font-weight: bold;
}

#tabs ul li a:hover {
text-decoration: underline;
}

#tabs #Content_Area {
padding: 0 15px;
clear:both;
overflow:hidden;
line-height:19px;
position: relative;
top: 20px;
z-index: 5;
height: 150px;
overflow: hidden;
}

p { padding-left: 15px; }
</style>

<script type="text/javascript">
function tab(tab) {
document.getElementById('tab1').style.display = 'none';
document.getElementById('tab2').style.display = 'none';
document.getElementById('li_tab1').setAttribute("class", "");
document.getElementById('li_tab2').setAttribute("class", "");
document.getElementById(tab).style.display = 'block';
document.getElementById('li_'+tab).setAttribute("class", "active");
}
</script>

</head>

<body>

<div id="tabs">
<ul>
<li id="li_tab1" onclick="tab('tab1')"><a>Tab 1</a></li>
<li id="li_tab2" onclick="tab('tab2')"><a>Tab 2</a></li>
</ul>
<div id="Content_Area">
<div id="tab1">
<p>This is the text for tab 1</p>
</div>

<div id="tab2" style="display: none;">
<p>This is the text for tab 2.</p>
</div>
</div>
</div>
</body>
</html>

  #8  
Old 02-11-2013, 04:43 PM
DBCA-Designs DBCA-Designs is offline
New Member
 
Join Date: Sep 2012
Posts: 4
Thnaks for this tutorial I'm new in this domain and I'll try to learn from this.

  #9  
Old 02-14-2013, 10:36 PM
tjjames_com tjjames_com is offline
New Member
 
Join Date: Feb 2013
Posts: 0
Talking Thanks Shinjiru

Collectively as you have built it, it works. However, that which was originally perceived by me, "creating separate css and html files," does not work "properly", thus, only results in a simple text display.

  #10  
Old 02-16-2013, 11:41 AM
StaticHosting_c StaticHosting_c is offline
Newbie
 
Join Date: Feb 2013
Posts: 5
Thanks for this! I was brand new to creating tabs and this will surely help me learn, thanks!

  #11  
Old 03-02-2013, 11:12 PM
yesmike0215 yesmike0215 is offline
New Member
 
Join Date: Mar 2013
Posts: 0
Great!

Thanks for the great tutorial! Now how do I add three tabs, or four?

  #12  
Old 08-28-2013, 05:43 PM
CHEWX CHEWX is offline
Disabled
 
Join Date: Aug 2013
Posts: 3
add extra lis for tabs, extra divs for content and extra javascript to make it work. Copy the second tab for all 3 and rename to 3, and 4 etc.

  #13  
Old 11-13-2013, 05:02 AM
webAndys webAndys is offline
New Member
 
Join Date: Nov 2013
Posts: 1
thanks for sharing..

  #14  
Old 11-28-2013, 01:11 PM
cubicle cubicle is offline
Newbie
 
Join Date: Aug 2011
Posts: 12
Quick and easy tutorial, thanks!

  #15  
Old 12-06-2013, 07:21 AM
kadajkoko kadajkoko is offline
New Member
 
Join Date: Dec 2013
Posts: 1
Tabs

Great guide! Somehow i cannot make the third tab to work, it only shows the third tab but the content is empty. Help me please..

Reply

Similar Threads
Thread Thread Starter Forum Replies Last Post
IE7 ignoring specific CSS selector when styling jquery ui tabs damainman Web Design and Content 3 02-03-2011 11:59 AM
How to create color gradient on the background and the menu tabs on the home page wolfmoon Web Design and Content 4 01-21-2010 10:52 PM
Unique Content Tabs using only CSS? Dr. Doom Web Design and Content 2 10-22-2008 05:35 AM
Guitar Tabs website. Huge data base of over 150k tabs. Custom script and design leo1977 Other Offers & Requests 11 12-03-2006 07:17 AM
Coded css/xhtml hosting template- with JS tabs-[for sale] flakdesign Design Offers 5 06-07-2006 05:00 AM

Related posts from TheWhir.com
Title Type Date Posted
11 Percent of Americans Believe HTML is an STD, and Other Surprising Findings Around Tech Jargon Blog 2014-03-04 15:36:03
NoSQLNow 2013 Web Hosting Events 2013-08-09 15:40:53
1&1 Internet Launches Tool to Improve Social Media for MyWebsite Customers Web Hosting News 2013-07-09 14:23:42
Emerging Tech - HTML5 Blog 2013-05-29 10:54:46
Facebook's Recently Acquired Mobile App Platform Parse Launches Web Hosting for Developers Web Hosting News 2013-05-08 10:49:17


Tags
css, how to, html, tabs

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes
Postbit Selector

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump
Login:
Log in with your username and password
Username:
Password:



Forgot Password?
Advertisement:
Web Hosting News:



 

X

Welcome to WebHostingTalk.com

Create your username to jump into the discussion!

WebHostingTalk.com is the largest, most influentual web hosting community on the Internet. Join us by filling in the form below.


(4 digit year)

Already a member?