Problem mit Vererbung
jörg kolla
- css
0 ottogal0 MudGuard0 Gunnar Bittersmann
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?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
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?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
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
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?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
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
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
Sollte natürlich so aussehen:
DIV#main_navi DIV#sub_navi A.subnavi_aktuell {
color:graesslichgruen;
}
Gruß,
Manu
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
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