Hintergrundbild in einer Tabellenzelle halbtransparent

[calvin]

hi

ich hab folgedes problem:

ich habe eine tabelle, in der eine zelle einen halbduchsichtigen hintergrund haben soll.

das war auch nicht das problem. nur leider wird jetzt auch der text in der zelle nicht mehr richtig "schwarz" angezeigt sondern ehr "grau". wie kann ich das schaffen, dass nur das hintergrundbild halbtransparent ist aber nicht die schrift?

gruss

calvin

[heiko]

hi

ich hab folgedes problem:

ich habe eine tabelle, in der eine zelle einen halbduchsichtigen hintergrund haben soll.

das war auch nicht das problem. nur leider wird jetzt auch der text in der zelle nicht mehr richtig "schwarz" angezeigt sondern ehr "grau". wie kann ich das schaffen, dass nur das hintergrundbild halbtransparent ist aber nicht die schrift?

gruss

calvin

keine ahnung, ob dir das wirklich hilft, aber mach doch einfach die transparenz im bildbearbeitungsprogramm?!

[Frank Stabenau]

Hallo,

die Transparenz legst du für die Zelle fest? Dann gehe ich mal davon aus, das alle enthaltenen Elemente die Eigenschaft Erben. Wenn du dem Text explizit einen neuen Wert zuweist sollte es gehen denke ich, also mit einem Span-Tag... <td><span>Text</span></td>

Gruß Frank

[calvin]

hallo

die Transparenz legst du für die Zelle fest? Dann gehe ich mal davon aus, das alle enthaltenen Elemente die Eigenschaft Erben. Wenn du dem Text explizit einen neuen Wert zuweist sollte es gehen denke ich, also mit einem Span-Tag... <td><span>Text</span></td>

ich hab folgedes versucht:

<TD VALIGN="top" ALIGN="center" class="info"><span> test </span></TD>

hat aber nicht den gewunschten erfolg.

hier das css:
td {...}
.info       {  background-color: #FFFAFA; font-family: Arial, Helvetica; font-weight: bold; font-size: 10pt; filter:alpha(opacity=70); -moz-opacity:0.7; }

gruss

calvin

[Frank Stabenau]

Ich meinte ja auch, das du den Span Tag noch eine Classe zuweist, wo du die Transparenz wieder auf hundert setzt...

<TD VALIGN="top" ALIGN="center" class="info"><span class="jo"> test </span></TD>

.jo {
filter:alpha(opacity=100);
}

Gruß
Frank

[Jeena Paradies]

Hallo Frank Stabenau,

<TD VALIGN="top" ALIGN="center" class="info"><span class="jo"> test </span></TD>
.jo {
filter:alpha(opacity=100);
}

Also sehr komisch gemacht ich würde das so machen:

HTML:
<td class="info">
 <span>test</span>
</td>

CSS:
td.info {
 vertical-align: top;
 text-align: center;
 background-color: #FFFAFA;
 filter: alpha(opacity=70);
 -moz-opacity: 0.7;
}
td.info span {
 filter: alpha(opacity=100);
 -moz-opacity: 1;
}

Das font Zeugs wird ja dann von Body übernommen. Wenn du es ausdrücklich anders formatieren willst dann nimmst du das in [td.info span] mit auf. So wird dein HTML Quelltext viel schöner und übersichtlicher und du kannst alles in deine externe CSS Datei auslagern. Außerdem sparst du dir einer Klasse. Das alles habe ich nicht ausprobiert kann sein dass da was nicht funktioniert da ich mich mit diesem filer und -moz Zeugs nicht auskenne.

Bedenke aber dabei dass du dann diesen Effekt bei vielen Browsern nicht hast. Das wird aber warscheinlich nicht weiter schlimm sein. Was du aber machen könntest ist mit einer CSS Weiche nur den IE mit dem filter zu bedienen und allen anderen ein Halbtransparentes PNG Hintergrundbild zu liefern.

Grüße
Jeena Paradies

[Frank Stabenau]

Huhu Jeena Paradies,

ich wollte einfach nur darstellen das untergeordnete Elemente die EIgenschaften von Übergeordneten erben. Da ich um das Verständnis von "CSS-Anfängern" kenne, wollte ichs halt nicht komplizierter  machen... deine Version ist natürlich die Bessere/ Elegantere.

Das die Anwendung von Filtern auf kaum einem Browser funktioniert ist ein anderes Thema.

Gruß Frank

[Jeena Paradies]

Hallo Frank Stabenau,

ich wollte einfach nur darstellen das untergeordnete Elemente die EIgenschaften von Übergeordneten erben.

Das hast du auf jeden fall gut gemacht.

Da ich um das Verständnis von "CSS-Anfängern" kenne, wollte ichs halt nicht komplizierter  machen... deine Version ist natürlich die Bessere/ Elegantere.

Ok verstehe. Ich finde aber dass du so was noch dazu anfügen solltest. Ein Anfänger weiß doch meistens gar nicht was so alles geht. Mir persönlich geht es immer so dass ich aus solchen Hinweißen dann im Endeffekt noch viel mehr lerne als aus der konkreten Hilfe. Dann erst sehe ich dass es da noch andere Sachen gibt an welche ich gar nicht erst gedacht habe. Man könnte sich doch eventuell darauf einigen dass man es erst einmal für das Verständniss so macht wie du aber gleich dazu sagt dass es eigentlich noch viel besser geht und zeigt wie. Dann haben alle mehr davon.

Das die Anwendung von Filtern auf kaum einem Browser funktioniert ist ein anderes Thema.

So etwas sollte man meiner Meinung nach auch immer dazu sagen. Manche wissen ja nicht einmal dass es noch andere Browser gibt als IE und NS. Calvin weiß zumindest dass es den Mozilla gibt, das ist schon mal gut aber da fehlen noch so viele die dann überhaupt nicht berücksichtigt werden obwohl sie solche Sachen viel besser können.

Hier ein Tipp von Dave Shea http://www.mezzoblue.com/css/cribsheet/
---------------------------------
Build and test your CSS in the most advanced browser available before testing in others, not after.

If you build a site testing in a broken browser, your code begins relying on the broken rendering of that browser. When it comes time to test in a more standards-compliant browser, you will be frustrated when that browser renders it improperly. Instead, start from perfection and then hack for the less able browsers. Your code will be more standards-compliant from the start, and you wont have to hack as much to support other browsers. Today, this means Mozilla, Safari, or Opera.
---------------------------------

Das soll bitte jetzt nicht als Jammern über deine Hilfestellung verstanden werden sondern als allgemeiner Tip.

Viel Spaß noch beim weiterhelfen :-)

