Für 2 "Tabs" die HG Farbe ändern

Status
Nicht offen für weitere Antworten.
S

ShishaLiVe

Mitglied
Hallo leute möchte gerne für die 2 Letzten Tabs die hintergrund Farbe und ggf die schrift farbe ändern wie währe das möglich?

Hier mein Code


HTML: 
               <style type="text/css">
<!--
    body {
        margin:0;
        padding:0;
        font: bold 11px/1.5em Verdana;
}

h2 {
        font: bold 14px Verdana, Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0px;
        padding: 0px 0px 0px 15px;
}

img {
border: none;
}

/*- Menu Tabs 4--------------------------- */

    #tabs4 {
      float:left;
      width:100%;
      font-size:93%;
      line-height:normal;
          border-bottom:1px solid #6B78A9;
      }
    #tabs4 ul {
          margin:0;
          padding:10px 10px 0 50px;
          list-style:none;
      }
    #tabs4 li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabs4 a {
      float:left;
      background:url("tableft4.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 7px;
      text-decoration:none;
      }
    #tabs4 a span {
      float:left;
      display:block;
      background:url("tabright4.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#6B78A9;
      }
    #tabs4 a span {float:none;}
    #tabs4 a:hover span {
      color:#6B78A9;
      }
    #tabs4 a:hover {
      background-position:0% -42px;
      }
    #tabs4 a:hover span {
      background-position:100% -42px;
      }

      #tabs4 #current a {
              background-position:0% -42px;
      }
      #tabs4 #current a span {
              background-position:100% -42px;
      }
-->
</style>
        </head>

        <body>
                <h2>Tab Menu 4</h2>
                <div id="tabs4">
                        <ul>
                                <!-- CSS Tabs -->
<li><a href="#"><span>Profil</span></a></li>
<li><a href="#"><span>Shisha Profil</span></a></li>
<li><a href="#"><span>Foto Album (234)</span></a></li>
<li><a href="#"><span>Gästebuch (4)</span></a></li>
<li id="current"><a href="#"><span>Profil ändern</span></a></li>
<li><a href="#"><span>Administration</span></a></li>
<li><a href="#"><span>Mitglied Sperren</span></a></li>

                        </ul>
                </div>
        </body>
</html>



MFG
LiVw
 
Hi,

hierfür musst du den CSS-Code der Tabmenü-Vorlage #4 erweitern, indem du den letzten beiden Tabs bei unterschiedlichen Hintergrund- und Schriftfarben einen jeweiligen ID-Bezeichner, oder bei einer gemeinsamen Hintergrund-/Schriftfarbe einen Klassen-Bezeichner zuordnest, um über ihn die gewünschten Farben zu definieren.

Da sich der Tab-Hintergrund aber über zwei Grafiken zusammensetzt, muss die Änderung bzw. Erweiterung auch mit den entsprechenden Grafken umgesetzt werden.
 
Das dürfte sich in dieser Vorlage schwierig gestalten, da sich die Tabs mit abgerundeten Ecken präsentieren, die, wie auch die Hintergrundfarbe, mittels zweier Grafiken erzeugt werden:


Wenn du aber ein Tab-Menü mit abgerundeten Ecken und individuellen Hintergrundfarben verwenden möchtest, das keine Grafiken benötigt, dürfte für dich Stu Nicholls' Beispiel More snazzy border menus recht interessant sein.
 
Genau so, wie ich es heute Morgen schon umschrieben hatte.

In diesem Beispiel erhält jedes Tab seine individuelle Schriftfarbe:

Code: 
<div id="tabs4">
  <ul>
      <li><a href="#" id="profil"><span>Profil</span></a></li>
      <li><a href="#" id="shisha_profil"><span>Shisha Profil</span></a></li>
      <li><a href="#" id="album"><span>Foto Album (234)</span></a></li>
      <li><a href="#" id="guestbook"><span>Gästebuch (4)</span></a></li>
      <li id="current"><a href="#" id="edit_profil"><span>Profil ändern</span></a></li>
      <li><a href="#" id="admin"><span>Administration</span></a></li>
      <li><a href="#" id="disqualify_user"><span>Mitglied Sperren</span></a></li>
  </ul>
</div>
Code: 
#tabs4 a span {
      float:left;
      display:block;
      background:url("tabright4.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      /*color:#6B78A9;*/ /* auskommentiert = deaktiviert */
      }

#tabs4 a#profil span {
    color:#000000;
    }
#tabs4 a#shisha_profil span {
    color:#007F00;
    }
#tabs4 a#album span {
    color:#0000FF;
    }
#tabs4 a#guestbook span {
    color:#5F5F5F;
    }
#tabs4 a#edit_profil span {
    color:#FFBF00;
    }
#tabs4 a#admin span {
    color:#00E0FF;
    }
#tabs4 a#disqualify_user span {
    color:#FF0000;
    }
Wenn für mehrere Tabs dieselbe Schriftfarbe gelten soll, lassen sich die ID-Bezeichner durch einen Klassen-Bezeichner ersetzen.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück