Tabellenzellen fixieren

S

S_O

Mitglied
Hallo,
ich bin gerade dabei eine Internetseite zu erstellen. Die Seite besteht aus einer großen Tabelle die den Bildschirm zu 100% füllt. Oben der Titel, links Navigation und der Rest der eigentliche Inhalt. Ich möchte die obere Tabellenzelle nun fixieren, das sie immer eine bestimmte Höhe hält (in Pixel, da ein Bild drin ist). In Firefox klappt auch alles wunderbar, der w3c-validator sagt valid HTML 4.01 Transitional, aber im IE funktioniert es nicht. Ehal ob ich die Höhe mit height="80" einstelle oder style="height: 80px;" im TD-Element, der IE meint er könnte die Zelle, wenn in der darunter nicht genügend viel Inhalt ist, sie stretchen.

Hier der (verkürzte) Quelltext:
CODE <body>
<table border="0" cellspacing="0" cellpadding="0" width="100%" style="height: 100%;">
<tr style="height: 80px;">
<td colspan="2" height="80" style="height: 80px;"> <!-- Überschrift besteht aus zwei Bildern -->
<table border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#c8a96e" style="height: 80px;">
<tr>
<td align="left"><img src="./images/bild1.png" alt="Überschrift" /></td>
<td align="right"><img src="./images/bild2.png" alt="" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" class="navi"> [Navigation] </td>
<td valign="top"> <!-- Der Hauptbereich besteht nochmal aus einer Tabelle (Begründung siehe Post) -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="height: 100%;">
<tr style="height: 1em;">
<td colspan="3"></td> <!-- Rand oben -->
</tr>
<tr>
<td style="width: 1em;"></td> <!-- Rand links -->
<td width="*"> [Inhalt] </td> <!-- Der Hauptbereich für den Inhalt -->
<td style="width: 1em"></td> <!-- Rand rechts -->
</tr>
<tr style="height: 1.5em;">
<td colspan="3" valign="middle"> [Copyright] </td> <!-- Fußleiste -->
</tr>
</table>
</td>
</tr>
</table>
</body>
Begründung für zweite Tabelle im Hauptbereich: Ursprünglich hatte ich hier nur ein <div>-Element was mit margin/padding den Abstand regelte. In Firefox wieder wunderbar, jedoch versteht der IE anscheinend nicht was 100% sind, und alle Elemente innerhalb des <div>-Elements die width="100%" hatten, wurden über den Rand hinaus gestreckt (der IE scheint 100% ohne padding/margin zu sehen).
Mit der Tabelle habe ich das Problem gelöst.

Nochmal das Problem: Die obere Tabellenzelle, die von mir fest auf 80px gesetzt wird vom IE manchmal darüber hinaus gestreckt. Ich habe auch probiert, wie ich es bereits gelesen habe, das <td>-Element des Hauptbereichs mit width="100%" zu erweitern, das Problem ist dann weg, jedoch ist die ganze Tabelle dann zu groß (genau 80 Pixel mehr als verfügbar), und ich habe immer einen Scrollbalken. Die Tabellenzelle soll immer 100% - 80 Pixel groß sein.

Wie kann ich das korrigieren? Ist es ein Fehler meinerseits oder einer des IE?
Ich würde gerne eine vernünftige Lösung, die w3c-konform und JavaScript-frei ist.
 
Ich bin im ersten Moment unsicher. Mit IE 6 funktioniert es so, wie du es dir vorstellst...?

Nachtrag: QUOTE
</tr>
<tr>

->
</tr>
</table><table samevars>
<tr>
 
Nein.
Internet Explorer: Funktioniert nicht, Tabellenzelle wird gestreckt, obwohl feste Höhenangabe vorhanden ist.
Mozilla Firefox: Perfekt
W3C-Validator: This Page Is Valid HTML 4.01 Transitional!

Nachtrag:
Du meinst den Titel aus der Tabelle rausnehmen, so hatte ich es zuerst, jedoch soll die untere Tabelle den Rest ausfüllen und das habe ich damit nicht mehr hinbekommen (ich habe dafür im html, body und der Tabelle height: 100% stehen, wenn ich nun was außerhalb dieser Tabelle habe, wird es insgesamt wieder zu groß). Ich habe auch probiert noch eine Tabelle drum rum zu bauen, brachte aber genau das gleiche Ergebnis (die obere Zelle wird trotz fester Angabe gestreckt).
 
Versuchs mal so, erstelle ein space.gif 1x1 pixel. dies kanst Du nun als TD bground laden und mit with und height definierst Du nun die Höhe der Zelle.
Allerding's habe ich ein problem wen ich deinen code anschaue weshalb benüzt Du das style="height: 80px" und nicht einfach height=80px ????
 
