images per CSS definieren (ohne Block-Element?)

[Marc]

Hallo Robert,

Wusste ich doch, dass ich hier ruckzuck hilfreicht Antworten bekomme.
Danke an Alle!

Gern geschehen.

Ich ergänze noch: Soll in jedem Kontext funktionieren, insbes. im Fließtext.

Das Problem ist: was soll funktionieren? Wenn dort nur ein Bildchen stehen soll, ist das img-Element die beste Lösung, denn sie funktioniert in jedem Browser und ob Du nun dieses Element oder ein anderes nimmst (egal ob span oder sonst was) ist doch dann auch egal.- Wenn der HTML-Code, wie du sagst, generiert wird, kannst Du sogar abhängig vom Linkziel (extern, intern, Download usw.) unterschiedliche Icons benutzen. Das einzige Problem hierbei: es ist kein Bildwechsel bei mousover oder so möglich - immerhin kannst du dem Bildelement eine andere Hintergrund-Farbe geben, was in Verbiundung mit (teiltransparenten) Grafiken zwar nicht unbedingt barrierefrei ist, aber dennoch einen einfachen mousover-Effekt zulässt.

Hier zusammengefasst alle Ergebnisse und Bewertungen:

inline-block wäre die Lösung gewesen (hab ich auf selfthtml-Seite für display nicht wahrgenommen).

Dann lautet Dien Code so:

HTML:

<a href ="#">Link</a>

CSS:

a {  
  background-image:url();  
  padding-left: [breiteDesBildes]px;  
}  

Oder um das Problem mit den umbrechendne Links in den Griff zu bekommen:

HTML:

<a href ="#"><span />Link</a>

CSS:

a span {  
  background-image:url();  
  padding-left: [breiteDesBildes]px;  
}  

So funktioniert es auch ohne Liste.

Und zu guter letzt kannst Du noch Klassen und Pseudo-Klassen verwenden um je nach Art des Links oder seines Zustandes andere Bilder zu verwenden.

So?? Damit hab ich mein Image unter dem Linktext liegen nicht links davor!

Dann benutze die CSS-Eigenschaft position oder schneide Dein Bild anders!

@Marc
linkArrow ist dämlich - hast Du recht! besser linkIcon
Das von Dir vorgeschlagene ul kann IMHO so nicht funktionieren (falls Du Dich nicht verschrieben hast). ul gestylet und auf li soll es wirken??

Ja, tut es, so lange du es mit Listen zu tun hast. Noch ein Tipp: Das lässt sich hier in SelfHTML nachlesen. :-)

Und hier alle Vorschläge zusammengefasst und meine *** Lösung = button ***!:

Warum denn nun <button>? Soll man das Bildchen drücken? Oder damit sein Hemdchen zuknöpfen?

http://ai-ti.net/test/images_im_CSS_definiert.html
Ist valide! (bis auf das o. g. div im a-Tag)

Immerhin. :-D

Viele Grüße,
Marc.