nicht angemeldet
In Tabellenzelle Text gleichzeitg oben und unten ausrichten
Hallo zusammen,
ich habe in einer Zelle, deren Höhe variabel ist, um vom Inhalt der Nachbarzelle abhängt, zwei Zeilen Text. Nun hätte ich gerne dass die erste Linie oben in der Zelle steht, und die zweite Lini unten, etwa so:
|------------|------------------ - -
| Zeile 1 | Hier steht
| | ein
| | beliebig
| | langer
| Zeile 2 | Text.
|------------|-------------------- - -
Das könnte man recht einfach mit einer dreizeiligen Tabelle machen, eine für die obere Zeile, eine zum "spannen", eine für die untere und rowspan 3 für die Zelle mit dem langen Text. Oder aber mit einer zweizeiligen Tabelle, die man in die linke Zelle einfügt. Nur sind diese Lösungen nicht ganz so elegant, machen den Code für die umgebende Tabelle unnötig kompliziert, und sind darüber hinaus in Zeiten von CSS-basierten Layouts inakzeptabel weil ja eine Tabelle nur zum Darstellen tabellarischer Daten benutzt werden sollte (die umgebende Tabelle enthält effektiv tabellarische Daten).
Sowas müsste man auch mit divs und etwas CSS hinkriegen hab ich mir gedacht. Nach viel Suchen und Testen hab ichs jedoch aufgegeben. In Latex gibt es für soche Sachen \vspace und \stretch, in HTML scheinbar nichts.
Kann mir jemand weiterhelfen?
Vielen Dank vorab,
andreas
-
hi andreas,
pack "Zeile 1" und "Zeile 2" in einen DIV und richte jeden mit margin-top bzw. margin-top bzw. margin-bottom zum übergeordneten Element (Tabellenzelle) aus.
Grüße - Frank
-
Ich verstehe nicht ganz was du meinst. Also fixe margin angaben kann ich nicht machen, da ja die höhe der zelle variieren kann. Sowas wie margin-top: auto gibt es leider nicht (siehe hier: http://de.selfhtml.org/css/eigenschaften/randabstand.htm#margin_top).
-
-
Yerf!
Nur sind diese Lösungen nicht ganz so elegant, machen den Code für die umgebende Tabelle unnötig kompliziert, und sind darüber hinaus in Zeiten von CSS-basierten Layouts inakzeptabel weil ja eine Tabelle nur zum Darstellen tabellarischer Daten benutzt werden sollte (die umgebende Tabelle enthält effektiv tabellarische Daten).
Die Frage ist, weshalb der ABstand ziwischen den Zeilen da sein soll. Haben die 2 Zeilen so wenig Bezug zueinander oder ists nur optischer Gimmick? Im ersten Fall wäre eine rowspan=2 Lösung angebracht.
Kann mir jemand weiterhelfen?
Du könntest die 2.Zeile auch über position:absolute und bottom:0 nach unten Platzieren. Das erfordert aber einen DIV mit height/width 100% und position:relativ um den kompletten Inhalt der Tabellenzelle.
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->-
Die Frage ist, weshalb der ABstand ziwischen den Zeilen da sein soll. Haben die 2 Zeilen so wenig Bezug zueinander oder ists nur optischer Gimmick? Im ersten Fall wäre eine rowspan=2 Lösung angebracht.
Das ganze ist ein Tagesprogramm, in jeder Tabellenzeile steht eine Ativität, und die 2 besagten Zeilen sind Start- und Endzeit der Aktivität. Meiner Meinung nach ist intuitiv wenn die Startzeit Aktivität am oberen und die Endezeit am unteren Rand der Beschreibung zu setzen. Um auf deine Frage zu antworten: wahrscheinlich optischer Gimmick.
Du könntest die 2.Zeile auch über position:absolute und bottom:0 nach unten Platzieren. Das erfordert aber einen DIV mit height/width 100% und position:relativ um den kompletten Inhalt der Tabellenzelle.
Jep, folgendes hab ich probiert, geht jedoch alles nicht.
In folgendem Fall befindet sich Zeile 2 irgendwo außerhalb der Tabelle (viel zu weit unten):
<td>
<div style="position: absolute; height: 100%;">
<div style="top: 0px;">zeile 1</div>
<div style="bottom: 0px;">zeile 2</div>
</div>
</td>In disen Fällen ist keine Veränderung zu erkännen (also als ob keine divs da wären)
<td>
<div style="position: relative; height: 100%;">
<div style="top: 0px;">zeile 1</div>
<div style="bottom: 0px;">zeile 2</div>
</div>
</td><td style="position: relative;">
<div style="top: 0px;">zeile 1</div>
<div style="bottom: 0px;">zeile 2</div>
</td>-
Yerf!
Das ganze ist ein Tagesprogramm, in jeder Tabellenzeile steht eine Ativität, und die 2 besagten Zeilen sind Start- und Endzeit der Aktivität. Meiner Meinung nach ist intuitiv wenn die Startzeit Aktivität am oberen und die Endezeit am unteren Rand der Beschreibung zu setzen. Um auf deine Frage zu antworten: wahrscheinlich optischer Gimmick.
Man könnte aber auch 2 Zellen durchaus rechtfertigen (und dann über vertical-align ausrichten). Ist halt die Frage wie Aufwendig die Codeänderung zum Erzeugen der Tabelle ist.
In disen Fällen ist keine Veränderung zu erkännen (also als ob keine divs da wären)
Fast richtig ist auch daneben ;-)
<td>
<div style="position: relative; height: 100%;">Hier ein positon relativ, um den Bezugspunkt zu setzen. Soweit richtig (zwar unschön, aber direkt auf die TD anwenden geht ja leider nicht...).
<div style="top: 0px;">zeile 1</div>
Zu dem top fehlt doch noch was, oder? position:absolute...
<div style="bottom: 0px;">zeile 2</div>
...hier auch
</div>
</td>Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->-
So hätte ich mir das auch gedacht... aber soviel zur Theorie! Im IE6 haut das aber leider nicht hin...
Grüße - Frank
-
-
-