You Are Here Home > December 2008

December 2008

Merry Christmas

Merry Christmas everyone :)

Merry Christmas
Comments (0)   Filed under: General   Posted by: Codehead

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
Comments (2)   Filed under: CSS, HTML, Web Design, Web Development   Posted by: Codehead