Text durch Bild ersetzen

[tanine]

Ich komme an einer Stelle mit meinem Style nicht weiter. Was ich möchte, ist, dem Text einen Hintergrund zu geben.
Das ist beim Chat bsp. recht einfach, weil dort extra Klassen für existieren, sodass mit einem background-color wirklich nur der Text betroffen ist.

Nur wie bekomme ich gleiches bei der Feldbeschreibung hin wie auch sonstigen Inhalten im Mainframe (z.B. Briefinhalte), die direkt unter dem Body liegen und keine weiteren Attribute haben?

Die normale Textschriftfarbe ist im Body definiert:

Code: Alles auswählen

	p,ul,ol,div,td,span,layer,table,body { font-family: Arial, helvetica, sans-serif; font-size: 12px; color: #271025;}

Die Feldbeschreibung hier:

Code: Alles auswählen

	/* die überschrift des feldes */
	td.mainheader { background-image: url(filter3.png); background-color: transparent; border: thin #C8B4D2 solid; color: #64406C;  font-size: 32px;}

	/* die feldbeschreibung */
	td.areadescription:first-letter {font-size: 18px; color: #64406C;}
	table.areadescription 		{ border: 0px; background-color: transparent; background-image: url(filter.png); border: thin #ECE2F5 solid; color: #64406C;  width: 100%; }
	td.areadescription 		{padding: 5px; font-size: 12; color: #64406C;}
	td.areadescription		{text-background:#00FF00;}

Hat da irgendjmd Ideen zu?

[bwoebi]

Ich habe endlich meinen Style angepasst und die zusätzlichen Symbole für "Überladen" und "Rückangriff" erstellt. Funktioniert alles wunderbar, allerdings seh ich nun nur noch DASS ich einen RA habe, aber nicht, gegen wen, da im Title nur "Rückangriff" steht.

Gibt es eine Möglichkeit, per Style den Namen in den Title zu nehmen oder müsste das Sotrax machen?


EDIT: Noch eine kleine Frage: Ich hab Icons in den Frametiteln. Das sieht so aus:



Wie krieg ich das doppelte Bild raus? [erledigt] Und wie krieg ich den Trennbalken weg? [nicht erledigt] Der Code für das Icon:

Code: Alles auswählen

#fastspell td { 
  background-color: #46433E;
  background-image: url(forest_horn.png);
  background-repeat: no-repeat;
  border: 1px solid #222222;
  color: #222222;
  font-weight: bold; 
  padding: 2px; 
  padding-left: 5px; 
  text-align: right; }

Ansatz von bwoebi für Trennbalken-Problem:

Code: Alles auswählen

#fastspell td:last-child { 
  background-image: none; }

Bewirkt leider nichts.[/color]

das war das Bild entfernen^^ beim trennbalken mussts du fürs last-child einen border-left: none haben und fürs first-child einen border-right: none

[Andi90]

Ja sry, hab den falschen Teil kopiert.

Code: Alles auswählen

#fastspell td:last-child { 
  border-left: none; }
#fastspell td:first-child { 
  border-right: none; }

So klappts, danke.

Es bleibt das Problem mit dem Rückangriff: Wie krieg ich den Namen des Gegners in den Title bzw. hat jemand eine andere Idee, wie man das lösen könnte?

[Andi90]

Zwischenstand und neues Problem

Ich hab das mit dem RA zwischenzeitlich so gelöst, dass beim Hovern einfach wieder der normale Text "Rückangriff gegen XY" angezeigt wird. Inzwischen ist Sotrax meiner Bitte aber gefolgt und hat den Namen einfach in den Title übernommen.


Das neue Problem ist folgendes: Die Formatierung der Errungenschaftsliste.
1. Die Titelzeilen der erreichten Errungenschaften haben dieselbe Klasse, wie die der Items auf dem Feld und die Titelzeilen der nicht erreichten Errungenschaften sinnigerweise diejenige des Statusframes.
Wie kann ich die beiden jeweils auseinanderhalten?

2. Ich blende die Icons im Inventar aus (anschauen, transfer, ablegen). Für das Verfolgen einer Errungenschaft verwendet Sotrax dasselbe Icon wie beim "Anschauen".
Auch hier, wie kann ich die beiden auseinanderhalten? Ich will das im Inventar ausblenden und das bei den Errungenschaften unverändert lassen.
Bisher hab ich da Bild ("icon_view.gif") direkt angesprochen und ausgeblendet, was sich aber eben auch auf die Errungenschaftsliste auswirkt, wo ich das Verfolgen einer Errungenschaft nicht mehr deaktivieren kann.

[Benu]

Schau dir genau das HTML-Markup an und schuster dir so Selektoren zusammen. Ist ja nicht so, dass ich ständig Semantik predigen würde aber genau bei solchen Sachen rächt sich das.

Bei .itemlistcaption von items würde table > .itemlistcaption gehen und bei errungenschaffte br + .itemlistcaption. So musst du dann auch bei anderen Dingen verfahren.

Bei Achievement-Tracking bietet sich p.listcaption + a[name^=achiev] + a > img an. Grenzen schaffen eigentlich nur die Browser wenn sie gewissen CSS-Selektoren nicht anbieten. Ansonsten kannst du beim Ausdenken recht kreativ sein.

[tanine]

Fühle mich mit meinem obigen Post leider etwas ignoriert. Hat einfach keiner eine Lösung?

[Benu]

Fühle mich mit meinem obigen Post leider etwas ignoriert. Hat einfach keiner eine Lösung?

In deinem Post steht doch schon die Lösung? Oder ich versteh deine Frage nicht.

[bwoebi]

nine will einen Hintergrund nur für den Text machen, und nicht für den ganzen td

Aber da kenn ich keine Möglichkeit :/

[Benu]

nine will einen Hintergrund nur für den Text machen, und nicht für den ganzen td

Aber da kenn ich keine Möglichkeit :/

Und das soll wozu gut sein? Der Text geht doch eh über die gesamte Zelle...

[bwoebi]

damit der Text hinter dem das Hintergrundbild ist auch leserlich ist? naja, kA warum, sie will es

[Benu]

damit der Text hinter dem das Hintergrundbild ist auch leserlich ist? naja, kA warum, sie will es

Naja versteh es trotzdem nicht so ganz. Gehen tut es auf jeden Fall nicht. Beweis td.areadescription br + br + * müsste auf den Text gehen, wenn CSS dies könnte, kann es aber nicht, da CSS immer nur auf ganze Tags und nicht Teile davon geht.

[Benu]

Hier der Code zum Ersetzen der Achievement-Tracking Bilder:

Code: Alles auswählen

a[href*="achiev.php?action=toggletracking"] img[src*="icon_view"] {
    width: 0;
    height: 25px;
    padding-right: 46px;
    background: transparent url(http://forum.freewar.de/styles/subsilver2/imageset/forum_read.gif) top left no-repeat;
}

a[href*="achiev.php?action=toggletracking"] img[src*="icon_view2"] {
    width: 0;
    height: 25px;
    padding-right: 46px;
    background: transparent url(http://forum.freewar.de/styles/subsilver2/imageset/forum_unread.gif) top left no-repeat;
}

Die Werte für Höhe und padding-right (und natürlich der Bildlink) müssen entsprechend angepasst werden
padding-right entspricht der Breite des Bildes.

[Andi90]

*Gefällt mir*

Danke vielmals

[tanine]

damit der Text hinter dem das Hintergrundbild ist auch leserlich ist? naja, kA warum, sie will es

Jap. Damit man Text lesen kann, der über einem farbig nicht einheitlichen Hintergrundbild liegt.
Eine (nicht schöne) Lösung, die ich jetzt gefunden habe, wäre text-shadow.

[Cembon]

Wieso ist die möglichkeit nicht schön? Ist halt CSS 3^^

Beweis td.areadescription br + br + * müsste auf den Text gehen, wenn CSS dies könnte, kann es aber nicht, da CSS immer nur auf ganze Tags und nicht Teile davon geht.

Wie meinst du das?