Ecke einer Tabellenzelle einfärben

[Eddi]

Hi,
ich möchte gerne innerhalb einer Tabellenzelle die obere rechte Ecke einfärben, also ein kleines grünes Dreieck mit Abstand 0 zur rechten Tabellenzellenrand und Abstand 0 zum oberen Tabellenzellenrand positionieren.

Ich kriegs aber nicht hin,obwohl ich schon graume Zeit versuche und suche.

Geht es überhaupt? Und wie?

Gruß, Ed

[Der Martin]

Hallo,

ich möchte gerne innerhalb einer Tabellenzelle die obere rechte Ecke einfärben, also ein kleines grünes Dreieck mit Abstand 0 zur rechten Tabellenzellenrand und Abstand 0 zum oberen Tabellenzellenrand positionieren.

frage dich als erstes: Ist dieses grüne Eckchen Inhalt oder Verzierung? Transportiert es eine Aussage oder soll es einfach nur nett aussehen? Davon hängt ab, wie es eingebunden werden sollte.

Wenn es Inhalt ist, sollte es im Markup stehen - als img-Element. Und zwar absolut positioniert mit top:0; right:0.
Wenn es nur Verzierung ist, gehört es ins CSS - als background-image, das oben rechts in seinem Element positioniert ist und nicht wiederholt wird.

Ich kriegs aber nicht hin,obwohl ich schon graume Zeit versuche und suche.
Geht es überhaupt? Und wie?

Was hast du denn bisher versucht?

Ciao,
 Martin

[Eddi]

Hi Martin,

frage dich als erstes: Ist dieses grüne Eckchen Inhalt oder Verzierung?

Es ist Inhalt, denn es hebt diese Zelle der Tabelle von anderen Zellen ab. Zuvor hatte ich einfach den Text dieser Zelle fett gedruckt.

Wenn es Inhalt ist, sollte es im Markup stehen - als img-Element. Und zwar absolut positioniert mit top:0; right:0.
Wenn es nur Verzierung ist, gehört es ins CSS - als background-image, das oben rechts in seinem Element positioniert ist und nicht wiederholt wird.

Warum dieser Unterscheid?

Was hast du denn bisher versucht?

Deine 2. Altenative.
Aber mit  background:url(img/kleines_gruenes_eckchen.png) no-repeat top right; komme ich nicht an die beiden Ränder der Zelle.

Gruß, Ed

[Eddi]

Was hast du denn bisher versucht?

Deine 2. Altenative.
Aber mit  background:url(img/kleines_gruenes_eckchen.png) no-repeat top right; komme ich nicht an die beiden Ränder der Zelle.

Und nun auch die 1.Alternative, aber auch

<img src='img/kleines_gruenes_eckchen.png' border='0' alt='' style='position:absolute;top:0px;right:0px'>

bringt mir das Eckchen nur an den oberen Rand der Tabelle, nicht der Zelle.

Und position:relative bringt es mir in die Zelle aber an den oberen rechten Rand des Textes, nicht den der Zelle.

Gruß, Ed

[ChrisB]

Hi,

frage dich als erstes: Ist dieses grüne Eckchen Inhalt oder Verzierung?

Es ist Inhalt, denn es hebt diese Zelle der Tabelle von anderen Zellen ab.

Wenn es nur das macht, dann ist es Verzierung.

Zuvor hatte ich einfach den Text dieser Zelle fett gedruckt.

Wenn es Inhalt ist, sollte es im Markup stehen - als img-Element. Und zwar absolut positioniert mit top:0; right:0.
Wenn es nur Verzierung ist, gehört es ins CSS - als background-image, das oben rechts in seinem Element positioniert ist und nicht wiederholt wird.

Warum dieser Unterscheid?

Weil HTML die Inhalte auszeichnet, und CSS für die Darstellung zuständig ist.

Was hast du denn bisher versucht?

