nicht angemeldet
Links mit :before dekorieren
Hallo!
Ich hab ein kleines Problem.
Ich würde gerne vor alle meine Textlinks ein Bild setzen.
a:before {content:url(images/bild.gif)" ";}
erscheint mir gut dafür zu passen - ich muß nicht in alle Links was reinschreiben und kann's auch jederzeit wieder aus dem Stylesheet rausnehmen.
Dummerweise wird dieses kleine Bildchen damit aber auch vor jeden Link gesetzt, der nur aus einem Bild besteht, also sowas:
<a ...><img ...></a>
Gibt's einen Weg, das zu verhindern, ohne jetzt jeden Textlink speziell auszuzeichnen?
Tschüß,
Melanie
-
Hi Melanie,
ich würd einfach versuchen, das mit Klassen für die Bild-Links zu regeln oder? :)
Gruß
Ben-
'n Abend Ben,
ich würd einfach versuchen, das mit Klassen für die Bild-Links zu regeln oder? :)
Tja, erstens wäre das qualitativ ungefähr das Gleiche, Text-Links extra auszeichnen zu müssen - wenn auch nicht quantitativ, ok.
Abgesehen davon habe ich es schon probiert, also :before auf alle Links angewendet und danach versucht, eine Klasse zu bauen, die das :before dort wieder wegnimmt, aber selbst das klappte irgendwie nicht.Bye,
Melanie-
Tja, erstens wäre das qualitativ ungefähr das Gleiche, Text-Links extra auszeichnen zu müssen - wenn auch nicht quantitativ, ok.
eine andere möglichkeit gibt es nicht. du benötigst ein unterscheidungsmerkmal für das a-element. ob sich darin text oder ein bild befindet, ist keins.
Abgesehen davon habe ich es schon probiert, also :before auf alle Links angewendet und danach versucht, eine Klasse zu bauen, die das :before dort wieder wegnimmt, aber selbst das klappte irgendwie nicht.
http://forum.de.selfhtml.org/?m=103543&t=18412 funktioniert nicht?
-
Hi Dragon,
Abgesehen davon habe ich es schon probiert, also :before auf alle Links angewendet und danach versucht, eine Klasse zu bauen, die das :before dort wieder wegnimmt, aber selbst das klappte irgendwie nicht.
http://forum.de.selfhtml.org/?m=103543&t=18412 funktioniert nicht?
Doch, doch, das funktioniert jetzt.
Danke dafür. Ich könnte zwar schwören sowas vorher schon probiert zu haben, aber wahrscheinlich bin ich da in einem wichtigen Detail daneben gelegen.
Leider war ich gerade am tippern meiner Antwort auf Ben als Dein Beitrag reinkam. Deshalb die Überschneidung.Bye,
Melanie
-
-
'n Abend Ben,
ich würd einfach versuchen, das mit Klassen für die Bild-Links zu regeln oder? :)
Tja, erstens wäre das qualitativ ungefähr das Gleiche, Text-Links extra auszeichnen zu müssen - wenn auch nicht quantitativ, ok.
Abgesehen davon habe ich es schon probiert, also :before auf alle Links angewendet und danach versucht, eine Klasse zu bauen, die das :before dort wieder wegnimmt, aber selbst das klappte irgendwie nicht.Finde ein eindeutiges Unterscheidungsmerkmal zwischen Links mit und ohne Bild.
Sind die Bildlinks alle in einer Tabellenzelle drin?
td a:before {content: "";}
bzw. sogar
td > a:before {content:"";}Noch mehr Selektorenmöglichkeiten sind in http://selfhtml.teamone.de/css/formate/zentrale.htm#verschachtelte_elemente (ein wenig unterhalb bei den CSS2-Selektoren gucken) und http://www.w3.org/TR/REC-CSS2/selector.html (serh aufschlußreich) aufgelistet . Die Kette darf durchaus noch länger sein und kann bei ganz oben bei "html" anfangen.
Du mußt Klassen verwenden, sofern du Bildlinks und Textlinks innerhalb eines Bereiches mischst. Die CSS-Selektoren formatieren das zuletzt genannte Element, beachten aber keine Inhalte von Elementen, wie es bei dir notwendig wäre. Würdest du nach "a img" selektieren, würdest du das img formatieren, nicht dessen vorhergehendes a.
Und das wichtigste: Erwarte nicht, daß alle Browser alle Selektoren kennen. Netscape 4 ist ganz schlimm in dieser Beziehung, der erkennt z.B. ID-Selektoren nur in der anonymen Form "#id", aber nicht mehr in der Tag-benannten Form "div#id". Er kennt nur die ganz normalen Ketten von Selektoren "a b c", aber nichts spezielleres wie ">" oder "+". Attributselektoren gehen sowieso garnicht. Andere Browser können das eine oder andere mehr, aber so richtig glücklich wird man vermutlich erst mit Mozilla - und weint dann ob dessen Verbreitungsgrad.
- Sven Rautenberg
-
Und das wichtigste: Erwarte nicht, daß alle Browser alle Selektoren kennen.
:before in verbindung mit dem einfügen eines bildes kennt ohnehin nur mozilla, es ist also unerheblich, welche anderen browser welche selektoren (nicht) kennen. die tatsache, dass melanie ein unterscheidungsmerkmal zwischen bildlinks und textlinks, in welcher form auch immer, benötigt, wurde ja bereits mehrfach geschrieben. und welche selektoren netscape 4 (nicht) kennt, ist nun bei diesem problem wirklich völlig unerheblich. da könnte genausogut jemand schreiben, dass lynx nicht mit css-selektoren umgehen kann ;-)
-
Hallo Sven!
Finde ein eindeutiges Unterscheidungsmerkmal zwischen Links mit und ohne Bild.
Sind die Bildlinks alle in einer Tabellenzelle drin?
Ja, aber es gibt leider auch Textlinks in Tabellen, wenn ich das auch noch versuche zu beseitigen.
td a:before {content: "";}
bzw. sogar
td > a:before {content:"";}Noch mehr Selektorenmöglichkeiten sind in http://selfhtml.teamone.de/css/formate/zentrale.htm#verschachtelte_elemente (ein wenig unterhalb bei den CSS2-Selektoren gucken) und http://www.w3.org/TR/REC-CSS2/selector.html (serh aufschlußreich) aufgelistet . Die Kette darf durchaus noch länger sein und kann bei ganz oben bei "html" anfangen.
Ächz, schöne Sache, muß ja nicht gleich so komplex werden.
Aber das liest sich alles recht gut, danke.Du mußt Klassen verwenden, sofern du Bildlinks und Textlinks innerhalb eines Bereiches mischst. Die CSS-Selektoren formatieren das zuletzt genannte Element, beachten aber keine Inhalte von Elementen, wie es bei dir notwendig wäre. Würdest du nach "a img" selektieren, würdest du das img formatieren, nicht dessen vorhergehendes a.
Hm, ideal wäre ja ein Selektor nicht für "wenn img Kind von a", sondern quasi "wenn a Vater von img". Sowas wie img < a:before oder so.
Ich werd' dann mal in den sauren Apfel beißen und versuchen, die Textlinks irgendwie von den Bildlinks zu trennen.Und das wichtigste: Erwarte nicht, daß alle Browser alle Selektoren kennen. Netscape 4 ist ganz schlimm in dieser Beziehung, der erkennt z.B. ID-Selektoren nur in der anonymen Form "#id", aber nicht mehr in der Tag-benannten Form "div#id". Er kennt nur die ganz normalen Ketten von Selektoren "a b c", aber nichts spezielleres wie ">" oder "+". Attributselektoren gehen sowieso garnicht. Andere Browser können das eine oder andere mehr, aber so richtig glücklich wird man vermutlich erst mit Mozilla - und weint dann ob dessen Verbreitungsgrad.
Da hat Dragon schon das richtige gesehen, :before kann momentan weder IE noch NS 4. Somit ist mein Problem momentan fast akademischer Natur da der Großteil der Welt nix davon haben wird, aber bei ähnlichen Fällen werden sich die neuen Erkenntnisse sicher auch bald verwenden lassen.
Schönen Dank,
Melanie
-
-
-
-
Gibt's einen Weg, das zu verhindern, ohne jetzt jeden Textlink speziell auszuzeichnen?
vermutlich hast du weit weniger bildlinks als textlinks, also würde ich das vorschlagen:
a.img:before {
content: "";
}<a class="img" href="#"><img alt="" src="img.png"></a>
ohne eine klasse, ob nun für die text- oder die bildlinks, kommst du hier nicht weiter, was ganz einfach damit zusammenhängt, dass du eine css-eigenschaft für a in abhängigkeit des inhaltes dieses elementes definieren willst. sowas ist nicht möglich, ergo mußt du die a-elemente irgendwie unterscheiden.