nicht angemeldet
<option> mit Grafik
Hi,
vor einigen Wochen hatte hier jemand einen Artikel mit einigen Screenshots verfasst, auf denen man ein Dropdown mit kleinen Grafiken vor den Texten bewundern konnte.
Im Prinzip ist das schnell gemacht (background-image, no-repeat und ein günstiges padding - wobei die Grafik dann zumindest in Mozilla nur im aufgeklappten Dropdown erscheint, nicht beim ausgewählten Punkt). Allerdings würde ich jetzt ganz gerne von Erfahrungen anderer profitieren, insbesondere im Hinblick auf Inkompatibilitäten und "Effekte" in den unterschiedlichen Browsern. Leider finde ich trotz unterschiedlichster Ansätze den Thread nicht im Archiv und weiß auch leider nicht mehr, von wem er stammte... Wer war es, bzw. wer erinnert sich?
Das war der neueste Beitrag aus unserer beliebten Fernsehshow "Bitte melde Dich" :-)
Cheatah
-
Hi,
Tach
vor einigen Wochen hatte hier jemand einen Artikel mit einigen Screenshots verfasst, auf denen man ein Dropdown mit kleinen Grafiken vor den Texten bewundern konnte.
hallo Cheatah, hier ist "jemand".
Im Prinzip ist das schnell gemacht (background-image, no-repeat und ein günstiges padding - wobei die Grafik dann zumindest in Mozilla nur im aufgeklappten Dropdown erscheint, nicht beim ausgewählten Punkt). Allerdings würde ich jetzt ganz gerne von Erfahrungen anderer profitieren, insbesondere im Hinblick auf Inkompatibilitäten und "Effekte" in den unterschiedlichen Browsern. Leider finde ich trotz unterschiedlichster Ansätze den Thread nicht im Archiv und weiß auch leider nicht mehr, von wem er stammte... Wer war es, bzw. wer erinnert sich?
Falsch gedacht. :before heißt das Zauberwort.
Das war der neueste Beitrag aus unserer beliebten Fernsehshow "Bitte melde Dich" :-)
Hab ich doch!
Ach ja, hier noch in aller Schönheit: http://aktuell.de.selfhtml.org/tippstricks/css/optionbilder/index.htmCheatah
-
Hi Andreas,
hallo Cheatah, hier ist "jemand".
ach, Du warst das :-)
Falsch gedacht. :before heißt das Zauberwort.
Ah, danke. Das stellt mich leider vor ein Problem... Aufgrund des generischen Aufbaus der Seite kann ich keinen <style>-Bereich definieren oder ver<link>en (der <head> wurde von einem völlig anderen Script geschrieben); und wenn ich nichts wesentliches übersehe, gibt es keinen anderen Weg, eine Pseudoklasse zu erstellen, oder?
Alternativ: Gibt es einen Weg, _ein_ option.classname:before zu definieren, dem dann per style-Attribut (oder wie auch immer) die URL der Grafik übergeben wird? Falls ja, muss ich zwar meine Vorstellung von CSS etwas revidieren *g* aber völlig ausschließen möchte ich es auch nicht gleich.
Ach ja, hier noch in aller Schönheit: http://aktuell.de.selfhtml.org/tippstricks/css/optionbilder/index.htm
Darauf, dass es in SelfAktuell Einzug gehalten hat, hätte ich eigentlich auch kommen können *grml* :-)
Cheatah
-
Hi Andreas,
Tach,
hallo Cheatah, hier ist "jemand".
ach, Du warst das :-)
Ich bin das. Noch lebe ich ;-)
Falsch gedacht. :before heißt das Zauberwort.
Ah, danke. Das stellt mich leider vor ein Problem... Aufgrund des generischen Aufbaus der Seite kann ich keinen <style>-Bereich definieren oder ver<link>en (der <head> wurde von einem völlig anderen Script geschrieben); und wenn ich nichts wesentliches übersehe, gibt es keinen anderen Weg, eine Pseudoklasse zu erstellen, oder?
Ja, Pseudoklassen lassen sich nicht im style-Attribut definieren.
Und die beiden HTML-Elemente, mit denen man sie angeben könnte, - link und style, müssen beide im head stehen.Alternativ: Gibt es einen Weg, _ein_ option.classname:before zu definieren, dem dann per style-Attribut (oder wie auch immer) die URL der Grafik übergeben wird? Falls ja, muss ich zwar meine Vorstellung von CSS etwas revidieren *g* aber völlig ausschließen möchte ich es auch nicht gleich.
Du könntest ja mal versuchen, mit Javascript dem head-Element ein zusätzliches child zu verpassen namens link oder style.
Aber selbst wenn das Hinzufügen klappt - link/style muß ja im head stehen, damit bei Beginn von body bekannt ist, wie etwas darzustellen ist - ich könnte mir also vorstellen, daß dieses Element dann schlicht und einfach ignoriert wird.
Alternative: das Script, das den head erzeugt, umschreiben.
Ist ja ansich kein Aufwand, da das link-Element mit reinzugenerieren...Ach ja, hier noch in aller Schönheit: http://aktuell.de.selfhtml.org/tippstricks/css/optionbilder/index.htm
Darauf, dass es in SelfAktuell Einzug gehalten hat, hätte ich eigentlich auch kommen können *grml* :-)
Allerdings! ;-)
Antje hat mich dazu "gezwungen"! ;-)Andreas
-
Hi,
ach, Du warst das :-)
Ich bin das. Noch lebe ich ;-)Beweise! ;-)
wenn ich nichts wesentliches übersehe, gibt es keinen anderen Weg, eine Pseudoklasse zu erstellen, oder?
Ja, Pseudoklassen lassen sich nicht im style-Attribut definieren.
Und die beiden HTML-Elemente, mit denen man sie angeben könnte, - link und style, müssen beide im head stehen.Ich hatte befürchtet, richtig zu liegen.
Du könntest ja mal versuchen, mit Javascript dem head-Element ein zusätzliches child zu verpassen namens link oder style.
Scheidet aus weil wegen non-JS-Konformität.
Alternative: das Script, das den head erzeugt, umschreiben.
Ist ja ansich kein Aufwand, da das link-Element mit reinzugenerieren...An sich nicht - nur darf ich es a) nicht bei der falschen Seite tun[1], und b) habe ich die zugrundeliegenden Daten eigentlich erst in einem späteren Script :-) Zum Glück ist <link> beliebig oft erlaubt...
[1] Dazu kommt, dass das Header-Element serverseitig leicht gecachet werden konnte, da es bisher keinerlei Dynamik unterlag (der <title> ist ein Platzhalter, der erst nachträglich ersetzt wird - bei einem <link> wird das leider aus verschiedenen Gründen nicht klappen). Wenn ich jetzt eine Ausnahme habe, in der das Element anders gestrickt sein muss, muss ich leider (aus Gründen des effizienten Cache-Hits/Misses) das Element vielfach cachen, was augenscheinlich auch Nachteile hat. Es ist alles immer nicht so leicht, wie man es sich erhofft...
Darauf, dass es in SelfAktuell Einzug gehalten hat, hätte ich eigentlich auch kommen können *grml* :-)
Allerdings! ;-)
Antje hat mich dazu "gezwungen"! ;-)Ich danke ihr dafür :-)
Cheatah
-
Hallo,
Lösung gefunden:
einfach noch etwas abwarten, und dann so machen:</?m=114202&t=20391>
Andreas
-
Hi,
einfach noch etwas abwarten, und dann so machen:
hm, das wäre natürlich ein Weg... allerdings ist wohl kaum abzusehen, dass innerhalb der nächsten zwei, drei Wochen ein sichtbarer Prozentsatz der User einen Browser verwendet, der das auch richtig interpretiert ;-)
In jedem Fall danke,
Cheatah
-
-
-
-
-