Vererbung in Verbindung mit Pseudoformaten
0 0 0 0 0 0 0 
Der Martin
0
Vererbung in Verbindung mit Pseudoformaten
Hallo,
ich habe noch ein Verständnisproblem im Zusammenhang mit Pseudoformaten und Vererbung von Eigenschaften.
Ich möchte ein Individualformat "#Button" definieren, das bestimmte Eigenschaften hat (Schrift-, Hintergrundfarbe).
Kinderelemente des Elementes mit der id "Button" möchte ich per Javascript (Eventhandler) verändern.
Dabei sollen die zuvor definieren Pseudoformate ":hover" usw. nicht greifen.
Hört sich recht kompliziert an, ist es aber eigentlich nicht wie das folgende Beispiel (hoffentlich) veranschaulicht:
(css-test.html)
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS-Test</title>
<style type="text/css">
a, a:active, a:visited {
color:red;
}
a:hover {
color:white;
background-color:red;
}
ul#Button {
padding: 0;
text-align: center;
vertical-align:middle;
line-height:35px;
}
ul#Button li {
list-style: none;
display: inline;
margin: 0;
padding: 0;
}
ul#Button a, ul#Button span {
float: left;
width: 125px;
height: 39px;
margin: 0;
padding: 0;
text-decoration: none;
font-weight: bold;
}
ul#Button a:visited {
}
.buttonOff {
color:green;
background-color: yellow;
}
.buttonOn {
color:yellow;
background-color: green;
}
</style>
<script type="text/javascript">
function turnButtonOn(aElement) {
aElement.className = "buttonOn";
}
function turnButtonOff(aElement) {
aElement.className = "buttonOff";
}
</script>
</head>
<body>
<ul id="Button">
<li>
<a href="css-test.html" class="buttonOff"
onmouseover="javascript:turnButtonOn(this);"
onmouseout="javascript:turnButtonOff(this);">
Punkt 1</a>
</li>
<li>
<a href="punkt2.html" class="buttonOff"
onmouseover="javascript:turnButtonOn(this);"
onmouseout="javascript:turnButtonOff(this);">
Punkt 2</a>
</li>
<li>
<a href="punkt3.html" class="buttonOff"
onmouseover="javascript:turnButtonOn(this);"
onmouseout="javascript:turnButtonOff(this);">
Punkt 3</a>
</li>
<li>
<a href="punkt4.html" class="buttonOff"
onmouseover="javascript:turnButtonOn(this);"
onmouseout="javascript:turnButtonOff(this);">
Punkt 4</a>
</li>
</ul>
</body>
</html>
Was mache ich falsch bzw. wo ist mein Denkfehler?
Vielen Dank und viele Grüße
Daniel :-)
-
Hi,
ich habe noch ein Verständnisproblem im Zusammenhang mit Pseudoformaten und Vererbung von Eigenschaften.
mir ist leider nicht klar, um welches Verständnisproblem es sich hierbei handelt.
Kinderelemente des Elementes mit der id "Button" möchte ich per Javascript (Eventhandler) verändern.
Warum? Das lässt sich mit purem CSS lösen. Selbst der IE schafft das.
<?xml version="1.0" encoding="ISO-8859-1"?>
Dir ist klar, dass der IE hierdurch in den Quirks-Mode wechselt?
onmouseover="javascript:turnButtonOn(this);"
Wozu dient Deiner Meinung nach hier das "javascript:"? Event-Handler erwarten (lies: erlauben) keine URL, und Labels sind nicht Teil des Basis-JavaScript-Sprachumfangs. Im Zweifel ist dies also ungültiges JavaScript.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi Cheatah,
mir ist leider nicht klar, um welches Verständnisproblem es sich hierbei handelt.
Ich möchte, dass die Style-Definition für <a> nicht in <a>-Elementen innerhalb der <ul> mit der id "Button" angewendet werden.
Ein explizites Überschreiben für <a>-Elemente innerhalb von <ul> ist für mich nicht die mögliche Lösung (in dem kleinen Beispiel würde das natürlich gehen...).
Ich möchte im Prinzip erreichen, dass a:hover etc. innerhalb der <ul> mit der id "Button" ignoriert wird.Warum? Das lässt sich mit purem CSS lösen. Selbst der IE schafft das.
Ich möchte noch etwas mehr in dem entsprechenden Skript machen.
<?xml version="1.0" encoding="ISO-8859-1"?>»»
Dir ist klar, dass der IE hierdurch in den Quirks-Mode wechselt?Ne, war mir nicht klar. Was genau ist denn falsch?
Wozu dient Deiner Meinung nach hier das "javascript:"? Event-Handler erwarten (lies: erlauben) keine URL, und Labels sind nicht Teil des Basis-JavaScript-Sprachumfangs. Im Zweifel ist dies also ungültiges JavaScript.
War ein copy/paste-Fehler, ist korrigiert ;-)
Daniel
-
Hi,
Ein explizites Überschreiben für <a>-Elemente innerhalb von <ul> ist für mich nicht die mögliche Lösung (in dem kleinen Beispiel würde das natürlich gehen...).
genau. Und da Javascript deaktiviert sein kann, solltest Du das, was über CSS geht, auch über CSS realisieren.
Ich möchte noch etwas mehr in dem entsprechenden Skript machen.
Dann sag' uns doch was? Denn sich über :hover Gedanken zu machen, ist müßig.
freundliche Grüße
Ingo-
Hi,
genau. Und da Javascript deaktiviert sein kann, solltest Du das, was über CSS geht, auch über CSS realisieren.
Das mache ich natürlich. Und das ganze funktioniert im Prinzip auch ohne Javascript, mit Javascript gibt es nur noch etwas mehr Komfort...
Ich möchte noch etwas mehr in dem entsprechenden Skript machen.
Dann sag' uns doch was? Denn sich über :hover Gedanken zu machen, ist müßig.Im "onMousover" benötige ich eine Fallunterscheidung, daher ist mein Vorhaben mit :hover nicht realisierbar.
Ich möchte erreichen, dass in "ul#Button a:visited" nicht die Eigenschaften von "a:visited" geerbt werden.
Ist das möglich?Ansonsten muß ich wohl die Definitionen für <a> innerhalb von <p>/<table> usw. definieren und nicht so zentral wie im Beispiel.
Viele Grüße
Daniel :-)-
Hi,
Ich möchte erreichen, dass in "ul#Button a:visited" nicht die Eigenschaften von "a:visited" geerbt werden.
Ist das möglich?nein. Eigenschaften werden zwischen Elementen vererbt, nicht zwischen Selektoren. Und jedes Element verfügt zu jedem Zeitpunkt über jede Eigenschaft - welchen Wert sollte ein Browser der Eigenschaft in dem Element also zuweisen?
Ansonsten muß ich wohl die Definitionen für <a> innerhalb von <p>/<table> usw. definieren und nicht so zentral wie im Beispiel.
Nein, Du musst die Werte überschreiben.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes -
Hi,
Im "onMousover" benötige ich eine Fallunterscheidung, daher ist mein Vorhaben mit :hover nicht realisierbar.
welche Fallunterscheidung? Wenn Du damit:
Ich möchte erreichen, dass in "ul#Button a:visited" nicht die Eigenschaften von "a:visited" geerbt werden.
meinst, auch dazu benötigst Du kein Javascript, sobald Du den Unterschied zwischen Vererbung und Anwendung (Überschreibung) von Selektoren verstanden hast.
freundliche Grüße
Ingo-
Hi,
...
meinst, auch dazu benötigst Du kein Javascript, sobald Du den Unterschied zwischen Vererbung und Anwendung (Überschreibung) von Selektoren verstanden hast.
Ne, die Unterscheidung meine ich nicht. Ich muß bei "onMouseover" in einer Javascript-Funktion etwas prüfen...
Daniel :-)
-
-
-
-
Hi,
Ich möchte, dass die Style-Definition für <a> nicht in <a>-Elementen innerhalb der <ul> mit der id "Button" angewendet werden.
"nicht anwenden" gibt es in CSS nicht. Du sagst über die Selektoren, auf welche Elemente Du eine Regel angewendet haben möchtest. Die CSS/3.0-Pseudoklasse :not() tut hieran keinen Abbruch.
Ein explizites Überschreiben für <a>-Elemente innerhalb von <ul> ist für mich nicht die mögliche Lösung (in dem kleinen Beispiel würde das natürlich gehen...).
Ich möchte im Prinzip erreichen, dass a:hover etc. innerhalb der <ul> mit der id "Button" ignoriert wird.Also ist ein explizites Überschreiben der <a>-Elemente innerhal des <ul> mit der id "Button" gewünscht.
<?xml version="1.0" encoding="ISO-8859-1"?>
Dir ist klar, dass der IE hierdurch in den Quirks-Mode wechselt?
Ne, war mir nicht klar. Was genau ist denn falsch?Am Code ist nichts falsch, sondern am IE. Er erwartet den DOCTYPE in der ersten (nicht leeren) Zeile des Dokuments.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi,
<?xml version="1.0" encoding="ISO-8859-1"?>
Dir ist klar, dass der IE hierdurch in den Quirks-Mode wechselt?
Am Code ist nichts falsch, sondern am IE. Er erwartet den DOCTYPE in der ersten (nicht leeren) Zeile des Dokuments.Sowohl mein Internet-Explorer (6) als auch mein Firefox melden als Darstellungsmodus "CSS1Compat".
Hier scheint also mein IE richtig zu funktionien!?Daniel
-
Hi,
<?xml version="1.0" encoding="ISO-8859-1"?>
Sowohl mein Internet-Explorer (6) als auch mein Firefox melden als Darstellungsmodus "CSS1Compat".
Hier scheint also mein IE richtig zu funktionien!?für seine Verhältnisse eher falsch ;-) Nein, mich wundert, dass er trotz <?xml?>-Prolog den Quirks-Mode verlässt. Mir ist neu, dass er das täte.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi,
Nein, mich wundert, dass er trotz <?xml?>-Prolog den Quirks-Mode verlässt. Mir ist neu, dass er das täte.
mich auch. Wenn dies tatsächlich so wäre (d.h. daß irgend ein neues Software-Update dies bewirkt), dann wäre der xml-Prolog kaum noch einsetzbar.
freundliche Grüße
Ingo
-
-
Hallo Daniel,
Sowohl mein Internet-Explorer (6) als auch mein Firefox melden als Darstellungsmodus "CSS1Compat".
Wo kriegst du denn beim Internet Explorer diese Information her? Ich kenne zwar grob den Unterschied zwischen Quirks und Standards Compliant Mode, mir ist aber noch keine Stelle aufgefallen, wo ich den gewählten Modus für die angezeigte Seite ablesen kann.
Ein kleiner Wink mit dem Zaunpfahl könnte mir helfen...
Martin
-
Hallo Der,
Wo kriegst du denn beim Internet Explorer diese Information her? […] Ein kleiner Wink mit dem Zaunpfahl könnte mir helfen...
*boing*
javascript:alert(document.compatMode);Tipp: Als Bookmarklet ablegen.
Grüße
Roland-
Hallo Roland,
javascript:alert(document.compatMode);Tipp: Als Bookmarklet ablegen.
Toll, vielen Dank (nein, wirklich).
Ich verbuche diese Info mal unter "akademisch wertvoll, aber praktisch unbrauchbar." Denn im IE habe ich prinzipiell Javascript deaktiviert, und dann kennt er solche Raffinessen natürlich auch nicht.Ich dachte, man könnte das in irgendeinem browsereigenen Menü oder Info-Fenster sehen. Erwartet hätte ich es beispielsweise als Info unter Datei/Eigenschaften.
Nichts für ungut,
Martin
-
-
-
-
-
-
-
hi,
Was mache ich falsch bzw. wo ist mein Denkfehler?
schwer zu sagen, wenn du uns nicht mitteilst, was statt dem von dir erwarteten passiert ...
gibt es fehlermeldungen? schau mal auf http://glasgoogle.de/ nach, wenn du nicht weißt, wie du deinen browser dazu bringst, sie dir anzuzeigen.Dabei sollen die zuvor definieren Pseudoformate ":hover" usw. nicht greifen.
ul#Button a:visited {
}da diese definition einfach nur "nichts" enthält, werden hier natürlich die für "normale" a:hover definierten formatierungen angewandt.
wenn du das nicht möchtest, musst du die unerwünschten eigenschaften innerhalb von ul#Button a:visited { ... } explizit mit anderen werten überschreiben.
<a href="css-test.html" class="buttonOff"
onmouseover="javascript:turnButtonOn(this);"
onmouseout="javascript:turnButtonOff(this);">
Punkt 1</a>wenn du die klassen buttonOn und buttonOff nur für veränderungen der farben benutzen willst, und noch dazu nur bei onmouseover/-out - dann kannst du doch genauso gut :link und :hover für diese links innerhalb von #Button entsprechend definieren, und auf javascript an dieser stelle ganz verzichten.
btw:
onmouseover="javascript:turnButtonOn(this);"
das javascript: im eventhandler ist hier überflüssig, u.U. kann es sogar eine fehlerquelle darstellen. lasse es also an solchen stellen bitte weg.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hi wahsaga,
schwer zu sagen, wenn du uns nicht mitteilst, was statt dem von dir erwarteten passiert ...
Ok, stimmt. Der Text "Punkt 1" wird in rot angezeigt. Ich würde gerne erreichen, dass dieser in grün angezeigt wird, also so wie in ".buttonOff" definiert.
da diese definition einfach nur "nichts" enthält, werden hier natürlich die für "normale" a:hover definierten formatierungen angewandt.
Ich möchte im Prinzip, dass auf a:hover etc. in dieser <ul> gar nicht "reagiert" wird.
wenn du das nicht möchtest, musst du die unerwünschten eigenschaften innerhalb von ul#Button a:visited { ... } explizit mit anderen werten überschreiben.
...
wenn du die klassen buttonOn und buttonOff nur für veränderungen der farben benutzen willst, und noch dazu nur bei onmouseover/-out - dann kannst du doch genauso gut :link und :hover für diese links innerhalb von #Button entsprechend definieren, und auf javascript an dieser stelle ganz verzichten.
Ich möchte in dem Skript zu onMouseover und onMouseout noch etwas mehr machen, daher ist eine reine css-Lösung hier für mich nicht möglich und deswegen kann ich auch nicht explizit überschreiben.
btw:
onmouseover="javascript:turnButtonOn(this);"
das javascript: im eventhandler ist hier überflüssig, u.U. kann es sogar eine fehlerquelle darstellen. lasse es also an solchen stellen bitte weg.Danke für den Hinweis, ist korrigiert.
Viele Grüße
Daniel :-)-
hi,
da diese definition einfach nur "nichts" enthält, werden hier natürlich die für "normale" a:hover definierten formatierungen angewandt.
Ich möchte im Prinzip, dass auf a:hover etc. in dieser <ul> gar nicht "reagiert" wird.das ist nicht möglich.
"reagieren" im sinne des registrierens des überfahrens wird der browser immer - und dann schaut er nach, ob er zutreffende CSS-regeln findet.
da du eine allgemeine definition für a:hover gemacht hast, findet er hier auch eine solche.
wenn du nicht willst, dass deren formatierungen angewendet werden, bleibt dir m.E. gar nichts anderes übrig, als diese formatierungen in einer regel mit höherer spezifität (beispielsweise das erwähnte #Button a:hover) zu überschreiben; ggf. auch mit ihren initialwerten.gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-