Hier mein CSS:
HTML-Code:
/* Karteireiter */
.ce_accessible_tabs {
margin-bottom: 1.5em;
}
.tabs-list {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.tabs-list li {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
background-image: none !important;
}
.tabs-list a {
display: block;
margin: 0 2px 0 0;
padding: 5px 10px;
float: left;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
.tabs-list a:link, .tabs-list a:visited {
background-color: #2476A2;
color: #fff;
text-decoration: none;
}
.tabs-list a:hover, .tabs-list a:focus, .tabs-list a:active {
background-color: #2476A2;
color: #fff;
text-decoration: underline;
outline: 1px dotted #fff;
outline-offset: -4px;
}
.tabs-list .current a {
background-color: #013C66;
color: #fff;
font-weight: bold;
}
.ce_accessible_tabs div.content {
clear: both;
margin-top: -1px;
padding: 10px;
border: 1px solid #2476A2;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
background-color: #fff;
color: #333;
}
.ce_accessible_tabs .current-info, .ce_accessible_tabs .tabhead {
left: -999em;
position: absolute;
}
Man könnte noch mit unterschiedlichen Symbolen für die Reiter-Überschriften arbeiten. Dazu müsste man einfach nur jeweils ein anderes Bild für die verschiedenen Linkzustände einbinden.