QUOTE dies kanst Du nun als TD bground laden und mit with und height definierst Du nun die Höhe der Zelle.Bei welchem td?

QUOTE Allerding's habe ich ein problem wen ich deinen code anschaue weshalb benüzt Du das style="height: 80px" und nicht einfach height=80px ????Ich hab einfach alles probiert, in der Hoffnung das der IE wenigtens irgendwas nicht ignoriert, angefangen habe ich einfach mit height="80" und habe die anderen Sachen dann immer ergänzt.
 
Also für mich siehts mit dem IE auch richtig aus, aber ich weiss nicht auswendig, wie hoch 80px sein sollten ;-)

Der IE stolpert vielleicht über die verschiedenen Angaben (% und Pixel), resp. die 100% Höhe der gesamten Tabelle haben für ihn höhere Priorität als die 80px der einen Zeile. Wenn IE strecken muss, macht er das proportional zu den jeweiligen Inhalten.

Wenn der Tipp von Roger nicht hilft, dann vielleicht ein Trick, den ich manchmal anwende, wenn ich dasselbe Problem in der Breite habe: die Zeile statt auf 80px auf 1% Höhe setzen, dann ein transparentes Gif in die Zelle und dessen Höhe auf 80px festlegen. Er sollte dann die Höhe auf "sowenig wie möglich und soviel wie nötig" darstellen.

Griessli
Irene
 
QUOTE Also für mich siehts mit dem IE auch richtig aus, aber ich weiss nicht auswendig, wie hoch 80px sein sollten ;-)Wenn genug Inhalt in der anderen Zelle ist macht er es ja auch richtig. Er mag es nur nicht das in der einen ganz viel frei ist und in der anderen nichts. Dann ignoriert er meine absolute height-Angabe und macht die Zelle einfach größer.

QUOTE Der IE stolpert vielleicht über die verschiedenen Angaben (% und Pixel), resp. die 100% Höhe der gesamten Tabelle haben für ihn höhere Priorität als die 80px der einen Zeile. Wenn IE strecken muss, macht er das proportional zu den jeweiligen Inhalten.Die gnaze Tabelle soll 100% des Bildschirms füllen (mindestens). Dabei soll die obere Zelle der Tabelle konstant immer bei 80px gehalten werden, sie untere kann verändert werden. Warum sollte der IE darüber stolpern? Es sind ja zwei völlig verschiedene Sachen? Es ist ja nicht so, das ich einer Zelle 80px und einer anderen 100% zugewiesen habe.

QUOTE Wenn der Tipp von Roger nicht hilft, dann vielleicht ein Trick, den ich manchmal anwende, wenn ich dasselbe Problem in der Breite habe: die Zeile statt auf 80px auf 1% Höhe setzen, dann ein transparentes Gif in die Zelle und dessen Höhe auf 80px festlegen. Er sollte dann die Höhe auf "sowenig wie möglich und soviel wie nötig" darstellen.Ich verstehe das mit dem gif nicht. In der Tabelle sind doch zwei Bilder die 80 Pixel hoch sind (die auch korrekt dargestellt werden). Die Zelle ist nicht zu klein, sondern zu groß.
Ich habe die Größe jetzt mal auf ein 1% gesetzt, keine Wirkung, als ich dann aber die andere Zelle auf 99% gesetzt habe ging es. Aber da die Zelle oben wegen den Bildern immer noch 80 Pixel groß ist, ist die Tabelle insgesamt, da die untere Zelle ja 99% hat, wieder zu groß.
Ich will das er die obere Zelle bei 80 Pixel hält, völlig egal was passiert. Die untere Zelle soll einfach den Rest ausfüllen.
 
<td colspan="2" height="80" style="height: 80px;">
in dieser TD füge das Gif ein
<td colspan="2" background="spacer.gif" height=80 width= >

so ist das gemeint. mit width und height streckst Du das Gif in die gewünschte grösse da es aber nur ein transparentes pixel ist bleibt es eben unsichtbar.

benütze nur width und height entwerder mit % zahlen oder 80 = 80 pixel
 
Ich weiß nicht ob ich das richtig verstanden habe. Ich habe es eingefügt, ohne jede Veränderung (würde mir auch sehr unlogisch erscheinen wenn dadurch irgendwas verändert werden würde). Hier nochmal der Code zum Vergleich:
Alt:
CODE <table border="0" cellspacing="0" cellpadding="0" width="100%" style="height: 100%;">
<tr>
<td colspan="2" height="80"> <!-- Überschrift besteht aus zwei Bildern -->
<table border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#c8a96e" style="height: 80px;">
<tr>
<td align="left"><img src="./images/bild1.png" alt="Überschrift" /></td>
<td align="right"><img src="./images/bild2.png" alt="" /></td>
</tr>
</table>
</td>
</tr>
...
Neu:

