Hintergrund einer Tabellenspalte verdunkeln

[Jens2]

Hallo mal wieder. :)

Problem: Ich habe auf einer Internetseite eine bestimmte Hintergrundfarbe. (z.B. #FF0000)
Nun möchte ich in CSS eine Klasse erstellen, mithilfe derer ich einzelne Tabellenspalten etwas verdunkeln kann. Dieser Effekt soll aber relativ und nicht absolut sein. Damit meine ich, dass die Hintergrundfarbe in dieser Tabellenspalte um z.B. 10% dunkler werden soll. Wenn ich einfach eine andere Hintergrundfarbe auswähle, dann hab ich hinterher das Problem, dass ich bei einer Änderung der allgemeinen Hintergrundfarbe auch immer die Klasse (und es ist nicht nur eine) ändern muss.
Eine Möglichkeit wäre es nun, ein halbtransparentes PNG zu benutzen, was ich als Hintergrundbild benutze. Allerdings ist dieses Verdunkeln auch inhaltlich wichtig und diejenigen, bei denen keine Bilder angezeigt werden (können), stehen dumm da.
Jemand eine Idee?

Gruß.

[Detlef G.]

Hallo Jens2

Problem: Ich habe auf einer Internetseite eine bestimmte Hintergrundfarbe. (z.B. #FF0000)
Nun möchte ich in CSS eine Klasse erstellen, ...

In CSS werden keine Klassen erstellt. Du kannst HTML-Elemente klassifizieren, ihnen eine Klasse zuweisen. Dann kannst du diesen Klassen mittels CSS Eigenschaften zuweisen.

... Dieser Effekt soll aber relativ und nicht absolut sein. Damit meine ich, dass die Hintergrundfarbe in dieser Tabellenspalte um z.B. 10% dunkler werden soll. Wenn ich einfach eine andere Hintergrundfarbe auswähle, dann hab ich hinterher das Problem, dass ich bei einer Änderung der allgemeinen Hintergrundfarbe auch immer die Klasse (und es ist nicht nur eine) ändern muss.

Warum die Klasse ändern?
Es ist doch kein Problem, die Eigenschaften der Klasse(n) deren Hintergrund abgedunkelt werden solle zu ändern.

body {  
 background-color:f00;  
}  
.Klasse1, .Klasse2, .Klasse3, .Klasse4 {  
 background-color:e50000;  
}  

... Allerdings ist dieses Verdunkeln auch inhaltlich wichtig und diejenigen, bei denen keine Bilder angezeigt werden (können), stehen dumm da.

Wenn es inhaltlich wichtig ist, darf es auch nicht nur per CSS erfolgen. Dann solltest du den Inhalt dieser Zellen in ein zu diesem speziellen Inhalt passenderes Element einschließen (em, strong, del, ...). Eventuell könntest du dieses dann zum Blockelement machen und ihm die Hintergrundfarbe zuweisen:

td strong {  
 display:block;  
 font-weight:normal;  
 background-color:e50000;  
}  

Schaue dir deine Seiten unbedingt auch in einem Textbrowser oder zumindest mit deaktivierten Grafiken _und_ deaktiviertem CSS an. Auch dann müssen sie benutzbar und möglichst übersichtlich sein und alle notwendigen Inhalte darstellen oder kurz erklären.

Auf Wiederlesen
Detlef

[MudGuard]

Hi,

background-color:f00;
background-color:e50000;
background-color:e50000;

Warum gibst Du ungültige Werte an?

cu,
Andreas

[Detlef G.]

Hallo MudGuard

background-color:f00;
background-color:e50000;
background-color:e50000;

Warum gibst Du ungültige Werte an?

Ups
Bin ich blind, liegts an der Hitze schon die ganze Zeit?
Wenn ich das wüsste ...

Auf Wiederlesen
Detlef

[Detlef G.]

Hallo,

body {  
 background-color:#f00;  
}  
.Klasse1, .Klasse2, .Klasse3, .Klasse4 {  
 background-color:#e50000;  
}  
  
td strong {  
 display:block;  
 font-weight:normal;  
 background-color:#e50000;  
}  

Auf Wiederlesen
Detlef

[Gunnar Bittersmann]

Hello out there!

Nun möchte ich in CSS eine Klasse erstellen, mithilfe derer ich einzelne Tabellenspalten etwas verdunkeln kann. Dieser Effekt soll aber relativ und nicht absolut sein.

Die 'opacity'-Eigenschaft (CSS3, aber schon in etlichen Browsern implementiert) wirkt auf Vorder- und Hintergrund. AFAIK gibt es keine Möglichkeit, die Hintergrundfarbe teiltransparent und die Vordergrundfarbe (Schrift) opak zu machen.

Wenn ich einfach eine andere Hintergrundfarbe auswähle, dann hab ich hinterher das Problem, dass ich bei einer Änderung der allgemeinen Hintergrundfarbe auch immer die Klasse (und es ist nicht nur eine) ändern muss.

Wo ist das Problem? Fasse die Angabe der Hintergrundfarbe für alle diese Klassen zusammen und plaziere sie im Stylesheet direkt vor oder hinter der Angabe der Hintergrundfarbe der Seite:

body  
{  
  background-color: #F00;  
}  
  
.foo, .bar, .baz  
{  
  background-color: #C00;  
}  
  
/* ... */  
  
.foo  
{  
  /* andere Angaben für Klasse 'foo' */  
}  
  
.bar  
{  
  /* andere Angaben für Klasse 'bar' */  
}  
  
.baz  
{  
  /* andere Angaben für Klasse 'baz' */  
}

See ya up the road,
Gunnar