Text durch Bild ersetzen

[Jack the Ripper]

Das mit dem Verzicht auf {font-size:0px;} scheint ja nicht zu klappen, unter Firefox klappt das recht reibungslos.
Und deine Versionen gehen alle 3 nicht Oo

[bwoebi]

Jajajaja… ich hatte b statt after hingeschrieben weil ich gerade gleichzeitig online hier am kstyle arbeite…

[Jack the Ripper]

Dann zurück zu Andi und seinem Code, der immernoch fehlt^^
Wird bei Stärke denn der Text angezeigt? Vll. hast du nur eine Zeile geändert, hast also

span[title*="Stärke"] {font-size: 0px;}
span[title*="Lebenspunkte"]:after { content:url(staerke.gif);}

stehen?

[bwoebi]

Nunja… ich glaube es wird Zeit dass ich mal den Code sehe

[Andi90]

Also, ich hab das ganze nochmals komplett neu angefangen und hab sogar einige Teilerfolge erzielt x) So siehts im Moment aus.

Tarnung, Schnelle Bewegung, Schutz, Beutezauber und LP-Erhöhung funktionieren wunderbar. KU, Feueröl und Stärke-Erhöhung gar nicht. Die restlichen Zustände konnte ich noch nicht testen.

Code:

Code: Alles auswählen

span[title*="Lebenspunkte +"] { font-size: 0px; }
span[title*="Lebenspunkte +"]:after { content:url(lppush.gif); display:inline; }

span[title*="Schutz"] { font-size: 0px; }
span[title*="Schutz"]:after { content:url(schutz.gif); display:inline; }

span[title*="Beutezauber"] { font-size: 0px; }
span[title*="Beutezauber"]:after { content:url(beute.gif); display:inline; }

span[title*="schnelle Bewegung"] { font-size: 0px; }
span[title*="schnelle Bewegung"]:after { content:url(sbeweg.gif); display:inline; }

span[title*="Tarnung"] { font-size: 0px; }
span[title*="Tarnung"]:after { content:url(tarn.gif); display:inline; }


span[title*="Feueröl"] { font-size: 0px; }
span[title*="Feueröl"]:after { content:url(feuer.gif); display:inline; }

span[title*="Stärke +"] { font-size: 0px; }
span[title*="Stärke +"]:after { content:url(apush.gif); display:inline; }

span[title*="Kampfunfähig"] { font-size: 0px; }
span[title*="Kampfunfähig"]:after { content:url(kaunf.gif); display:inline; }

EDIT: Und ich hab auch schon rausgefunden, warum die nicht gehen... Wegen den Umlauten. Wenn ich statt "Feueröl" "Stärke +" und "Kampfunfähig" nur "Feuer" "rke +" und "Kampfunf" nehm, gehts. Ich hoff mal, das überschneidet nichts^^

Vollständiger Code: (Clankrieg und RA lass ich mal weg, hab ich eh sehr selten, Überladen (geht nicht auf die Art) ebenfalls)

Code: Alles auswählen

span[title*="Beutezauber"] { font-size: 0px; }
span[title*="Beutezauber"]:after { content:url(beute.gif); display:inline; }

span[title*="Lebenspunkte +"] { font-size: 0px; }
span[title*="Lebenspunkte +"]:after { content:url(lppush.gif); display:inline; }

span[title*="schnelle Bewegung"] { font-size: 0px; }
span[title*="schnelle Bewegung"]:after { content:url(sbeweg.gif); display:inline; }

span[title*="Schutz"] { font-size: 0px; }
span[title*="Schutz"]:after { content:url(schutz.gif); display:inline; }

span[title*="rke +"] { font-size: 0px; }
span[title*="rke +"]:after { content:url(apush.gif); display:inline; }

span[title*="Tarnung"] { font-size: 0px; }
span[title*="Tarnung"]:after { content:url(tarn.gif); display:inline; }


span[title*="Feuer"] { font-size: 0px; }
span[title*="Feuer"]:after { content:url(feuer.gif); display:inline; }


span[title*="Kampfunf"] { font-size: 0px; }
span[title*="Kampfunf"]:after { content:url(kaunf.gif); display:inline; }

span[title*="Vergiftung"] { font-size: 0px; }
span[title*="Vergiftung"]:after { content:url(vergiftung.gif); display:inline; }

span[title*="Verr"] { font-size: 0px; }
span[title*="Verr"]:after { content:url(verr.gif); display:inline; }

span[title*="Lebenspunkte -"] { font-size: 0px; }
span[title*="Lebenspunkte -"]:after { content:url(lpmal.gif); display:inline; }

Somit funktioniert das ganze nun einigermassen, ka, was ich da zuerst für einen Bockmist zusammengecodet hab Danke für eure Hilfe.

[Jack the Ripper]

Was mir noch aufgefallen ist, mich nicht weiter stört, aber bei Bildern vll. nervt:
Wenn man ne Schutzauflösung, nen Beutezauber oder Ähnliches auf Schnellzauber hat und auf anschauen geht, um einen Schnellzauber neu zu belegen, steht da statt ner 9 bei mir zB nen B, dafür hab ich noch keine Lösung gefunden

[Andi90]

