Create tab page in css

Hi all,

I just want to ask how i can create an tabbed page so with using css n JavaScript :slight_smile:

would you like give me some sample code ? :slight_smile:

thank you :cool:

Hi, i still need help to know about it :wink:

Just CSS? Or CSS and JS?

hmm, I’ve heard from another resource it will need javascript for save the content were into JavaScript variable . CMIIW :slight_smile:

You could look at the source code on the page you provided and just use their script. I’m not sure of the use case, but something similar could be accomplished using on HTML and CSS. There are also plenty of tutorials on how to create this as well as pre-made scripts all over the web.

Good luck!

I’ve heard it need using JS :slight_smile:

Just CSS? Or CSS and JS?

Just curious, why do you need JS to create tabs? Tabs can be easily, well mostly, created with just CSS and HTML.

I would use the following:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Basic One Column Web Site</title>
		<style type="text/css">
			/* CSS Reset - based on Eric Meyer's v1.0*/
			
			html, body, div, span, applet, object, iframe,
			h1, h2, h3, h4, h5, h6, p, blockquote, pre,
			a, abbr, acronym, address, big, cite, code,
			del, dfn, em, font, img, ins, kbd, q, s, samp,
			small, strike, strong, sub, sup, tt, var,
			b, u, i, center,
			dl, dt, dd, ol, ul, li,
			table, caption, tbody, tfoot, thead, tr, th, td {
				margin: 0;
				padding: 0;
				border: 0;
				outline: 0;
				font-size: 100%;
				vertical-align: baseline;
				background: transparent;
			}
			body {
				line-height: 1;
			}
			ol, ul {
				list-style: none;
			}
			blockquote, q {
				quotes: none;
			}
			blockquote:before, blockquote:after,
			q:before, q:after {
				content: '';
				content: none;
			}
			
			/* remember to define focus styles! */
			:focus {
				outline: 0;
			}
			
			/* remember to highlight inserts somehow! */
			ins {
				text-decoration: none;
			}
			del {
				text-decoration: line-through;
			}
			
			/* tables still need 'cellspacing="0"' in the markup */
			table {
				border-collapse: collapse;
				border-spacing: 0;
			}
			
			/* Page Styles */
			html {
				background: #fff;
			}
			body {
				width: 960px;
				height: auto;
				margin: 0 auto;
				padding: 8px;
				background: #eee;
				border-left: 1px solid #000;
				border-right: 1px solid #000;				
				font-size: 1em;
			}
			#header {
				height: 180px;
			}
			#navigation {
				
			}
			#navigation li {
				float: left;
				border: 1px solid;
				border-bottom-width: 0;
				margin: 0 0.5em 0 0.5em;
				background: #ddd;
				-moz-border-radius-topleft: 5px;
				-moz-border-radius-topright: 5px;
				-webkit-border-top-left-radius: 5px;
				-webkit-border-top-right-radius: 5px;
				border-radius: 5px;
			}
			#navigation li a {
				display: block;
				width: 122px;
				height: 20px;
				font-weight: bold;
				line-height: 14px;
				padding: 2px 10px 2px 10px;
				text-align: center;
				text-decoration: none;
			}
			#navigation li.active {
				position: relative;
				top: 1px;
				background: #fff;
			}
			#main-content {
				clear: both;
				background: #fff;
				border-top: 1px solid #000;
				border-right: 1px solid #000;
				border-bottom: 1px solid #000;
				border-left: 1px solid #000;
			}
			#footer {
				height: 150px;
			}
			/* Typography */
			h1 {
				font-size: 4em;
				font-family: Arial, Helvetica, Verdana, sans-serif;
			}
			h2 {
				font-size: 3em;
				font-family: Arial, Helvetica, Verdana, sans-serif;
			}
			h3 {
				font-size: 2em;
				font-family: Arial, Helvetica, Verdana, sans-serif;
			}
			h4 {
				font-size: 1.6em;
				font-family: Arial, Helvetica, Verdana, sans-serif;
			}
			h5 {
				font-size: 1.4em;
				font-family: Arial, Helvetica, Verdana, sans-serif;
			}
			h6 {
				font-size: 1.4em;
				font-family: Arial, Helvetica, Verdana, sans-serif;
			}
			#navigation {
				font-size: 1em;
				font-family: Arial, Helvetica, Verdana, sans-serif;
				vertical-align: bottom;
			}
			#main-content p {
				font-size: 1em;
				font-family: Arial, Helvetica, Verdana, sans-serif;
			}
			/* Element Styles */
			h1,h2,h3,h4,h5,h6 {
				padding: 5px;
				margin: 8px;
			}
			p {
				padding: 5px;
				margin: 8px;
			}
		</style>
	</head>
	
	<body>
		<div id="header">
			<h1>Main Page Heading</h1>
		</div>
		<ul id="navigation">
			<li class="active"><a href="">Nav Item</a></li>
			<li><a href="">Nav Item</a></li>
			<li><a href="">Nav Item</a></li>
			<li><a href="">Nav Item</a></li>
			<li><a href="">Nav Item</a></li>
			<li><a href="">Nav Item</a></li>
		</ul>
		<div id="main-content">
			<h2>Heading One</h2>
			<p>Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet.</p>
			<h2>Heading Two</h2>
			<p>Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet.</p>
		</div>
		<div id="footer">
			Footer Content
		</div>
	</body>
</html>

This will work in FF, Chrome, Safari, and IE6+. Drop-down functionality will take a little tweaking, particularly for IE6, but that should get you started.

Cheers!

thanks funktifyknow but i want to create like this one :smiley:

http://www.engidea.com/blog/informatica/tab-panel/tab-panel.html

notice at the tab menu in below :D:D

thanks .