Results 1 to 24 of 24
-
05-05-2011, 02:47 AM #1Corporate Member
- Join Date
- Apr 2010
- Location
- Global
- Posts
- 104
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; }
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 Data Center Services Provider
Bare-Metal Dedicated Servers, Cloud & VPS, Colocation, Data Center Managed Services
https://netshop-isp.com.cy
sales@netshop-isp.com.cy | Skype: netshopisp
-
06-08-2011, 02:00 PM #2Newbie
- Join Date
- Jun 2010
- Posts
- 22
Thanks for this greatful tutorial!
-
06-10-2011, 11:55 AM #3Newbie
- Join Date
- Apr 2011
- Posts
- 16
nice share! thanks
-
07-29-2011, 12:39 PM #4Newbie
- Join Date
- Jun 2011
- Posts
- 19
Beautiful Tutorial. Thank you so much!
-
09-07-2011, 11:33 AM #5Newbie
- Join Date
- Aug 2011
- Posts
- 13
Pretty good tutorial, I had some issues, but I solved it
-
12-10-2012, 05:14 PM #6New Member
- Join Date
- Dec 2012
- Posts
- 1
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.
-
12-31-2012, 09:04 AM #7Temporarily Suspended
- Join Date
- Aug 2010
- Location
- Kuala Lumpur
- Posts
- 1,632
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>
-
02-11-2013, 04:43 PM #8Newbie
- Join Date
- Sep 2012
- Posts
- 9
Thnaks for this tutorial I'm new in this domain and I'll try to learn from this.
-
02-14-2013, 10:36 PM #9New Member
- Join Date
- Feb 2013
- Posts
- 1
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.
-
02-16-2013, 11:41 AM #10Newbie
- Join Date
- Feb 2013
- Posts
- 7
Thanks for this! I was brand new to creating tabs and this will surely help me learn, thanks!
-
03-02-2013, 11:12 PM #11New Member
- Join Date
- Mar 2013
- Posts
- 1
Great!
Thanks for the great tutorial! Now how do I add three tabs, or four?
-
08-28-2013, 05:43 PM #12Disabled
- Join Date
- Aug 2013
- Posts
- 4
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.
-
11-13-2013, 05:02 AM #13New Member
- Join Date
- Nov 2013
- Posts
- 3
thanks for sharing..
-
11-28-2013, 01:11 PM #14Newbie
- Join Date
- Aug 2011
- Posts
- 12
Quick and easy tutorial, thanks!
-
12-06-2013, 07:21 AM #15New 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..
-
12-29-2013, 11:21 PM #16New Member
- Join Date
- Dec 2013
- Posts
- 2
Content truncated
I managed to get two tabs working, but I had a long text to put into the second tab, and it is in the form of several paragraphs. Only 7-1/2 lines appear, the last line is truncated horizontally in the middle of the letters, and no more appears. I checked the source and the truncated line is simply in the middle of a paragraph. Two full paragraph appear correctly, and the next one begins properly.
Can someone guide me to what has caused this? I do not see any code limiting the length of the display, but that is what it looks like.
Thank you,
Jan
-
12-29-2013, 11:24 PM #17Disabled
- Join Date
- Jan 2006
- Posts
- 297
Love my Wordpress for tabs so easy to do.
-
12-30-2013, 03:51 AM #18New Member
- Join Date
- Dec 2013
- Posts
- 2
Found problem with truncated entry
There is a line in the CSS that limits the tab content. It is: height: 150px;
Jan
-
01-04-2014, 12:37 PM #19Disabled
- Join Date
- Dec 2013
- Posts
- 9
Thank you for this tutorial. It will be helpful.
-
02-07-2014, 11:16 PM #20Web Hosting Evangelist
- Join Date
- May 2008
- Location
- Cusco Perú
- Posts
- 531
The tutorial is appreciated.
Update, you can now create pure css tab
Example.
http://www.cssplay.co.uk/menu/csspla...ages.html#tab1Cybernes Hosting: Hosting Cusco
-
02-08-2014, 12:31 AM #21Junior Guru Wannabe
- Join Date
- May 2012
- Posts
- 52
██www.HostingITEM.com
██ Dedicated Servers | Cloud Dedicated Servers | Contact Us : sales@hostingitem.com
-
03-04-2014, 01:35 AM #22Disabled
- Join Date
- Jan 2013
- Posts
- 159
Thanks for your shared, that's really great tutorial
-
04-02-2014, 02:25 PM #23Newbie
- Join Date
- Jun 2013
- Posts
- 10
Thanks for the really cool tutorial and example code!
-
06-13-2014, 01:07 AM #24Mr. Infraction & OFF Topic
- Join Date
- Jul 2010
- Location
- montreal
- Posts
- 767
Oh nice thanks for sharing
Similar Threads
-
IE7 ignoring specific CSS selector when styling jquery ui tabs
By damainman in forum Web Design and ContentReplies: 3Last Post: 02-03-2011, 11:59 AM -
How to create color gradient on the background and the menu tabs on the home page
By wolfmoon in forum Web Design and ContentReplies: 4Last Post: 01-21-2010, 10:52 PM -
Unique Content Tabs using only CSS?
By Dr. Doom in forum Web Design and ContentReplies: 2Last Post: 10-22-2008, 05:35 AM -
Guitar Tabs website. Huge data base of over 150k tabs. Custom script and design
By leo1977 in forum Other Offers & RequestsReplies: 11Last Post: 12-03-2006, 07:17 AM -
Coded css/xhtml hosting template- with JS tabs-[for sale]
By flakdesign in forum Design OffersReplies: 5Last Post: 06-07-2006, 05:00 AM