Tabellen dehnt sich nicht vertikal aus

[Sandra]

Hallo,
Ich habe mein Grundlayout mit einer Haupttabelle aufgebaut. In dieser Tabelle befindet sich eine schmale Kopftabelle (Tabelle oben), die sich über 2 darunterliegende Tabellen (Menü-Tabelle links und Inhalts-Tabelle rechts) horizontal ausdehnt. In der linken Menütabelle befinden sich 2 weitere Tabellen für die Navigationsbuttons und ein Bild. Die Tabelle mit den Navigationsbuttons ist mit valign="top" nach oben ausgerichtet, die Tabelle mit dem Bild mit valign="bottom" nach unten.

Vergrößert sich nun der Inhalt der rechten Inhaltstabelle, so das sie sich vertikal ausdehnt, soll sich die linke Menütabelle mit ausdehnen. Das Bild soll dabei unten ausgerichtet bleiben. Ich habe die Höhe der Menütabelle, der Tabelle für die Navigationbuttons und der Tabelle für das Bild auf jeweils height="100%" gesetzt. Nur so konnte ich es erreichen, dass die linke Menütabelle sich mit der rechten Inhaltstabelle vertikal ausdehnt. Das hat aber nur der Internet Explorer so angezeigt. In Netscape Navigator dehnte sich die Menütabelle nicht mit vertikal aus.

In anderen Websites und dem Beispiel auf selfhtml.org sind nicht einmal die Höhe für die einzelnen Tabellen angegeben, trotzdem richten sich die Tabellen in der Höhe aneinander aus.

Was muss ich tun, um diesen Effekt zu erzielen, bzw. was könnte ich falsch gemacht haben, wodurch mein Layout nicht so aussieht.

Vielen Dank im voraus.
Sandra

[Ingo Turski]

Hi,

Ich habe die Höhe der Menütabelle, der Tabelle für die Navigationbuttons und der Tabelle für das Bild auf jeweils height="100%" gesetzt. Nur so konnte ich es erreichen, dass die linke Menütabelle sich mit der rechten Inhaltstabelle vertikal ausdehnt. Das hat aber nur der Internet Explorer so angezeigt. In Netscape Navigator dehnte sich die Menütabelle nicht mit vertikal aus.

Wie hast Du die Höhe definiert? Ein Link auf die betreffende Seite wäre hilfreich. Und hast Du auch die Höhe der Elternelemente bedacht?

In anderen Websites und dem Beispiel auf selfhtml.org sind nicht einmal die Höhe für die einzelnen Tabellen angegeben, trotzdem richten sich die Tabellen in der Höhe aneinander aus.

Welche Websites und welches Beispiel? Tabellen passen sich ganz alleine an, wenn man _keine_ Höhenangaben macht.

freundliche Grüße
Ingo

[Sandra]

Hallo,
vielen Dank für die Nachricht. Hier ist der link zu der Seite. Die Seite ist nur ein Test also bitte nicht am Aussehen stören. http://www.sandrakrahl.de/test/
Ich werde parallel noch einmal im code die Höhenangaben checken, wobei ich glaube schon alle Stellen ausprobiert zu haben.

Gruß
Sandra

[Mathias Bigge]

Hi Sandra,

Ich werde parallel noch einmal im code die Höhenangaben checken, wobei ich glaube schon alle Stellen ausprobiert zu haben.

Lass die Höhenangaben einfach weg, die haben mit Deinem Problem nichts zu tun, der Grundfehler liegt in der völlig überflüssig komplizierten Verschachtelung. Der Layoutentwurf ist gar nicht so schlecht, versuche aber ihn von der Kodierung her neu aufzubauen.

• Keine einzelne Zelle für jeden Menüpunkt, sondern die Menüpunkte als Liste oder einfach als Absätze.
• Nicht immer  wieder eine neue Tabelle anfangen, wenn dies nicht unbedingt nötig ist, sondern ein gutes und elastisches Grundkonstrukt aufbauen.

Beim Entwickeln solltest Du bei einer Tabellenstruktur immer so vorgehen:

• Grobe Skizze der erforderlichen Spalten und Zeilen auf Papier. Bei Dir sind das auf den ersten Blick drei Spalten und drei Zeilen. Vielleicht reichen auch zwei Spalten aus. Die sehr klare und einfache Struktur Deines Entwurfs würde ich vielleicht sogar rein mit divs und ohne Layouttabelle bauen, bei solchen Kästchenschemata funktioniert das ganz gut.
• Die Abstände zwischen Inhalten in einer Zelle mit CSS (Margin, padding) aufbauen, nicht mit weiteren Zellen.
• Bei der Entwicklung die Tabellenränder einschalten, damit Du siehst, wo Du jeweils bist.
• Möglichst wenig verschachteln, also ein neues table beginnen, wenn dies nicht unbedingt nötig ist.

Viele Grüße
Mathias Bigge

[Ingo Turski]

Hi,

für dieses Layout sind Höhenangaben nicht geeignet. Tabellen bräuchtest Du eigentlich auch nicht zu verwenden und wenn, dann würde nur eine einfache zweispaltige Tabelle sinnvoll sein.
Ich sehe im Layout eigentlich eher eine ganz simple HTML-Struktur mit relativ einfachen CSS-Formatierungen.
Ein die komplette Seite umspannendes DIV mit _einem_ Hintergrundbild, welches bottom positioniert ist und zusätzlich (für den variablen oberen Bereich) noch die Hintergrundfarbe des body hat.
Darin enthalten ein DIV oder auch eine UL für das obere Menü, gefolgt von einem links floatenden DIV für das seitliche Menü und das Foto und einem daneben gesetzten DIV für den Inhaltsbereich.
Keines dieser Elemente benötigt eine Höhenangabe; somit paßt sich die Höhe dem Inhalt an.

Grundsätzlich würde ich auch eine sinnvollere HTML-Auszeichnung wählen.

<strong><br>
            Ich bin eine Headline</strong>
<hr noshade width="425" size="1" color="#336666">
            Text...

schreit förmlich nach:

<h2>Ich bin eine Headline</h2>
<p>Text...</p>

Mit ein wenig CSS wird daraus dieselbe Anzeige, in etwa so:
h2 { padding-bottom:0.5em; border-bottom: 1px solid #8d8d8d; margin:0.5em 0; }

freundliche Grüße
Ingo