Hmm stimmt. Aber das stört mich nicht gross, da ich solche Items eigentlich nicht in meinen SZ hab
Und auch sonst ist es ja nur ein Untermenu, nicht etwas, was dauernd angezeigt wird. Von daher ists ja nicht so schlimm.

EDIT: Weisst du, wie man für "Überladen" ein Icon machen kann?

[kaot]

Versuch mal was passiert wenn du die display:inline anweisung rausnimmst - bei mir funktioniert es ohne nämlich problemlos (und nein ich weiß nicht wieso es nur bei einigen Elementen funktioniert^^)

Oh und bwoebi: not ist css3 und wird damit mMn auch nur von FF4, Chrome 5 und dem aktuellen Safari (ka welche Version) ordentlich verarbeitet. (Eventuell auch FF3.6.8, ich weiß nicht wie weit die schon sind...)

[Jack the Ripper]

Ohne dieses not wirds nicht gehen.
Da dieselbe Klasse für Verräter, Minuslp, Überladen, etc. verwendet wird und Überladen keinen Mouseover hat, den man per title ansprechen kann, kommt man da nicht ran.
Irgendwer muss Sotrax mal überreden, für Clan-Krieg, Überladen und Rückangriffe title einzubauen, braucht ja nichtmal ne Zeitangabe

E: Das andere Problem ist, zumindest bei mir, gelöst:
man benutzt statt "Beutezauber" einfach "Beutezauber ("

[Andi90]

Irgendwer muss Sotrax mal überreden, für Clan-Krieg, Überladen und Rückangriffe title einzubauen, braucht ja nichtmal ne Zeitangabe

Bin dabei...
EDIT: Das ging ja mal schnell... Er sagt, er würde sich mal damit befassen.

EDIT2: Eine Sache noch: Ich will, dass die Icons blinken, wenn der Zustand wengier als 3min anhält. Bei den Waffenzuständen hab ich eine ähnliche Formatierung bereits drin, aber da ist für jede Prozentzahl eine eigene Anweisung gegeben.
Muss ich jetzt bei den Zuständen zu jedem Zustand für jede Minute eine Anweisung machen oder lässt sich das irgendwie zusammenfassen?
Also zB alle Zustände zusammen, dafür jede Minute, oder jeweils nur für die letzten 3min oder sowas?
Und wie muss diese Anweisung aussehen?

[kaot]

Code: Alles auswählen

/*Vergiftung*/
span[title*="Vergiftung"] {font-size: 0px;}
span[title*="Vergiftung"]:after { content: url(vergiftung_1.png);}
/*3 Min Sonderbehandlung*/
span[title="Vergiftung (3 Minuten)"] {font-size: 0px;}
span[title="Vergiftung (3 Minuten)"]:after { content: url(vergiftung_2.png);}
span[title="Vergiftung (2 Minuten)"] {font-size: 0px;}
span[title="Vergiftung (2 Minuten)"]:after { content: url(vergiftung_2.png);}
span[title="Vergiftung (1 Minuten)"] {font-size: 0px;}
span[title="Vergiftung (1 Minuten)"]:after { content: url(vergiftung_2.png);}
span[title="Vergiftung (0 Minuten)"] {font-size: 0px;}
span[title="Vergiftung (0 Minuten)"]:after { content: url(vergiftung_2.png);}

Du müsstest jetzt natürlich statt Vergiftung_2 dein blinke-gif einbauen, oder was auch immer du da haben willst. Wenn das Bild blinken sollst, bleibt dir meiner Meinung nach nur für jeden Status ein eigenes, animiertes Gif.
Wenn du alles zusammenfassen möchtest, könntest du auf title*="(3 Minuten)" zurückgreifen - allerdings nur mit Text, und 3 Minuten blinketext nervt wie die Hölle

[Jack the Ripper]

Jup, blinkendes .gif ist da nötig^^
Ich hab mal zum Spass text-decoration:blink probiert, das ging nicht
Ansonsten bliebe die Möglichkeit, nen Text einzusetzen, der fällt wenigstens auf, wenn sonst nur Bilder angezeigt werden

Wenn Sotrax die title einbaut, erkläre ich dich zum Style-Helden des Tages =)

[bwoebi]

Versuch mal was passiert wenn du die display:inline anweisung rausnimmst - bei mir funktioniert es ohne nämlich problemlos (und nein ich weiß nicht wieso es nur bei einigen Elementen funktioniert^^)

Oh und bwoebi: not ist css3 und wird damit mMn auch nur von FF4, Chrome 5 und dem aktuellen Safari (ka welche Version) ordentlich verarbeitet. (Eventuell auch FF3.6.8, ich weiß nicht wie weit die schon sind...)

Ja, aber ich muss dich mal verbessern: FF 3.5, und Safari 4 - Chrome - kA.

Und kaot, das width geht nur bei Elementen die von Natur aus block sind, bzw. inline-block oder wenn man sie dazu per CSS macht

[Benu]

Und kaot, das width geht nur bei Elementen die von Natur aus block sind, bzw. inline-block oder wenn man sie dazu per CSS macht

Kurze Frage zum inline-block: Letzte Info war, dass der bisher nur von Opera unterstützt wird. Gibts da mittlerweile Neuigkeiten oder haben die anderen Browser nachgezogen?

[bwoebi]

@ Benu: http://www.css4you.de/display.html