Deine 2. Altenative.
Aber mit  background:url(img/kleines_gruenes_eckchen.png) no-repeat top right; komme ich nicht an die beiden Ränder der Zelle.

Dann ist der „Rand“ vermutlich nicht da, wo du ihn vermutest.

MfG ChrisB

[Eddi]

Dann ist der „Rand“ vermutlich nicht da, wo du ihn vermutest.

Guter Hinweis, danke.

Nun habe ich das Eckchen oben rechts, nachdem ich einfach der Tabellenzelle diese Klasse zugewiesen habe.

Problem: Der komplette Tabellenzellenhintergrund dieser Zelle(n) ist nunb weiß. Eigentlich hat der Rest der Tabelle eine Zebrastreifenstruktur, die ich aber innerhalb des Scriptes in einer Schleife erzeuge.

  
          $farb_i++;  
  
          if  ($farb_i %2 !=0)  
          {  
               $table_cell_colour=$cell_colour;  
          }  
          else  
          {  
               $table_cell_colour=$cell_colour1;  
          }  
  
  
<td bgcolor='$table_cell_colour'>...  
  

Gruß, Ed

[ChrisB]

Hi,

Problem: Der komplette Tabellenzellenhintergrund dieser Zelle(n) ist nunb weiß. Eigentlich hat der Rest der Tabelle eine Zebrastreifenstruktur, die ich aber innerhalb des Scriptes in einer Schleife erzeuge.

<td bgcolor='$table_cell_colour'>...

Bitte nutze auch dafür CSS - das bgcolor-Attribut in HTML ist keins.

Vergebe eine Klasse für die Tabellen-Zellen, und formatiere sie darüber. (Oder informiere dich über CSS 3-Pseudoklassen, mit denen man das auch ohne Eingriff in den HTML-Code machen kann.)

Und beim Setzen des Hintergrundbildes nutze dann nicht die zusammenfassende background-Eigenschaft, sondern setze die einzelnen Eigenschaften separat, damit sie die Hintergrundfarbe nicht überschreiben.

MfG ChrisB

[Eddi]

Vergebe eine Klasse für die Tabellen-Zellen, und formatiere sie darüber.

Und beim Setzen des Hintergrundbildes nutze dann nicht die zusammenfassende background-Eigenschaft, sondern setze die einzelnen Eigenschaften separat, damit sie die Hintergrundfarbe nicht überschreiben.

Hat alles bestens funktioniert, danke für die Hilfestellung.

Gruß, Ed

[Gunnar Bittersmann]

@@Eddi:

nuqneH

Vergebe eine Klasse für die Tabellen-Zellen, und formatiere sie darüber.
Hat alles bestens funktioniert, danke für die Hilfestellung.

Du hättets dem Eingeklammerten mehr Beachtung schenken sollen (bzw. ChrisB hat das Falsche eingeklammert). Hier isses nochmal:

(Oder informiere dich über CSS 3-Pseudoklassen, mit denen man das auch ohne Eingriff in den HTML-Code machen kann.)

Zebrastreifen

Qapla'

[apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Du hättets dem Eingeklammerten mehr Beachtung schenken sollen (bzw. ChrisB hat das Falsche eingeklammert). Hier isses nochmal:

(Oder informiere dich über CSS 3-Pseudoklassen, mit denen man das auch ohne Eingriff in den HTML-Code machen kann.)

Zebrastreifen

Der OP möchte eine Tabellenzelle von allen anderen abheben, der Rest ist Zebrastreifen. Dann also wohl doch eine Klasse.

Matthias

[Gunnar Bittersmann]

@@apsel:

nuqneH

Der OP möchte _eine_ Tabellenzelle von allen anderen abheben, der Rest ist Zebrastreifen. Dann also wohl doch eine Klasse.

In dem betreffendes Teil des Postings ging es um die Zebrastreifen; und für diese sind keine Klasse(n) notwendig.*

Qapla'

* IEs mit deaktiviertem JavaScript mal vernachlässigt