a: und pseudoklassen - der browser mixt :-?
Tressna
- css
Hallo,
ich habe ein Problem mit der Darstellung meiner Menupunkte. Ich habe einheitlich definierte Links in rot und unterstrichen. Für die Navi wollte ich diese Formatierungen nicht nutzen und habe deshalb a.navi: definiert. Teile dieser Formatierungen werden auch angezeigt. Leider wird jedoch die Unterstreichung von der allgemeinen a: Beschreibung beim mouseover angezeigt obwohl a.navi:hover text-decoration:none hat. Was kann ich ändern??
Ich arbeite auf Firefox 1.0.7. Wer kann mir da weiterhelfen?
Danke für jeden Hinweis.
Viele Grüße und einen schönen Feiertag morgen,
Tressna
Habe den Code vergessen - sorry:
<html>
<head>
<title>test</title>
<style type="text/css">
<!--
a.navi:link, a.navi:visited, a.navi:hover {
display: block;
width: 195px;
font-family: arial, sans-serif;
color: #EAEAEA;
font-size: 11px;
font-weight: bold;
text-decoration: none;
padding-left: 5px;
}
a.clicked {
display: block;
width: 195px;
font-family: arial, sans-serif;
color: #EAEAEA;
font-size: 11px;
font-weight: bold;
text-decoration: none;
padding-left: 5px;
background: #cccccc;
}
a {
text-decoration: none;
color: #111111;
}
a:hover {
text-decoration: underline;
color: #A70D09;
cursor: pointer;
}
-->
</style>
</head>
<body bgcolor="green">
<a href="#test" class="clicked">test</a>
</body>
</html>
hi,
<a href="#test" class="clicked">test</a>
Dieser Link hat überhaupt nicht die Klasse .navi bekommen.
Für a.clicked hast du die text-decoration entfernt - das hindert den Browser aber nicht daran, für die speziellen "Zustände" eines Links (:link, :hover, ...) trotzdem noch seine Default-Formatierung anzuwenden.
Du müsstest also für a.clicked:link & co. ebenfalls noch die gewünschte Formatierung angeben.
Btw: Es ist unsinnig, jeden einzelnen Link in der Navigation mit einer Klasse auszustatten, wenn du doch für alle dort die gleiche Formatierung haben willst. Dann ist es effektiver, mit dem Nachfahrenselektor o.ä. zu arbeiten, siehe http://de.selfhtml.org/navigation/faq.htm#abweichende_verweisfarben
gruß,
wahsaga
danke.
ich habe versucht aus meiner sehr langen Datei die Frage zu selektieren und habe eine falsche Klasse eingesetzt.
Vielleicht helfen direkte Auszüge aus dem Code. Es geht um:
<a href="#cat2" class="navi">News and Events</a>
dazugehöriges css:
a.navi:link, a.navi:visited, a.navi:hover {
display: block;
width: 195px;
font-family: arial, sans-serif;
color: #EAEAEA;
font-size: 11px;
font-weight: bold;
text-decoration: none;
padding-left: 5px;
}
und
a {
text-decoration: none;
color: #111111;
}
a:hover {
text-decoration: underline;
color: #A70D09;
cursor: pointer;
}
Gehe ich mit der mouse über den Link, so wird er unterstrichen dargestellt. Warum?
Das mit den Nachfahrenselektoren werde ich beherzigen. Danke für den Tip.
Tressna
Hi Tressna!
Gehe ich mit der mouse über den Link, so wird er unterstrichen dargestellt. Warum?
Meiner Meinung nach musst du die Reihenfolge beachten. So, wie du es gepostet hast, reagiert der Browser mit einem unterstrichenem Link absolut korrekt.
MfG H☼psel
Hallo Hopsel,
ich dachte a.navi entspricht einer höheren Spezifikation und wird dann interpretiert, wenn die Klasse navi zugewiesen wird....
oder etwas doch nicht?
Hi,
ich dachte a.navi entspricht einer höheren Spezifikation
Spezifität. Ja, tut er.
Cheatah
Hallo ForumsleserInnen,
Gehe ich mit der mouse über den Link, so wird er unterstrichen dargestellt. Warum?
Meiner Meinung nach musst du die Reihenfolge beachten. So, wie du es gepostet hast, reagiert der Browser mit einem unterstrichenem Link absolut korrekt.
nein, die Antwort von Tressna ist völlig korrekt. Sobald es Elemente
gibt, die einer bestimmten Klasse zugeordnet sind, werden die dafür
festgelegten CSS-Definitionen vorrangig zu denen behandelt, die so
noch für das Element festgelegt wurden. Falls eine CSS-Definition
doppelt vorhanden ist, also einmal für element und einmal speziell
für element.class, wird letztere angewendet. Die Reihenfolge der
CSS-Definitionen im Quelltext ist dabei völlig unerheblich.
<html>
<head>
<title>Test</title>
<style type="text/css">
a.navi { text-decoration: none; }
a { text-decoration: line-through; }
</style>
</head>
<body>
<p><a href="#">Link</a></p>
<p><a href="#" class="navi">Link</a></p>
</body>
</html>
Viele Grüße,
Stefan
Hallo Tressna,
Vielleicht helfen direkte Auszüge aus dem Code. Es geht um:
<a href="#cat2" class="navi">News and Events</a>
a.navi:link, a.navi:visited, a.navi:hover {
text-decoration: none;
}a:hover {
text-decoration: underline;
}Gehe ich mit der mouse über den Link, so wird er unterstrichen dargestellt. Warum?
dieses Verhalten ist unter Firefox 1.5.0.3 sowie MSIE 6.0 SP2, als
Betriebssystem verwende ich hier Windows XP, nicht reproduzierbar.
Vermutlich gibt es noch andere Teile in Deinem Quelltext, die für
dieses Problem und dessen Lösung wichtig sind. Kannst Du uns den
Link zu der Seite bzw. einer Testseite geben?
Viele Grüße,
Stefan
Hallo Stefan,
vielen Dank für Deine Antwort. Ja, wahrscheinlich ist eine verwendete JavaScript-Funktion mit an dem Problem beteiligt. Ich würde es auch dringed gerne gelöst wissen, nur habe ich den Code jetzt nicht hier um ihn in voller Länge zu zeigen. Besteht die Möglichkeit auch nächste Woche noch eine mögliche Antwort zu erhalten, oder werden die Beiträge nicht mehr bearbeitet, wenn erst einmal im Archiv?
Soweit danke ich allen Mithelfern!
Tressna
hi,
Besteht die Möglichkeit auch nächste Woche noch eine mögliche Antwort zu erhalten, oder werden die Beiträge nicht mehr bearbeitet, wenn erst einmal im Archiv?
Neu Postings zu archivierten Threads hinzuzufügen, ist nicht möglich.
Du kannst aber natürlich gerne einen neuen Thread aufmachen, sollte dieser hier bis dahin im Archiv verschwunden sein - dann bitte mit Verweis auf diesen archivierten Thread hier, damit die Vorgeschichte nachvollziehbar ist.
Deinen archivierten Thread findest du über die Suchfunktion wieder - über author:Tressna kannst du die Suche ganz einfach auf von dir verfasste Einträge einschränken.
gruß,
wahsaga
Hi,
[...] habe deshalb a.navi: definiert. [...] Leider wird jedoch die Unterstreichung von der allgemeinen a: [...]
bitte trenne Dich davon, Simple Selectors einen Doppelpunkt hinten anzufügen. Dieser ist Teil von Pseudoklassen (und -elementen) und steht _vor_ diesen. ":hover" ist sinnbehaftet, "a:" kein gültiges CSS und absolut nicht aussagekräftig.
[...] Beschreibung beim mouseover angezeigt obwohl a.navi:hover text-decoration:none hat. Was kann ich ändern??
Kein Element des von Dir genannten Codes wird von irgend einem Selektor, der ".navi" enthält, selektiert. Es bleiben die Regeln "a.clicked", "a" (dessen Deklarationen nur bei <a>-Elementen greifen können, die nicht als "clicked" klassifiziert wurden, da jene Regel eine höhere Spezifität besitzt und die Werte somit überschreibt) und "a:hover", die aufgrund ihrer späteren Position im Code und gleicher Spezifität die Werte aus "a.clicked" ggf. überschreibt.
Cheatah
Moin!
Es bleiben die Regeln "a.clicked", "a" (dessen Deklarationen nur bei <a>-Elementen greifen können, die nicht als "clicked" klassifiziert wurden, da jene Regel eine höhere Spezifität besitzt und die Werte somit überschreibt) und "a:hover"
Die Spezifität regelt nicht den AUSSCHLUSS einer CSS-Regel, sondern die WIRKSAMKEITSREIHENFOLGE.
Die Formatierungen von "a" gelten natürlich auch - werden aber von Regeln, die spezifischer sind, überschrieben.
Formatierte z.B. nur "a" die Schrift fett, und alle spezifischeren Regeln ändern an der font-weight nichts, dann werden alle a-Elemente fett dargestellt.
- Sven Rautenberg
Hi,
Es bleiben die Regeln "a.clicked", "a" (dessen Deklarationen nur bei <a>-Elementen greifen können, die nicht als "clicked" klassifiziert wurden, da jene Regel eine höhere Spezifität besitzt und die Werte somit überschreibt) und "a:hover"
Die Spezifität regelt nicht den AUSSCHLUSS einer CSS-Regel, sondern die WIRKSAMKEITSREIHENFOLGE.
Die Formatierungen von "a" gelten natürlich auch - werden aber von Regeln, die spezifischer sind, überschrieben.
ja, selbstverständlich. Nur enthält die Regel für "a" hier ausschließlich Eigenschaften, die auch in "a.clicked" gesetzt werden. Daher auch die Wortwahl "überschreiben".
Cheatah