Hallo,
erstmal toll, dass es diese Forum gibt, da ich sonst im nichts lande :P
also ich habe da folgendes Problem:
Ich habe ein Tabmenu erstellt, jedoch sin dort Fehler (Ich ahbe im jeweiligen Tab einen HG)
Fehler: Ich ahbe das so gemacht, dass der Tab, der aktiv ist, über die Border geht, damit er den gleichen HG wie der Hintergrund vom "unteren Teil" hat. ABER wenn ich einen border-color mache (bottom) zieht sich der Border rüber bis hin zum anderen Button, und "zerstört" ihn ein wenig.
Hier mal ein Bild:
[Blockierte Grafik: http://img381.imageshack.us/img381/1231/vergtabgj4.png]
hier mal der .CSS Code:
Code
#TabbedPanelsTabGroup {
float:right;
width:100%;
font-size:93%;
line-height:normal;
}
#TabbedPanelsTabGroup ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#TabbedPanelsTab li {
display:inline;
margin:0;
padding:0;
}
#TabbedPanelsTab a {
float:right;
background:url("../images/tableftI.gif") no-repeat left top;
margin:0;
padding:0px 0px 0px 6px;
text-decoration:none;
margin:-1px;
border-bottom: 1px solid #000;
}
#TabbedPanelsTab a span {
float:right;
display:block;
background:url("../images/tabrightI.gif") no-repeat right top;
padding:0px 15px 2px 6px;
color:#666;
margin:-1px;
border-bottom: 1px solid #000;
}
#TabbedPanelsTab a span {float:none;}
#TabbedPanelsTab a:hover span {
color:#000;
}
#TabbedPanelsTab a:hover {
background-position:0% -42px;
}
#TabbedPanelsTab a:hover span {
background-position:100% -42px;
}
#TabbedPanelsTabSelected li {
display:inline;
margin:0;
padding:0;
}
#TabbedPanelsTabSelected a {
float:right;
background:url("../images/tableftI.gif") no-repeat left top;
margin:0;
padding:0px 250px 0px 6px;
text-decoration:none;
margin:-1px;
background-position:0% -42px;
border-bottom: 1px solid #ff0000;
}
#TabbedPanelsTabSelected a span {
float:right;
display:block;
background:url("../images/tabrightI.gif") no-repeat right top;
padding:0px 15px 2px 6px;
color:#666;
margin:-1px;
background-position:100% -42px;
border-bottom: 1px solid #ff0000;
}
#TabbedPanelsTabSelected a span {float:none;}
#TabbedPanelsTabSelected a:hover span {
color:#000;
}
.TabbedPanelsContentGroup {
clear: both;
color: #ffffff;
border-left: solid 1px #000000;
border-bottom: solid 1px #000000;
border-top: solid 1px #000000;
border-right: solid 1px #000000;
background: #34B7DD;
}Und hier mal die Html:
Code
<div id="TabbedPanelsTabGroup">
<ul>
<li id="TabbedPanelsTab"><a href="#" title="Link 1"><span>not_active</span></a></li>
<li id="TabbedPanelsTabSelected"><a href="#" title="Link 1"><span>active</span></a></li>
</ul>
</div>
<div class="TabbedPanelsContentGroup">
<div>
<table align="center" style="width:100%; border:0px" >
<tr>
<td height="75px"><div align="center"><img src="./images/logo.gif" /></div></td>
</tr>
</table>
</div></div>