CODE <table border="0" cellspacing="0" cellpadding="0" width="100%" style="height: 100%;">
<tr>
<td colspan="2" height="80" background="spacer.gif"> <!-- Überschrift besteht aus zwei Bildern -->
<table border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#c8a96e" style="height: 80px;">
<tr>
<td align="left"><img src="./images/bild1.png" alt="Überschrift" /></td>
<td align="right"><img src="./images/bild2.png" alt="" /></td>
</tr>
</table>
</td>
</tr>
...
Ich habe irgendwie das Gefühl, das ich missverstanden werde. Das Problem liegt darin, das die Zelle vergrößert wird, weil die gesamte Tabelle auf 100% des Bildschirmes gestrecht wird, das soll aber nicht passieren, außschließlich die untere Zelle soll sich verändern können.
 
QUOTE (S_O @ Di 19.10.2004, 23:00)Warum sollte der IE darüber stolpern? Es sind ja zwei völlig verschiedene Sachen? Es ist ja nicht so, das ich einer Zelle 80px und einer anderen 100% zugewiesen habe.
Er stolpert über die unterschiedlichen Angaben. Die zweite Zeile müsste eine Höhe von (100% - 80px) haben, und das ist dem IE zu hoch.
Bei Breiten- und Höhenangaben ist es sicherer, entweder alles in Prozent oder alles absolut anzugeben. Und wenn die Breite einer Spalte resp. die Höhe einer Zeile definiert wird, sollte auch für alle anderen Spalten resp. Zeilen etwas angegeben werden.


QUOTE (S_O @ Di 19.10.2004, 23:00)Ich verstehe das mit dem gif nicht. In der Tabelle sind doch zwei Bilder die 80 Pixel hoch sind (die auch korrekt dargestellt werden).
Ich wusste nicht, dass die beiden Bilder 80px hoch sind, und der Browser weiss es beim Laden auch noch nicht. Sauberer wäre, die Höhe und Breite der beiden Grafiken im img-Tag anzugeben.


QUOTE (S_O @ Di 19.10.2004, 23:00)Ich habe die Größe jetzt mal auf ein 1% gesetzt, keine Wirkung, als ich dann aber die andere Zelle auf 99% gesetzt habe ging es. Aber da die Zelle oben wegen den Bildern immer noch 80 Pixel groß ist, ist die Tabelle insgesamt, da die untere Zelle ja 99% hat, wieder zu groß.
Versuch mal die andere Zeile nicht auf 99%, sondern auf "*" zu setzen. Das bedeutet quasi "auffüllen", vielleicht frisst ers.

Griessli
Irene
 
Versuche es einmal so

<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr><td>
<table width="100%" height="80"><tr>
<td bgcolor="#c8a96e" height="80" colspan="2"> <!-- Überschrift besteht aus zwei Bildern -->
<div align="left"><img src="./images/bild1.png" alt="Überschrift" ></div>
<div align="right"><img src="./images/bild2.png" alt="" ></div></td>
<td></td>
</tr></table>
</td></tr><tr><td>

Das Problem das Du aber mitdieser Tabellen anordnung habe wirst ist ein langsamer Seitenaufbau da IE Immer die Tabellen zuerst lädt. Normaler weise würde ich von einer so grossen tabelle Abraten und sie in kleinere aufteilen.
 
QUOTE Er stolpert über die unterschiedlichen Angaben. Die zweite Zeile müsste eine Höhe von (100% - 80px) haben, und das ist dem IE zu hoch.
Bei Breiten- und Höhenangaben ist es sicherer, entweder alles in Prozent oder alles absolut anzugeben. Und wenn die Breite einer Spalte resp. die Höhe einer Zeile definiert wird, sollte auch für alle anderen Spalten resp. Zeilen etwas angegeben werden. Ich habe ja nur eine Angabe absolut gemacht, die andere soll ja auffüllen. Prozentangaben gab es bei der Zellenhöhe nirgendwo. Nur die Höhe der gesamten Tabelle ist als Prozentangabe. Es macht für mich keinen Sinn warum das nicht erlaubt sein sollte. Das ich eine Zelle nicht auf 20% und die andere auf 100px Höhe festlegen kann ist klar.

QUOTE Ich wusste nicht, dass die beiden Bilder 80px hoch sind, und der Browser weiss es beim Laden auch noch nicht. Sauberer wäre, die Höhe und Breite der beiden Grafiken im img-Tag anzugeben.Das habe ich schon gemerkt, ich habe in der Navigation mit JavaScript ein DropDown-Menü gemacht (mit invisible div die bei onmouseover visible werden, position absolute). Das Menü wurde beim ersten Mal laden in Firefox nie richtig angezeigt (immer zu weit oben), bis ich gemerkt habe das es so ziemlich genau 80 Pixel sind und dann die Tabelle mit den Bildern auf height: 80px festgelegt habe, seitdem gehts.