Grüße
Jeena Paradies

[calvin]

hallo

Das die Anwendung von Filtern auf kaum einem Browser funktioniert ist ein anderes Thema.
So etwas sollte man meiner Meinung nach auch immer dazu sagen. Manche wissen ja nicht einmal dass es noch andere Browser gibt als IE und NS. Calvin weiß zumindest dass es den Mozilla gibt, das ist schon mal gut aber da fehlen noch so viele die dann überhaupt nicht berücksichtigt werden obwohl sie solche Sachen viel besser können.

d.h. es wird das beste sein, wenn ich ein halbtransparentes png nehme und das als zellenhintergrund setze.

danke fuer eure hilfe ;-)

gruss

calvin

[Jeena Paradies]

Hallo calvin,

d.h. es wird das beste sein, wenn ich ein halbtransparentes png nehme und das als zellenhintergrund setze.

Ja und es muss auch nur 1px groß sein, da es dann wiederholt wird. Leider werden dann 95% Der Leute die deine Seite besuchen nichts davon haben der der IE das nicht hinbekommt.

Du musst das PNG für alle browser als Hintergrundbild machen, den IE aber davon mit einer CSS Weiche ausschließen. Für den IE musst du dann extra filter angeben. Das musst du vor den anderen Browsern nicht verstecken da die das einfach ignorieren werden.

CSS Weichen findest du hier: http://www.lipfert-malik.de/webdesign/tutorial/css.html.gz#BrowserweichenCSS wenn du nicht weiterkommst sag einfach bescheid.

Grüße
Jeena Paradies

[Der Hans]

Moin!

Nach der Beschreibung der "Nebenwirkungen" vermute ich mal, du hast mit Filtern gearbeitet.
So wird sich dieses ärgerliche Ergebnis auch nicht ändern lassen.

Eine Alternative wären halbtransparente PNGs. Geckos und Opera können damit umgehen,
der IE (wer sonst) mal wieder nicht. Eine Möglichkeit, dem IE die Alpha-Transparenz
trotzdem schmackhaft zu machen (natürlich ähnlich valide wie deine Filterlösung) gibt
es nachzulesen unter http://jotbe-fx.de/daily/archives/sitenews/000024.html ...

... ausprobiert habe ich das aber noch nicht!?

Gruß

Der Hans