Hintergrundfarbe verändern

[Kalle_B]

Hallöle,

ich habe eine Tabelle, in der einige Zeilen und einige Spalten farbig hinterlegt sind, also etwa:

.bgrot {background:#f00}
.bgruen{background:#0f0}

Auf den Kreuzungspunkten soll eine dritte Farbe erscheinen:

<td class='bgrot bggruen'>...

So geht's natürlich nicht. Gibt es eigentlich in CSS die Möglichkeit, eine Kombination von Klassen gesondert zu behandeln, etwa

(.bgrot && .bggruen) {background:#ff0}

Liebe Grüße, Kalle

[Kalle_B]

mir fällt eben ein, dass man ja in CSS vieles einzeln machen kann:

margin-bottom, padding-left, border-top ...

Kann man auch eine einzelne Farbe R, G oder B verändern?

.bg_rot {background:#f000}

.bg_blasser {background-red:#faa}

Habe in SelfHTML nichts dergleichen gefunden.

[D.R.]

Hallo,

Kann man auch eine einzelne Farbe R, G oder B verändern?

.bg_rot {background:#f000}

.bg_blasser {background-red:#faa}

nein.

mfg. Daniel

[D.R.]

Hallo,

Gibt es eigentlich in CSS die Möglichkeit, eine Kombination von Klassen gesondert zu behandeln, etwa

(.bgrot && .bggruen) {background:#ff0}

Du musst einfach nur

.bgrot.bggruen {background:#ff0;}

schreiben.

mfg. Daniel

[Kalle_B]

Du musst einfach nur

.bgrot.bggruen {background:#ff0;}

schreiben.

Joop, das ist es, danke.

Habe noch Prozentangaben gefunden, aber die beziehen sich offenbar nicht - wie sonst üblich - auf das Elternelement:

<div style='width:10em; height:10em; background-color:#888'>
  <div style='width:8em; height:8em; background-color:rgb(100%,50%,50%)'>
    <div style='width:6em; height:6em; background-color:#844'>
    </div>
  </div>
</div>

Das kleinste Quadrat sollte sich nicht unterscheiden vom mittleren. Tut es aber.

Kalle

[D.R.]

Hallo,

Habe noch Prozentangaben gefunden, aber die beziehen sich offenbar nicht - wie sonst üblich - auf das Elternelement

Hast du dir das <http://de.selfhtml.org/css/formate/wertzuweisung.htm#farben@title=entsprechende SELFHTML-Kapitel> durchgelesen?

mfg. Daniel

[Kalle_B]

Hallo,

Hast du dir das <http://de.selfhtml.org/css/formate/wertzuweisung.htm#farben@title=entsprechende SELFHTML-Kapitel> durchgelesen?

Ja, daher habe ich es:
"... 100% (maximaler Anteil der entsprechenden Farbe) ..."

Wenn ich width:100% angebe, geht das Element in der Regel _nicht_ aus dem Elernelement heraus. Es ist also nicht das Fenster, sondern das Elternelement gemeint.

Prozent heisst: Von Hundert. Aber was ist Hundert? - mal so, mal so. Und im IE immer wieder nochmal anders.

Kalle

[D.R.]

Hallo,

Ja, daher habe ich es:
"... 100% (maximaler Anteil der entsprechenden Farbe) ..."

Angenommen du hast 3 Einer mit Farbe (Rot, Grün, Blau). Jeder der Einer enthält 255ml Farbe.
Jetzt möchtest du diese Farben in einem Einer mischen, der ein Fassungsvermögen von - sagen wir - einem Liter hat.

Also stellst du eine Liste auf: 100% vom ersten Eimer, 50% vom 2. Eimer und 70% vom 2. Eimer.

Du fängst mit dem roten Einer an und kippst *100% der entsprechenden Farbe* in den großen Einer…

Prozent heisst: Von Hundert. Aber was ist Hundert?

Das das Gesamtvolumen der Farbe (255ml). 100% der entspr. Farbe != 100% der Hintergrundfarbe oder so…

mal so, mal so. Und im IE immer wieder nochmal anders.

In diesem Fall nicht.

mfg. Daniel

[Kalle_B]

Hallo,

Angenommen du hast 3 Einer mit Farbe (Rot, Grün, Blau). Jeder der Einer enthält 255ml Farbe.
Jetzt möchtest du diese Farben in einem Einer mischen, der ein Fassungsvermögen von - sagen wir - einem Liter hat.

Also stellst du eine Liste auf: 100% vom ersten Eimer, 50% vom 2. Eimer und 70% vom 2. Eimer.

Du fängst mit dem roten Einer an und kippst *100% der entsprechenden Farbe* in den großen Einer…

Ja, fein. Und nun möchte ich ein Kindelement auch noch einfärben. In den uersprünglichen Eimern sind aber nicht mehr 255ml.

Nach dem Rezept nehme ich also wieder 100% vom ersten Eimer. Der ist leider leer, also diese Farbe nicht. 50% vom zweiten Eimer ist die Hälfte von der noch vorhandenen Hälfte ...

Oder habe ich bei der Prozentrechnung in der Schule nicht aufgepasst?

Da wollte mir doch neulich jemand 19% MwSt auf 20 Euro berechnen und ich sollte 39 Euro bezahlen. Ich glaube, CSS hiess der oder so ähnlich.

Kalle

[D.R.]

Hallo,

In den uersprünglichen Eimern sind aber nicht mehr 255ml.

Die werden gleich wieder neu aufgefüllt, weil sonst müsste man ja erst wieder mehrere Mischungen machen, um eine bestimmte Farbe zu erhalten. ;-)

Nach dem Rezept nehme ich also wieder 100% vom ersten Eimer. Der ist leider leer, also diese Farbe nicht. 50% vom zweiten Eimer ist die Hälfte von der noch vorhandenen Hälfte ...

Wie gesagt: Die Eimer werden immer wieder neu aufgefüllt.

Oder habe ich bei der Prozentrechnung in der Schule nicht aufgepasst?
Da wollte mir doch neulich jemand 19% MwSt auf 20 Euro berechnen und ich sollte 39 Euro bezahlen. Ich glaube, CSS hiess der oder so ähnlich.

Kann ich mir nicht vorstellen…

mfg. Daniel

[Timo "God's Boss" Reitz]

Prozent heisst: Von Hundert. Aber was ist Hundert? - mal so, mal so.

Natürlich. Was die Prozentpunkte bedeuten, ist von Eigenschaft zu Eigenschaft verschieden, manches wäre ja wohl auch ziemlich unsinnig.
Prozent bei Farbangaben ist übrigens passend zum RGB-Farbraum.

Und im IE immer wieder nochmal anders.

Nicht immer, wie zum Beispiel in diesem Fall.

[Kalle_B]

Joop, das ist es, danke.

Aber nur im FF. Der IE5 und Opera machen das mittlere und kleine Quadrat gelb:

<style type='text/css'>
.bg_rot  {background:#f00}
.bg_gruen{background:#0f0}
.bg_rot .bg_gruen{background:#ff0}
</style>

<div style='width:10em; height:10em' class=bg_rot>
  <div style='width:8em; height:8em' class=bg_gruen>
    <div style='width:6em; height:6em' class='bg_rot bg_gruen'>
    </div>
  </div>
</div>

[D.R.]

Hallo,

Joop, das ist es, danke.

Aber nur im FF. Der IE5 und Opera machen das mittlere und kleine Quadrat gelb:

Welchen Firefox benutzt du? Meiner reagiert genauso wie IE7 und Opera. Das ist ja auch richtig:

<style type='text/css'>
.bg_rot  {background:#f00}

Wirkt auf Elemente mit der Klasse „bg_rot“ und hat eine vergleichsweise niedrige Spezifität.

.bg_gruen{background:#0f0}

Wirkt auf Elemente mit der Klasse „bg_gruen“ und hat eine vergleichsweise niedrige Spezifität.

.bg_rot .bg_gruen{background:#ff0}

Wirkt auf Elemente mit der Klasse „bg_gruen“, die sich innerhalb von Elementen mit der Klasse „bg_rot“ befinden und hat eine hohe Spezifität.

<div style='width:10em; height:10em' class=bg_rot>

Wird Rot (1. Regel).

<div style='width:8em; height:8em' class=bg_gruen>

Wird gelb (letzte Regel).

<div style='width:6em; height:6em' class='bg_rot bg_gruen'>

Wird gelb (letzte Regel).

</div>
  </div>
</div>

Wolltest du vielleicht „.bg_rot.bg_gruen“ selektieren? (man achte auf die Anzahl der Leerzeichen ;-))

mfg. Daniel

[Kalle_B]

Hallo,

Wolltest du vielleicht „.bg_rot.bg_gruen“ selektieren? (man achte auf die Anzahl der Leerzeichen ;-))

Ja, habe ich. Ursprünglich:
.bg_rot.bg_gruen{background:#ff0}

Kontrolle im IE5: Mittleres und kleines Quadrat gelb.

Da habe ich geändert auf:
.bg_rot .bg_gruen{background:#ff0}

ohne Erfolg im IE5. Dann noch im Opera geschaut.

Aber du hast recht, FF und Opera haben mit der _ursprünglichen_ Version drei Farben, der IE immer nur zwei.

MfG Kalle

[D.R.]

Hallo,

Wolltest du vielleicht „.bg_rot.bg_gruen“ selektieren? (man achte auf die Anzahl der Leerzeichen ;-))

Ja, habe ich. Ursprünglich:
.bg_rot.bg_gruen{background:#ff0}

Kontrolle im IE5: Mittleres und kleines Quadrat gelb.

Da habe ich geändert auf:
.bg_rot .bg_gruen{background:#ff0}

Das Leerzeichen ist aber der Nachfahrenselektor.

ohne Erfolg im IE5. Dann noch im Opera geschaut.

Aber du hast recht, FF und Opera haben mit der _ursprünglichen_ Version drei Farben, der IE immer nur zwei.

Mit IE5 kann ich nicht testen, aber mein Beispiel aus diesem Thread funktioniert auf jeden Fall im IE7, Opera (9) und natürlich auch Firefox (2).

Funzt *das* evtl. im IE5? Ansonsten würde ich den 5-er aber einfach ignorieren. Vor allem bei solchen Kleinigkeiten.

mfg. Daniel

[Kalle_B]

Hallo,

danke für dein Muster.

Im IE5 sind
Das Element hat die Klasse a, b und c
Das Element hat die Klasse c

beide blau. Kann ich ignorieren, ist okay. Habe den nur zum Testen als Vertreter der alten Generation. Und die Erfahrung lehrt, dass Winzigweich die Fehlinterpretationen aus alten Versionen gerne weiterführt, sozusagen aus Tradition. Nein, aus Kompatibilität.

Kalle

[D.R.]

Hallo,

danke für dein Muster.

Im IE5 sind
Das Element hat die Klasse a, b und c
Das Element hat die Klasse c

beide blau.

Hm, das würde also bedeuten, dass er .a.b.c als Fehler erkennt und durch .c ersetzt. Da dieser Selektor ganz unten steht, bekommt er auch noch die höchste Spezifität, weshalb .c Rot wird.

Naja, da kann man wohl nix machen.

Habe den nur zum Testen als Vertreter der alten Generation.

Und die „neue Generation“? Hast du davon auch welche?

Und die Erfahrung lehrt, dass Winzigweich die Fehlinterpretationen aus alten Versionen gerne weiterführt, sozusagen aus Tradition. Nein, aus Kompatibilität.

Naja, an dieser Stelle handelt es sich ja eindeutig um einen Bug, weshalb wahrscheinlich eh keine Probleme auftauchen dürften.

mfg. Daniel

[MudGuard]

Hi,

Ja, habe ich. Ursprünglich:
.bg_rot.bg_gruen{background:#ff0}

Damit sind IE bis mind. einschließlich IE 6 hoffnungslos überfordert.

cu,
Andreas

[MudGuard]

Hi,

Habe noch Prozentangaben gefunden, aber die beziehen sich offenbar nicht - wie sonst üblich - auf das Elternelement:

Was verstehst Du bei "beziehen sich offenbar nicht  - wie sonst üblich - auf das Elternelement" unter "wie sonst üblich"?
Das würde ja nahelegen, daß sich Prozentangaben üblicherweise auf das Elternelement beziehen.

Wie sonst üblich? Also:

So wie bei background-position (also NICHT bezogen auf das Elternelement)?
So wie bei bottom (also NICHT bezogen auf das Elternelement [1])?
So wie bei height (also NICHT bezogen auf das Elternelement [1])?
So wie bei left (also NICHT bezogen auf das Elternelement [1])?
So wie bei margin (also NICHT bezogen auf das Elternelement [1])?
So wie bei max-height (also NICHT bezogen auf das Elternelement [1])?
So wie bei max-width (also NICHT bezogen auf das Elternelement [1])?
So wie bei min-height (also NICHT bezogen auf das Elternelement [1])?
So wie bei min-width (also NICHT bezogen auf das Elternelement [1])?
So wie bei padding (also NICHT bezogen auf das Elternelement [1])?
So wie bei right (also NICHT bezogen auf das Elternelement [1])?
So wie bei text-indent (also NICHT bezogen auf das Elternelement [1])?
So wie bei top (also NICHT bezogen auf das Elternelement [1])?
So wie bei vertical-align (also NICHT bezogen auf das Elternelement [1])?

Oder so wie bei font-size (also ausnahmsweise bezogen auf das Elternelement)?

<div style='width:8em; height:8em; background-color:rgb(100%,50%,50%)'>
    <div style='width:6em; height:6em; background-color:#844'>
Das kleinste Quadrat sollte sich nicht unterscheiden vom mittleren. Tut es aber.

Das erste hat die Farbe  rgb(255,127,127).
Das zweite hat die Farbe rgb(136, 68, 68).

Wieso meinst Du, daß sich beide nicht unterscheiden sollten?

Bei rgb-Farbangaben beziehen sich Prozentwerte NICHT auf das Elternelement, sondern auf die vollständig vorhandene Farbe.

[1] das Elternelement kann zwar, muß aber nicht, den containing block bilden.

cu,
Andreas

[Kalle_B]

Hi,

Was verstehst Du bei "beziehen sich offenbar nicht  - wie sonst üblich - auf das Elternelement" unter "wie sonst üblich"?
Das würde ja nahelegen, daß sich Prozentangaben üblicherweise auf das Elternelement beziehen.

Ja, das habe ich gemeint.

So wie bei height (also NICHT bezogen auf das Elternelement [1])?

<div style='width:30em; height:30em; background:#fcc'>
  <div style='width:50%; height:50%; background:#cfc'>
  </div>
</div>

Zum Beispiel. 50% Höhe ist nicht die des Bildschirms, sonders des umgebenden div.

Bei Farbangaben ist das eben _nicht_ so, was sich hier geklärt hat.

Kalle

[MudGuard]

Hi,

<div style='width:30em; height:30em; background:#fcc'>
  <div style='width:50%; height:50%; background:#cfc'>
  </div>
</div>

Zum Beispiel. 50% Höhe ist nicht die des Bildschirms, sonders des umgebenden div.

Aber nur, weil hier der containing block durch das parent element gebildet wird (was nicht notwendigerweise immer so ist, siehe z.B. <div><span><a>bla</a></span></div> - parent von a ist das span, aber der containing block wird vom div gebildet).

Bei Farbangaben ist das eben _nicht_ so, was sich hier geklärt hat.

Bei fast keiner Eigenschaft beziehen sich Prozentangaben auf die entsprechende Eigenschaft des Elternelements.

cu,
Andreas

[wucher wichtel]

Hallo!

So geht's natürlich nicht. Gibt es eigentlich in CSS die Möglichkeit, eine Kombination von Klassen gesondert zu behandeln, etwa

(.bgrot && .bggruen) {background:#ff0}

Nein. CSS ist keine Programmier- oder Scriptsprache. Es gibt keine Vergleichsoperatoren.

ciao, ww

[Manuel B.]

Ich grüsse den Cosmos,

.bgrot {background:#f00}
.bgruen{background:#0f0}

Auf den Kreuzungspunkten soll eine dritte Farbe erscheinen:
<td class='bgrot bggruen'>...

Das sind keine Kreuzungspunkte, du weisst einer Zelle zwei Klassen zu. Logischerweise überschreibt die zwite Klasse die identischen Werte der ersten Klasse.

So geht's natürlich nicht. Gibt es eigentlich in CSS die Möglichkeit, eine Kombination von Klassen gesondert zu behandeln, etwa
(.bgrot && .bggruen) {background:#ff0}

Nein

Wenn du die "Kreuzungspunkte" verändern willst, schonmal probiert, den Zellenrahmen zu formatieren?

Möge das "Self" mit euch sein

[D.R.]

Hallo,

So geht's natürlich nicht. Gibt es eigentlich in CSS die Möglichkeit, eine Kombination von Klassen gesondert zu behandeln, etwa
(.bgrot && .bggruen) {background:#ff0}

Nein

Warum behauptet ihr eigentlich alle, dass das nicht möglich sei?

Gegenbeispiel

mfg. Daniel

[Manuel B.]

Ich grüsse den Cosmos,

Warum behauptet ihr eigentlich alle, dass das nicht möglich sei?

Weil DAS

(.bgrot && .bggruen) {background:#ff0}

nunmal nicht möglich ist. Das die Kombination von Klassen erlaubt ist, hat nie jemand bestritten, ich hab sogar erklärt, was dabei passiert.
Also erstmal lesen und verstehen, dann rummotzen.

Möge das "Self" mit euch sein

[D.R.]

Hallo,

Warum behauptet ihr eigentlich alle, dass das nicht möglich sei?

Weil DAS

(.bgrot && .bggruen) {background:#ff0}

nunmal nicht möglich ist.

Warum hast du dann auf eine Alternative verwiesen? (Rahmen)

mfg. Daniel

[Manuel B.]

Ich grüsse den Cosmos,

Warum hast du dann auf eine Alternative verwiesen? (Rahmen)

Weil der OP gesagt hat, er wil _zwischen_ den Zellen eine andere Farbe. Zumindest hab ich es so verstanden und entsprechend ist meine Antgwort ausgefaslölen ;)

Möge das "Self" mit euch sein

[Timo "God's Boss" Reitz]

Da eine Lösung ja bereits genannt wurde, hier noch ein paar Anmerkungen.

.bgrot {background:#f00}
.bgruen{background:#0f0}

Diese Klassen sind höchst unklug gewählt. Sie beziehen sich nämlich nicht auf die inhaltliche Bedeutung der Elemente, sondern auf ein bestimmtes Aussehen.

Auf den Kreuzungspunkten soll eine dritte Farbe erscheinen:
<td class='bgrot bggruen'>...

Und hier wird es dann auch schon absurd. Wie soll etwas gleichzeitig rot und grün sein? Gelb ist eine davon verschiedene Farbe.