Get Paid to Participate - up to $1 per post!     Twitter     Facebook     Google+
Hosting Discussion
 

Hosting Discussion > Web Hosting Forums > Website Development & Design > How to create Tabs using HTML and CSS
forgot password?



Reply


Old
  Post #1 (permalink)   05-05-2011, 12:48 AM
HD Newbie
 
Join Date: Dec 2010
Posts: 47
Send a message via Skype™ to Netshop-Isp

Status: Netshop-Isp is offline
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>
__________________
Leading Web Hosting Provider
Data Centers in Cyprus, Malta and United Kingdom
Web: https://www.netshop-isp.com.cy
Email: sales@netshop-isp.com.cy | Skype: netshopisp
 
 


Old
  Post #2 (permalink)   07-05-2011, 03:07 PM
HD Newbie
 
Join Date: Apr 2011
Posts: 11

Status: cycom22 is offline
great! thanks for the share... hope for more codes..
 
 
 


Old
  Post #3 (permalink)   09-09-2011, 03:03 AM
HD Newbie
 
Join Date: Sep 2011
Posts: 3

Status: malinky is offline
Thanks for sharing your code, very kind
__________________
Grantham Local Website | Newark Web
 
 
 


Old
  Post #4 (permalink)   09-09-2011, 09:05 AM
HD Community Advisor
 
SenseiSteve's Avatar
 
Join Date: Mar 2009
Location: Saint Louis
Posts: 4,975
Send a message via MSN to SenseiSteve

Status: SenseiSteve is offline
Thanks for the share, Netshop-Isp
__________________
ProlimeHost- Dedicated Server Hosting & KVM SSD VPS
Three Datacenter Locations: Los Angeles, Denver & Singapore
SuperMicro Hardware | Multiple Bandwidth Providers | 24/7 On Site Engineers
 
 
 


Old
  Post #5 (permalink)   11-16-2011, 08:12 AM
HD Amateur
 
Join Date: Nov 2011
Posts: 82

Status: webhostingcs is offline
Hello,

Nice code... You can also try this one, Ajax Tab Content Script:

http://dynamicdrive.com/dynamicindex17/tabcontent.htm

Thanks!
__________________
Website - https://inext.ph
Facebook - https://www.facebook.com/inext.ph
Twitter - https://twitter.com/inextph
 
 
 


Old
  Post #6 (permalink)   11-21-2011, 11:51 PM
HD Master
 
Join Date: Nov 2011
Location: Singapore
Posts: 295

Status: JFSG is offline
Thanks for sharing it. Do you have an example of the code being used? I know donkeys regarding CSS so it will be nice to know what the effect would be like.
__________________
LIMENEX WEB HOSTING
Affordable High Performance Web Hosting
Web Hosting | Reseller Hosting | Managed VPS & Dedicated Servers | SSL Certificates
 
 
 
Reply

Thread Tools

New Post New Post   Old Post Old Post
Posting Rules:
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Sponsored By: