windsurfnorderney: Kann die Hintergrundfarbe auch eingerückt werden?

Hallo zusammen,

ich habe eine Tabelle in der ich den Inhalt von manchen Zeilen links einrücke. Dies mache ich mit CSS-Klassen welche in den entsprechenden Zeilen in der ersten Zelle steht.

td.links_eingerueckt {
  padding-left: 20px;
}

Nun habe ich manche dieser Zeilen noch mit einer Hintergrundfarbe versehen. Diese erscheint über die ganze Zeile. Ich hätte allerdings gerne, dass die Hintergrundfarbe genauso eingerückt ist wie der Zelleninhalt.

Gibt es einen Weg dies zu realisieren ohne die erste Spalte der Tabelle in zwei Spalten zu teilen.

Wer kann mir helfen. Bin für alles dankbar.

  1. hi,

    Nun habe ich manche dieser Zeilen noch mit einer Hintergrundfarbe versehen. Diese erscheint über die ganze Zeile. Ich hätte allerdings gerne, dass die Hintergrundfarbe genauso eingerückt ist wie der Zelleninhalt.

    packe noch einen div in die zellen, gib ihm die hintergrundfarbe, und halte ihn mit margin-left auf abstand.

    gruss,
    wahsaga

  2. Hi!

    Nun habe ich manche dieser Zeilen noch mit einer Hintergrundfarbe versehen. Diese erscheint über die ganze Zeile. Ich hätte allerdings gerne, dass die Hintergrundfarbe genauso eingerückt ist wie der Zelleninhalt.

    Gibt es einen Weg dies zu realisieren ohne die erste Spalte der Tabelle in zwei Spalten zu teilen.

    Ich weiss ja nicht, was genau du vorhast, das klingt mir aber nach einem 'Textmarker-Effekt', den du machen moechtest. Guck doch mal das an:

    .backbox { background-color:#ececec; padding:1px; margin:0px; }

    und dann die gewuenschten Bereiche in <span class="backbox"> setzen.

    Ist es das, was du suchst?

    Herzliche Gruesse

    Nicola

  3. Hallo,

    Wie wäre es, wenn du einfach das einrücken durch eine zusätzliche Spalte machst? Dann kannst du die Hintergrundfarbe genau so anzeigen lassen wie du es möchtest.
    Ich weiß, dass man immer mehr mit CSS macht, um Struktur/Inhalt noch besser von Layout/Design zu trennen, aber manchmal finde ich, dass es eben auch einfacher geht ;)

    Gruß,
      S.Goertz

  4. Also irgendwie funkt das alles nicht so wie es soll.
    Bisher eine "eingerückte Zeile ungefähr so aus:

    <tr style="background-color:#336699;"><td style="padding-left: 20px;">Hier steht ein select</td><td>Hier steht ein Textfeld</td><td></td></tr>

    Jetzt habe ich es wie folgt probiert:

    <tr><td style="padding-left: 20px;"><div style="background-color:#336699; margin-left:30px;">Hier steht ein select</div></td><td style="background-color:#336699;">Hier steht ein Textfeld</td><td style="background-color:#336699;"></td></tr>

    Aber das funkt genauso wenig. Habe ich euch einfach nur falsch verstanden, oder steh ich mal wieder wie der Ochs vorm Berg?
    Bitte helft mir!