QUOTE Versuch mal die andere Zeile nicht auf 99%, sondern auf "*" zu setzen. Das bedeutet quasi "auffüllen", vielleicht frisst ers.Leider tut ers nicht. Er macht die obere Zelle immer noch zu groß. Ich habe auch probiert die obere Zelle auf * und die untere auf 99* zu setzen, dann ist die gesamte Tabelle wieder zu groß.



QUOTE <table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr><td>
<table width="100%" height="80">Table hat doch kein height-Attribut? http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.1

QUOTE <table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr><td>
<table width="100%" height="80"><tr>
<td bgcolor="#c8a96e" height="80" colspan="2"> <!-- Überschrift besteht aus zwei Bildern -->
<div align="left"><img src="./images/bild1.png" alt="Überschrift" ></div>
<div align="right"><img src="./images/bild2.png" alt="" ></div></td>
<td></td>
</tr></table>
</td></tr><tr><td>Das geht so überhaupt gar nicht, weil er die Bilder jetzt nicht mehr nebeneinander macht, sondern übereinander (das eine links, das andere rechts, aber nicht in einer Höhe). Und die Zelle ist, obwohl Inhalt nun doppelt so hoch, immer noch zu groß für die zwei Bilder.

QUOTE Normaler weise würde ich von einer so grossen tabelle Abraten und sie in kleinere aufteilen.Normalerweise? In meinem Fall aber nicht? Wenn du eine andere Lösung hast wie ich die untere Tabelle dazu bekomme immer mindestents den Rest des Bildschirms einzunehmen kann ich Tabellen trennen, ich weiß aber nicht wie das gehen könnte.
 
Mal ne simple Frage ist die Seite schon online ??
Was für einen Editor verwendest Du ?

Ohne den Inhalt deiner Seite zu kennen ist es sehr schwer etwas über die darstellung oder das teilen von Tabellen zu sagen.

Frage wieso muss der rest des Bildschirmes ausgefült sein und mit Was ?

Für welch Auflösung soll den die Seite sein 800 x 600 ? (leider immer noch standart)
 
QUOTE Was für einen Editor verwendest Du ?EmEditor (ist ein purer Text-Editor, der die einzelnen PHP/HTML-Elemente farblich von einander abheben kann).
QUOTE Mal ne simple Frage ist die Seite schon online ??Jein. Sie läuft auf Apache auf meinem PC. Ich kann dir gleich mal ne PM schicken mit der Adresse.

QUOTE Frage wieso muss der rest des Bildschirmes ausgefült sein und mit Was ?Ganz einfach, die Überschrift und die Navigation fest, und der Rest halt soviel wie die Auflösung hergibt. Da ist dann der eigentliche Inhalt.

QUOTE Für welch Auflösung soll den die Seite sein 800 x 600 ? (leider immer noch standart)Für alle!

Nachtrag:
Kann dir keine PM schicken
sad.gif
 
QUOTE Ganz einfach, die Überschrift und die Navigation fest, und der Rest halt soviel wie die Auflösung hergibt. Da ist dann der eigentliche Inhalt.


Dan würde ich mir nicht so ein kopf zerbrechen machen.

Mache eine tabelle für die Überschrift (wen das Nötig ist )
<body>
<center><font kdjf> Deine Überschrift </font></center>
Dies bleibt immer zentriert und zuoberst.
Tabelle für die Navigation.

Tabelle für den Inhalt ( Achte nicht darauf ob die Seite gefüllt ist oder nicht )
 
Meine Überschrift besteht aus den beiden Bildern!
Wenn ich dir ne PM schicken könnte, könntest du dirs anschauen, wie ich mirs vorstelle.
 
Hast Du Photoshop ? wen ja mach doch ein slice, wen nein
<center><table><tr><td align=right background="bild1.jpg"></td><td background="bild2"></td></tr></table></center>
die ausrichtung nach links ist Standard und braucht somit nicht extra angegeben werden
 
QUOTE Hast Du Photoshop ?Nein, habe ich nicht.
Die Bilder sollen links und rechts außen sein und der Bereich in der Mitte soll aufgefüllt werden.
Also das linke Bild hat eine Ausrichtung nach links, das rechte nach rechts. Bei unterschiedlichen Auflösungen muss dann unterschiedlich viel aufgefüllt werden in der Mitte.

QUOTE Noch mal ne Frage wie Gross (kb) sind die Bilder ?Zurzeit (kann sich aber noch ändern) 62KB links und 3KB rechts.
 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben