You Are Here Home > CSS Tabs

CSS Tabs

I was looking for a nice and simple CSS tabs implementation and came across:
http://htmldog.com/articles/tabs/

While this was a nice solution, it didn’t support padding the tabs and when you did it didn’t look right in all the browsers so I had to modify it to this:

HTML side:

<div id="tab-nav">
   <ul>
      <li id="selected"><a href="#">1st tab</a></li>
      <li><a href="#">2nd tab</a></li>
      <li><a href="#">3rd tab</a></li>
   </ul>
</div>
<div id="page-content">
   Some content
</div>

CSS side:

#tab-nav {
	border:1px solid #FFFFFF; /* Stupid IE7 */
}
#tab-nav ul {
	list-style-type:none;
	padding:0px;
	margin:0px;
}
#tab-nav li {
	float:left;
	border: solid;
	border-width:1px 1px 0px 1px;
	border-color:#666666;
	margin:0px 0px 0px 10px;
	background-color:#c9cde2;
}
#tab-nav a {
	text-decoration:none;
	padding:7px 10px 7px 10px;
	color:#333333;
	display:block;
}
#page-content {
	border:1px solid;
	border-color:#666666 #CCCCCC #CCCCCC #CCCCCC;
	border-width:1px 2px 2px 1px;
	clear:both;
	padding:10px;
}
#tab-nav #selected {
	position:relative;
	top:1px;
	background-color:#FFFFFF;
}

And here is how this looks like:

Some content
CSS Tabs
Filed under: CSS,HTML,Web Design,Web Development   Posted by: Hamid

2 Comments »

  1. Ajay D'Souza:
     

    I prefer using tabber for this purpose which is a JavaScript that allows you to easily add the tabs

    Comment

     
  2. Codehead:
     

    For a project that I was working on, we found that CSS tabs worked better for us, for JavaScript tabs, there is also jQuery tabs from jQuery UI which I like the best.

    Comment

     

RSS feed for comments on this post. TrackBack URL

Leave a comment