jörg kolla: Problem mit Vererbung

Guten Abend,

in meiner zentralen CSS Datei steht folgende Hauptmenüdefinition:

#main_navi {
 display:block;
 color:#ffffff;
 line-height:18pt;
}

#main_navi a:link{ color:#ffffff; text-decoration:none; }
#main_navi a:visited{ color:#ffffff; text-decoration:none; }
#main_navi a:hover{  color:#323232; text-decoration:none; }

#sub_navi {
 position:relative;
 left:20px;
 top:0px;
 line-height:13pt;
}

#sub_navi a:link{text-decoration:none;}
#sub_navi a:visited{text-decoration:none;}
#sub_navi a:hover{ text-decoration:none;}

Auf den jeweilgen PHP Seiten steht dann noch

<style type="text/css">
a.navi_aktuell:hover {background-color:#F8E6A2;}
a.subnavi_aktuell:hover {color:#F8E6A2;}

[...]
</style>

Für versch. Menü und Untermenüpunkte, gibt es also unterschiedl. Farben. Beim Hauptmenü klappt alles wunderbar, nur die Farben beim Untermenü kommen nicht an, weil sie immer durch die des Hauptmenüs wieder überschrieben werden. Der Aufruf sieht so aus:

<div id="main_navi">
  <a href="/content/aktuell/index.php" class="navi_aktuell">Aktuell</a>
  <div id="sub_navi">
    <a href="index.php&#063;ref=aaa" class="subnavi_aktuell">AAA</a>
  </div>
</div>

Nur wenn ich jetzt mit der Maus über einen UNTERmenüpunkt gehe, wird die Schriftfarbe des HAUPTmenüs verwendet. Weiß jemand warum und kanns mir erklären?

Danke schonmal
jk

  1. Hallo jk,

    Auf den jeweilgen PHP Seiten steht dann noch

    <style type="text/css">
    a.navi_aktuell:hover {background-color:#F8E6A2;}
    a.subnavi_aktuell:hover {color:#F8E6A2;}

    [...]
    </style>

    Sind die "jeweiligen" Seiten die in den Untermenüpunkten verlinkten Seiten?

    Der Aufruf sieht so aus:

    <div id="main_navi">
      <a href="/content/aktuell/index.php" class="navi_aktuell">Aktuell</a>
      <div id="sub_navi">
        <a href="index.php&#063;ref=aaa" class="subnavi_aktuell">AAA</a>
      </div>
    </div>

    Der Link mit der class="subnavi_aktuell" steht aber ja in der übergeordneten Seite, in der das Menü sitzt - dort ist diese Klasse nicht bekannt...

    (Oder hab ich dich falsch verstanden?)

    Gute Nacht
    ottogal

    1. Hallo ottogal,
      ich habe quasi erstmal nur 2 Dateien. Eine CSS und eine PHP Datei. Alles unterhalb von "Auf den jeweilgen PHP Seiten steht dann noch..." steht in derselben PHP Datei.

      Danke für Deine Mühe!!

      Gruß, jk

  2. Hi,

    #main_navi a:hover{  color:#323232; text-decoration:none; }
    #sub_navi a:hover{ text-decoration:none;}
    a.subnavi_aktuell:hover {color:#F8E6A2;}

    <div id="main_navi">
      <div id="sub_navi">
        <a href="index.php&#063;ref=aaa" class="subnavi_aktuell">AAA</a>

    Alle 3 Selektoren treffen auf diesen Link zu.
    Der mittlere betrifft nur die text-decoration, ist also für die Schriftfarbe irrelevant.

    Bleiben noch

    #main_navi a:hover{  color:#323232; text-decoration:none; }
    a.subnavi_aktuell:hover {color:#F8E6A2;}

    #main_navi a:hover hat Specificity 0-1-1-1 (kein style-Attribut, 1 id, 1 Attribut, 1 Elementname) bzw. 111.
    a.subnavi_aktuell:hover hat Specificity 0-0-2-1 (kein style-Attribut, keine id, 2 Attribute, 1 Elementname) bzw. 21.

    111 ist höher als 21, also gewinnt logischerweise #main_navi a:hover{  color:#323232; /*...*/}, soweit es die color betrifft.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Hallo

      #main_navi a:hover hat Specificity 0-1-1-1 (kein style-Attribut, 1 id, 1 Attribut, 1 Elementname) bzw. 111.
      a.subnavi_aktuell:hover hat Specificity 0-0-2-1 (kein style-Attribut, keine id, 2 Attribute, 1 Elementname) bzw. 21.

      111 ist höher als 21, also gewinnt logischerweise #main_navi a:hover{  color:#323232; /*...*/}, soweit es die color betrifft.

      oha, das ist mir jetzt komplett neu. Ich dachte immer, das zuletzt auftauchende überschreibt alle vorhergehenden. DAs mit der Specificity hab ich noch nie gehört, klingt aber logisch. Werd ich mir mal ansehen.

      Hast Du einen Vorschlag, wie ich das erreichen kann, was ich vorhab?

      Danke vielmals, jk

      1. Hallo,

        also ich benutze fast nie !important - man kann auch alternativ folgendes angeben:

        DIV.main_navi DIV.sub_navi a.subnavi_aktuell {
           color:graesslichgruen;
        }

        Gruß,
        Manu

        --
        Deutschland ist einfach von einer Diktatur der Nationalsozialisten zu einer Diktatur der Gutmenschen übergegangen.
        1. Sollte natürlich so aussehen:

          DIV#main_navi DIV#sub_navi A.subnavi_aktuell {
             color:graesslichgruen;
          }

          Gruß,
          Manu

          --
          Deutschland ist einfach von einer Diktatur der Nationalsozialisten zu einer Diktatur der Gutmenschen übergegangen.
  3. Hello out there!

    Nur wenn ich jetzt mit der Maus über einen UNTERmenüpunkt gehe, wird die Schriftfarbe des HAUPTmenüs verwendet. Weiß jemand warum

    Wegen der <http://de.selfhtml.org/css/formate/kaskade.htm#spezifitaet@title=Spezifität der Selektoren>.

    See ya up the road,
    Gunnar

    --
    „Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ (Kirsten Evers)
    1. Hello out there!

      Nur wenn ich jetzt mit der Maus über einen UNTERmenüpunkt gehe, wird die Schriftfarbe des HAUPTmenüs verwendet. Weiß jemand warum

      Wegen der <http://de.selfhtml.org/css/formate/kaskade.htm#spezifitaet@title=Spezifität der Selektoren>.

      hey, danke für den link. Jetzt bin ich schon wieder etwas schlauer. Ich hab nun ein "!important" an entspr. Stelle angehängt uns es funktioniert :-)

      Oder ist diese Lösung "verpöhnt"?

      gute nacht und danke
      jk