Please, have a look at this webpage which makes use of tabs with java-script.
http://www.maltanaturetours.com/comments.php#

The colours, borders and layout is all based on css





Code CSS:
<style>
#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;
width: 80px;
border-bottom: 0px;
}
 
#Tabs ul li a {
position: relative;
margin-top: 16px;
display: block;
margin-left: 6px;
line-height: 24px;
padding-left: 10px;
background: #DFF161;
z-index: 9999;
border: 2px solid #ccc;
 
-moz-border-radius-topleft: 6px;
border-top-left-radius: 6px;
-moz-border-radius-topright: 6px;
border-top-right-radius: 6px;
 
width: 130px;
color: #000000;
text-decoration: none;
font-weight: bold;
}
 
#Tabs ul li a:hover {
text-decoration: underline;
background-color: #FFFFFF;
border-bottom: none;
}
 
#Tabs ul li a:selected { color: #000; background-color: #f1f0ee; font-weight: bold; }
 
 
 
#Tabs #Content_Area { // this is the css class for the content displayed in each tab
padding: 15px;
margin: 24px;
clear:both;
line-height:19px;
position: relative;
top: 20px;
z-index: 5;
width: 800px;
height: 800px;
overflow:auto;
border: 2px solid #ccc;
border-top: 0px;
display:block}
 
</style>


I want to achieve the following layout effects:

1) I would like the width of tabs are either set individually (not all equally spaced) or have a width according to the text they have, so as for instance the years 2007-2012 have a smaller width while the first tab is wider, therefore all text is visible.

When the tab is hovered, the botom-border goes away (but only part of it goes away). Can't figure out the problem.

I would like that when a tab is clicked, the background colour changes (even if mouse is not over) so as to show which tab is being read. I tried with a:selected but without success.

These are the main problems; hope I can find your kind help for a solution

Thanks

Stepen