cstricklen
08-24-2006, 04:41 PM
DD Color Tabs II
http://www.dynamicdrive.com/style/csslibrary/item/dd-color-tabs-ii/
I have decided my page looks better when these tabs are squared off, but I still need to figure out why I can't make them rounded as the images should make them. My page background is brown; the corners of the tabs appear white.
Thanks for your help! Here's the code:
<style type="text/css">
#invertedtabs{
margin-left: 4px
padding: 0;
width: 760px;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
#invertedtabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin:0;
margin-bottom: 1em; /*margin between menu and rest of content*/
padding:0;
list-style:none;
}
#invertedtabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:none;
line-height: 1.5em;
}
#invertedtabs a{
float:left;
color: white;
background: #005500 url(color_tabs_left2.gif) no-repeat left bottom;
margin:0 2px 0 0;
padding:0 0 0 3px;
text-decoration:none;
letter-spacing: 1px;
}
#invertedtabs a span{
float:left;
display:block;
background: transparent url(color_tabs_right2.gif) no-repeat right bottom;
padding:3px 9px 3px 6px;
}
#invertedtabs a span{
float:none;
}
#invertedtabs a:hover{
background-color: #998659;
}
#invertedtabs a:hover span{
background-color: #007000;
}
#invertedtabs #current a, #invertedtabs #current span{ /*currently selected tab*/
background-color: #007000;
}
#invertedtabsline{
clear: both;
padding: 0;
width: 760px;
height: 8px;
line-height: 8px;
background: #005500;
border-bottom: 1px solid #C0B395; /*Remove this to remove border between bar and tabs*/
}
</style>
http://www.dynamicdrive.com/style/csslibrary/item/dd-color-tabs-ii/
I have decided my page looks better when these tabs are squared off, but I still need to figure out why I can't make them rounded as the images should make them. My page background is brown; the corners of the tabs appear white.
Thanks for your help! Here's the code:
<style type="text/css">
#invertedtabs{
margin-left: 4px
padding: 0;
width: 760px;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
#invertedtabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin:0;
margin-bottom: 1em; /*margin between menu and rest of content*/
padding:0;
list-style:none;
}
#invertedtabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:none;
line-height: 1.5em;
}
#invertedtabs a{
float:left;
color: white;
background: #005500 url(color_tabs_left2.gif) no-repeat left bottom;
margin:0 2px 0 0;
padding:0 0 0 3px;
text-decoration:none;
letter-spacing: 1px;
}
#invertedtabs a span{
float:left;
display:block;
background: transparent url(color_tabs_right2.gif) no-repeat right bottom;
padding:3px 9px 3px 6px;
}
#invertedtabs a span{
float:none;
}
#invertedtabs a:hover{
background-color: #998659;
}
#invertedtabs a:hover span{
background-color: #007000;
}
#invertedtabs #current a, #invertedtabs #current span{ /*currently selected tab*/
background-color: #007000;
}
#invertedtabsline{
clear: both;
padding: 0;
width: 760px;
height: 8px;
line-height: 8px;
background: #005500;
border-bottom: 1px solid #C0B395; /*Remove this to remove border between bar and tabs*/
}
</style>