I found this code for the site I'm working on (www.sovietposters.tk).
It does exactly what I want but I can't figure out how to change the
color of the tabs. Anyone any suggestions?
John
<style type="text/css">
body {
font: 100% verdana, arial, sans-serif;
background-color: #0080ff;
margin: 5px;
}
ul#tabnav {
font: bold 10px verdana, arial, sans-serif;
list-style-type: none;
padding-bottom: 24px;
border-bottom: 1px solid #6c6;
margin: 0;
}
ul#tabnav li {
float: left;
height: 21px;
background-color: #cfc;
margin: 2px 2px 0 2px;
border: 1px solid #6c6;
}
body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3 {
border-bottom: 1px solid #fff;
background-color: #fff;
}
body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a {
color: #000;
}
#tabnav a {
float: left;
display: block;
color: #666;
text-decoration: none;
padding: 4px;
}
#tabnav a:hover {
background: #fff;
}
</style>
</head>
<body id="tab2">
<ul id="tabnav">
<li class="tab1"><a href="#" onMouseOver="wi ndow.status='Cl ick here
for posters with portrait orientation'; return true;"
onMouseOut="win dow.status=''; return true;">Posters with portrait
orientation</a></li>
<li class="tab2"><a href="" onMouseOver="wi ndow.status='Po sters with
landscape orientation'; return true;" onMouseOut="win dow.status='';
return true;">Posters with landscape orientation</a></li>
<li class="tab3"><a href="" onMouseOver="wi ndow.status='Cl ick here
for poster of the month'; return true;" onMouseOut="win dow.status='';
return true;">Poster of the month</a></li>
</ul>
