Probleme mit Hoehe von Tabellenzeilen

[Der Martin]

Hallo Tim,

zunächst muss ich eins vorweg sagen, damit ich hier keine Prügel kriege: Tabellen zum Layouten zu benutzen, ist alles andere als eine empfohlene Methode. Wenn ich irgendeine Idee hätte, wie man deine Layout-Idee - so einfach sie sich im ersten Moment auch anhört - ohne diese Tabelle lösen könnte, würde ich dir nicht beim Bau weiterer Tabellen halfen.

Aber du hast eine trickreiche Aufgabenstellung: Du willst nämlich das Browserfenster in ein festes Raster mit prozentual vorgegebenen Maßen einteilen. Da man Hintergrundbilder nicht skalieren kann, wird vermutlich auch ein CSS-basierter Ansatz wüst sein.

Das generelle Tabellenlayout, mit Zellen verbinden und allem, hat schon wunderbar geklappt und ist genau so wie ich es wollte, jedoch hört HTML bzw. CSS nicht auf meine Höhenangaben, es ignoriert sie einfach oder wendet sie nicht richtig an.

Du widersprichst dir. Wenn du sagst, dass deine Höhenangaben nicht wie gewünscht umgesetzt werden, dann hat es eben *nicht* wunderbar geklappt.
Aber deine Tabelle ist ja auch ein kompliziertes Monster; ich hab mir erst eine Skizze machen müssen, um zu verstehen, wie die vielen Maßangaben und die rowspans zusammenpassen sollten.

3 Tabellenzeilen, die jeweils die Höhe der Flaggenfarben haben, welche sind: Oben Gelb, 50%, darunter Blau, 25%, und unten Rot wieder mit 25%.

Dein Problem ist, dass sich die drei Spalten gegenseitig in ihrer Höhe beeinflussen. Du hast versucht, das Layout zeilenweise zu erstellen - warum nicht spaltenweise? Und wenn schon Tabellenlayout, dann schon "richtig" böse mit verschachtelten Tabellen. Ich skizziere mal ein Layout, wie ich es vielleicht vor fünf Jahren in völliger Unkenntnis von CSS gemacht haben könnte:

<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
 <tr>
  <td width="10%"> [1] </td>
  <td width="80%"> [2] </td>
  <td width="10%"> [3] </td>
 </tr>
</table>

So, damit habe ich schon drei senkrechte Streifen. Unsichtbar, aber schon mit den gewünschten Breiten. Anstatt der [1],[2],[3], die ich oben nur als Platzhalter reingeschrieben habe, setze ich weitere Tabellen in diese drei Zellen. Dabei setze ich für [1] und [3]:

<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
    <tr height="50%"><td bgcolor="#FFFF00"> </td></tr>
    <tr height="25%"><td bgcolor="#FF0000"> </td></tr>
    <tr height="25%"><td bgcolor="#0000FF"> </td></tr>
   </table>

Und anstatt der [2] setze ich ein:

<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
    <tr height="10%"><td bgcolor="#FFFF00"> </td></tr>
    <tr height="80%"><td bgcolor="#FFFFFF"> *** INHALT *** </td></tr>
    <tr height="10%"><td bgcolor="#0000FF"> </td></tr>
   </table>

Das ist nun, wenn man es alles zusammensetzt, wieder ein Tabellenmonster - aber es hat keine rowspans und colspans mehr, und die Höhen der Zellen beeinflussen nicht mehr die Nachbarspalten, weil sie völlig voneinander getrennt sind.

[...] sondern das in dem Textfeld ein Scrollbalken kommt, so dass man nicht die ganze Seite nach unten scrollt, sonden nur das Textfeld.

Da sollte es genügen, ein div mit height:100%; overflow:auto; in die mittlere Zelle zu setzen. ;-)

Dies hat aber erstmal geringere Priorität, ...

Ist aber bedeutend leichter zu realisieren.
So long,

Martin