Tabmenu mit CSS versaut?

[tayt]

Hallo,

erstmal toll, dass es diese Forum gibt, da ich sonst im nichts lande


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:

hier mal der .CSS 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:

<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>

 

[anna55]

Ich habe ein Tabmenu erstellt, jedoch sin dort Fehler

Nicht nur dort!

Ohne so richtig Bescheid zu wissen, wie Du's eigentlich haben möchtest, eine kleine Online-Beispiel-Seite wäre besser, habe ich einen Vorschlag

#TabbedPanelsTabSelected a {
      float:right;
      background:url("../images/tableftI.gif") no-repeat left top;
      padding:0 0 0 6px;
      text-decoration:none;
      margin:-1px 120px 0 0;
      background-position:0% -42px;
      border-bottom:  1px solid #ff0000;
      }

 

[tayt]

Sorry,

aber so ist es auch nciht wirklich richtig...

Ich habe mal mit Paint das Bild so ebarbeitet, wie ich es gerne hätte:

LG,
Robert...

PS: Vlt. hast du mich jetzt verstanden?

 

[tayt]

Hallo,

habe es hinbekommen... ahbe deinen Code einfach durch das heir ersetzt:

    #TabbedPanelsTabSelected a {
      float:right;
      background:url("../images/tableftI.gif") no-repeat left top;
      padding:0 0 0 6px;
      text-decoration:none;
      margin:-1px 10px -1px;
      background-position:0% -42px;
      border-bottom:  1px solid #34B7DD;
      }

Vielen vielen Danke

LG,
Robert W.

 

[Duke79]

Nur so zur Info, falls noch jemand Probleme mit Tabs hat, gibt es hier einen nettes, kleines Tutorial, wie man es ohne Fehler in allen Browsern hin bekommt:

A List Apart: Articles: Sliding Doors of CSS


Man muss ja das Rad nicht ständig neu erfinden ;-)