Schriften in Tabellenzelle mit CSS formatieren

Hallo zusammen,
die Antwort auf meine Frage ist wahrscheinlich relativ einfach, aber ich komme nicht drauf:

Ich möchte innerhalb einer Tabellenzelle drei Texte unterschiedlich mit CSS formatieren und unabhängig voneinander positionieren. Alle drei sollen jedoch vor einem gesamten Hintergrundbild stehen, das die Tabellenzelle ausfüllt.

Das Problem: Entweder stehen die Texte bei der Positionierung immer in Abhängigkeit voneinander oder jeder einzelne Text lässt sich nur mit einem eigenen Hintergrundbild versehen.

Wie mache ich das, bzw. weiß jemand ein Beispiel, wo man sich die Lösung mal anschauen kann?

Vielen Dank für die Hilfe,
Matz

Moin,

Ich möchte innerhalb einer Tabellenzelle drei Texte
unterschiedlich mit CSS formatieren und unabhängig voneinander
positionieren.

Abgesehen davon, dass sich das ein bisschen nach Tabellenlayout anhört, ist es bis hierhin ja eigentlich kein Problem. Drei Texte, drei umschließende Tags, jedes kann beliebig mit CSS formatiert werden.

Alle drei sollen jedoch vor einem gesamten
Hintergrundbild stehen, das die Tabellenzelle ausfüllt.

Dann gibst Du der Tabellenzelle das Hintergrundbild und die Texte haben innerhalb der Zelle ihre eigenen Tags, z.B. bei Absätzen. Wenn es Text innerhalb eines Absatz ist, kannst Du den Text mit umschließen.
Hört sich aber trotzdem immer noch nach böööösem Taellenlayout an.
Aber ohne Tabellenlayout geht es natürlich auf die selbe Weise.

Das Problem: Entweder stehen die Texte bei der Positionierung
immer in Abhängigkeit voneinander

Drei aufeinanderfolgende Tags stehen immer irgendwie in Abhängigkeit voneinander, es sei denn, man benutzt absolute Positionierung, was ich aber nicht unbedingt empfehlen würde. Allerdings weiß ich ja auch nicht, was Dein Ziel ist.

oder jeder einzelne Text
lässt sich nur mit einem eigenen Hintergrundbild versehen.

Das ist ja das einfachste an der Disziplin: Wenn die drei Textelemente durch das „Gruppieren“-Tag zusammengefasst werden, kann dieses Elterntag ein eigenes Hintergrundbild bekommen.

Wie mache ich das, bzw. weiß jemand ein Beispiel, wo man sich
die Lösung mal anschauen kann?

Ich hatte eher gehofft, dass Du uns zeigst, was Du eigentlich vor hast, damit man gezieltere, passendere Tipps geben kann.

Gruß,
-Efchen

Hallo Efchen,
vielen Dank für Deine Tips. Mir ging es um die getrennte Positionierung einer Dachzeile, Schlagzeile und Fließtext (untereinander). Es funktioniert immer noch nicht richtig aber ich habe es jetzt über Zeilenhöhen-Formatierung irgendwie hinbekommen.

Noch eine Nachfrage: Was ist denn gegen CSS in Kombination mit Tabellenlayouts auszusetzen, bzw die Nachteile?

Danke nochmal und viele Grüße,
Matz

Noch eine Nachfrage: Was ist denn gegen CSS in Kombination mit
Tabellenlayouts auszusetzen, bzw die Nachteile?

Tabellenlayout ist einfach falsch und sinnfrei, weil es nicht dem entspricht, wozu HTML gedacht ist. Komplexe Tabellenlayouts sind überdies nicht barrierefrei. Suchmaschinen interpretieren die Inhalte falsch - nämlich als tabellarische Daten.

Du vermischst außerdem Inhalt und Layout, was man mit moderner Arbeitsweise ja strikt trennen sollte. Dadurch ergeben sich beim Nutzer unter anderem längere Ladezeiten, weil mit jeder Seite das Layout in Form der Tabellen neu geladen werden muss. Bei strikter Trennung von Inhalt und Layout wird das Layout nur einmal in Form des Stylesheets geladen und in den Cache gestellt.

Des weiteren ist die Site für Dich viel schwerer zu warten. Kleine Layoutänderungen musst Du womöglich in allen Dateien machen, größere Änderungen sowieso. Bei richtigem CSS-Layout musst Du nur das Stylesheet austauschen.

Tabellenlayout wurde in den 1990ern eingeführt, weil es sowas wie CSS nicht gab. Damals baute man Layoutmöglichkeiten in HTML ein - obwohl es dafür ja eigentlich gar nicht gedacht war. Mit Tabellen gabs damals die einzige Möglichkeit, ansehnliche Layouts zu machen.
Aber CSS ist nun auch schon fast 10 Jahre alt und es gibt wirklich keinen Grund mehr, den Hack von damals zu benutzen. Außer vielleicht Faulheit :smile:

Aber Deine Besucher haben mehr von einer Seite ohne Tabellenlayout.
Und Dir öffnen sich viel mehr Möglichkeiten und Du kannst Deine Seite viel nutzerfreundlicher machen.

Grüße,
-Efchen