nicht angemeldet
table height=100% und Zeilenhöhen fest defnieren!?
Hallo zusammen,
kann mir jemand erklären warum der IE nachfolgendes Beispiel, nicht wie gewünscht anzeigt oder kann mir verraten wie man das Problem lösen kann?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
</head>
<body style="height: 100%; margin: 0;">
<table height="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td height="50">content</td>
</tr>
<tr>
<td>content</td>
</tr>
</table>
</body>
</html>
Im Quirksmode zeigt er es korrekt an, was aber nicht gewünscht ist das auch unter elemente mit position: fixed positioniert werden, welches wiederrum im Quriks-Mode geht.
Vielen Dank
-
Also wenn ich ein table mache, dann so:
<table border="1">
<tr>
<td width="Pixelzahl" height="Pixelzahl">Inhalt</td>
</tr>
</table>wenn du position=fixed haben willst,
dann:<table border="1" style="position:fixed; left:position; top:position>
...ansonsten gibs ja auch relative,static und absolute.
Kann sein dass ich deine frage nicht verstanden habe , denn ich
komm von der Mosel xD.-
Na, nicht ganz.
Ich möchte eine Tabelle mit zwei Zeilen, die erste Zeile soll feste 50 Pixel hoch sein, und die zweite den Rest der 100% füllen.
Also wenn ich ein table mache, dann so:
<table border="1">
<tr>
<td width="Pixelzahl" height="Pixelzahl">Inhalt</td>
</tr>
</table>wenn du position=fixed haben willst,
dann:<table border="1" style="position:fixed; left:position; top:position>
...ansonsten gibs ja auch relative,static und absolute.
Kann sein dass ich deine frage nicht verstanden habe , denn ich
komm von der Mosel xD.
-
-
Tach,
kann mir jemand erklären warum der IE nachfolgendes Beispiel, nicht wie gewünscht anzeigt oder kann mir verraten wie man das Problem lösen kann?
die Angabe IE solltest du in Zukunft präzisieren, da sich IE6 und 7 doch häufig deutlich unterscheiden.
<body style="height: 100%; margin: 0;">
<table height="100%" border="1" cellpadding="0" cellspacing="0">
Warum definierst du die Darstellung einmal über CSS und einmal über veraltete und nicht in der von dir verwandten HTML-Version vorhandene (z.B. border) bzw. gar nicht existente Attribute (height gibt es nicht für Tabellen.)
Im Quirksmode zeigt er es korrekt an, was aber nicht gewünscht ist das auch unter elemente mit position: fixed positioniert werden, welches wiederrum im Quriks-Mode geht.
Wenn etwas im Quirksmode geht und im Strict-Mode nicht, kannst du normalerweise davon ausgehen, dass der Fehler in deinem Quelltext steckt. Ohne es jetzt explizit ausprobiert zu haben, würde ich einer reinen Darstellung-per-CSS-Lösung wesentlich bessere Chancen geben, wobei ich mich immernoch frage, ob eine 100%-hohe Tabelle für etwas anderes als Layoutzwecke sinnvoll sein kann.
mfg
Woodfighter-
Hallo Woodfighter,
vielen Dank für die Antwort.
Ich spreche bewußt nur von IE, weil die Version in dem genannten Fall keine Rolle Spiel. Zumindest 6 und 7 machen den gleichen Fehler.
Das aufgezeigte Beispiel, war ein reiner Beispiel-Code um das Problem darzustellen. Selbstverständlich benutze ich normalerweise keine doppelten Angaben, und wenn möglich immer nur CSS Attribute. Ich wollte damit lediglich verdeutlichen das der IE jegliche Art von Höhenangabe ignoriert.
Leider muss ich in diesem bestimmten Fall eine Layout-Tabelle verwenden, da sich das Design über die ganze Bildschirmhöhe strecken soll. Und Tabellen sind mir noch lieber wie Frames.
Ich hoffe vielleicht zu meinem eigentlichen Problem noch eine Idee / Anregung zu bekommen.
Danke
cgTach,
kann mir jemand erklären warum der IE nachfolgendes Beispiel, nicht wie gewünscht anzeigt oder kann mir verraten wie man das Problem lösen kann?
die Angabe IE solltest du in Zukunft präzisieren, da sich IE6 und 7 doch häufig deutlich unterscheiden.
<body style="height: 100%; margin: 0;">
<table height="100%" border="1" cellpadding="0" cellspacing="0">
Warum definierst du die Darstellung einmal über CSS und einmal über veraltete und nicht in der von dir verwandten HTML-Version vorhandene (z.B. border) bzw. gar nicht existente Attribute (height gibt es nicht für Tabellen.)
Im Quirksmode zeigt er es korrekt an, was aber nicht gewünscht ist das auch unter elemente mit position: fixed positioniert werden, welches wiederrum im Quriks-Mode geht.
Wenn etwas im Quirksmode geht und im Strict-Mode nicht, kannst du normalerweise davon ausgehen, dass der Fehler in deinem Quelltext steckt. Ohne es jetzt explizit ausprobiert zu haben, würde ich einer reinen Darstellung-per-CSS-Lösung wesentlich bessere Chancen geben, wobei ich mich immernoch frage, ob eine 100%-hohe Tabelle für etwas anderes als Layoutzwecke sinnvoll sein kann.
mfg
Woodfighter-
Tach,
Ich wollte damit lediglich verdeutlichen das der IE jegliche Art von Höhenangabe ignoriert.
das hast du relativ schlecht getan, da das height-Attribut nicht wirken darf, die CSS-Eigenschaft jedoch im IE durchaus auch auf Tabellen wirkt.
Leider muss ich in diesem bestimmten Fall eine Layout-Tabelle verwenden, da sich das Design über die ganze Bildschirmhöhe strecken soll.
Diese Argumentation kann ich nicht nachvollziehen, selbstverständlich sind keine Tabellen nötig um den ganzen Bildschirm zu füllen.
mfg
WoodfighterP.S. Bitte vermeide in Zukunft ToFu, um die Lesbarkeit zu erhöhen:
A: Weil es die Lesbarkeit des Textes verschlechtert.
F: Warum ist TOFU so schlimm?
A: TOFU
F: Was ist das größte Ärgernis im Usenet?-
Tach lieber Woodfighter,
P.S. Bitte vermeide in Zukunft ToFu, um die Lesbarkeit zu erhöhen:
Bitte vermeide in Zukunft den Link auf den ToFu-Artikel zu vergessen, um die Verstehbarkeit zu erhöhen.
mfg
Woodfighter -
Mazhlzeit,
erstmal vorweg? Gibts hier auch irgendwen der auf mein Problem eingeht??
Tach,
Ich wollte damit lediglich verdeutlichen das der IE jegliche Art von Höhenangabe ignoriert.
das hast du relativ schlecht getan, da das height-Attribut nicht wirken darf, die CSS-Eigenschaft jedoch im IE durchaus auch auf Tabellen wirkt.
Für dich poste ich das nächste mal 20 verschiedene Varianten um absolut korrekt zu bleiben! Es war ein Beispiel!
Leider muss ich in diesem bestimmten Fall eine Layout-Tabelle verwenden, da sich das Design über die ganze Bildschirmhöhe strecken soll.
Diese Argumentation kann ich nicht nachvollziehen, selbstverständlich sind keine Tabellen nötig um den ganzen Bildschirm zu füllen.
Dann erklär mir mal bitte wie ich das ohne Tabellen hinbekommen soll??
mfg
WoodfighterP.S. Bitte vermeide in Zukunft ToFu, um die Lesbarkeit zu erhöhen:
Tofu ist was zum Essen mein Freund!
A: Weil es die Lesbarkeit des Textes verschlechtert.
F: Warum ist TOFU so schlimm?
A: TOFU
F: Was ist das größte Ärgernis im Usenet?-
Moin
Dann erklär mir mal bitte wie ich das ohne Tabellen hinbekommen soll??
height:100% gilt auch für DIV-Boxen!
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Moin
Dann erklär mir mal bitte wie ich das ohne Tabellen hinbekommen soll??
height:100% gilt auch für DIV-Boxen!
Dann habe ich einen Div der 100% hoch ist, toll!
Aber wenn ich jetzt einen Div haben möchte der 100px hoch ist welcher ganz oben ist, einen der 50px hoch ist und ganz und ist, und einen dazwischen der die restliche Bildhöhe einnimmt?Gruß Bobby
-
Moin
Aber wenn ich jetzt einen Div haben möchte der 100px hoch ist welcher ganz oben ist, einen der 50px hoch ist und ganz und ist, und einen dazwischen der die restliche Bildhöhe einnimmt?
Dazu würde ich mit folgender Struktur lösen:
<div id="container" style="height:100%;position:relative;">
<div id="top" style="height:100px">
Der Top-DIV
</div>
<div id="content">
Der Inhalts-DIV
</div>
<div id="footer" style="position:absolute;bottom:0px;left:0px;">
Der Footer-DIV
</DIV>
</div>über den Containberdiv kannst du das Hintergrundbild für den Content-Div, der ja nun kürzer ist, regeln.
Einfach mal um die Ecke in Boxen und Ebenen denken!
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
über den Containberdiv kannst du das Hintergrundbild für den Content-Div, der ja nun kürzer ist, regeln.
Du sprichst es selbst schon an.. Ich habe keinen Div, der sich über die restliche Höhe streckt.
Das bedeutet in meinem Fall: Ich habe einen globalen Hintergrund (einenn Verlauf) über die ganze Seite. Lediglich der Content-Div soll zweck's lesbarkeit einen einfarbigen Hintergrund haben, dieser Content-Div soll sich aber über die restliche Höhe strecken.
Und das geht nun einfach mal nicht ohne Tabellen. Tabellenloses Design finde ich eine schöne Sache, aber einfach nicht nutzbar fürs anspruchsvolle Designs!
-
Moin
Du sprichst es selbst schon an.. Ich habe keinen Div, der sich über die restliche Höhe streckt.
Na der Container-DIV hat die Höhe 100%.
Das bedeutet in meinem Fall: Ich habe einen globalen Hintergrund (einenn Verlauf) über die ganze Seite. Lediglich der Content-Div soll zweck's lesbarkeit einen einfarbigen Hintergrund haben...
Der "globale" Verlauf wird durch Body gesteuert und der Hintergrund der Contentbox durch den Container-DIV, welcher individuell eingefärbt, in Größe und Anordnung verändert werden kann..... Natürlich ist nicht der eigentliche Content-DIV so hoch wie der Rest, dennoch wird dies durch den Conatainer-DIV "vorgetäuscht"... So schwer ist das auch nicht zu verstehen!!!
Halte dich ein mein Beispiel und versuchs doch einfach mal, anstatt alles kaputt zureden!
Oder soll ich dirs noch programmiert vorlegen???
Und das geht nun einfach mal nicht ohne Tabellen. Tabellenloses Design finde ich eine schöne Sache, aber einfach nicht nutzbar fürs anspruchsvolle Designs!
Ist sehr wohl nutzbar!!!! All meine Arbeiten kommen ohne Tabellenlayout aus!
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Hi,
Na der Container-DIV hat die Höhe 100%.
ganz genau das ist das Problem. Wenn ich dem Container einen Hintergrund verpasse, ist dieses auch auf 100% der höhe zu sehen.
Ich möchte den Hintergrund aber _nur_ in dem mittleren Bereich haben.Ist _das_ so schwer zu verstehen?
-
Moin
mir scheint wir reden aneinander vorbei.
kleines Beispiel. Nehmen wir an dein Body ist grün, der TOP-DIV ist gold und wie du verlangst 50 px hoch, der Footer-DIV ist schwarz und dein Content-DIV soll blau werden und den Rest einnehmen.
dann gehst du es folgendermaßen an:
CSS:
body
{
background-color:green;
text-align:center;
padding:0px;
margin:0px
}#container
{
height:100%;
position:relative;
width:200px;
margin:auto;
text-align:left;
background-color:blue
margin-bottom:50px;
}#top
{
height:50px;
background-color:gold
}#footer
{
position:absolute;
height:50px;
color:white;
bottom:0px;
left:0px;
background-color:black;
width:100%;
}HTML:
<body>
<div id="container"><div id="top">
Der Top-DIV
</div><div id="content">
Der Content-DIV
</DIV><DIV id="footer">
der Footer
</DIV></div>
</body>So nun schau dir das Ergebnis an. Es scheint nun als ob der Content-DIV den restlichen freien Platz einnimmt und sich je nach Platzverhältnis erstreckt...
Wenn dies nicht deinen Vorstellungen entsprechen sollte habe ich dich komplett falsch verstanden.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
-
-
-
-
-
-
-
Tach,
erstmal vorweg? Gibts hier auch irgendwen der auf mein Problem eingeht??
sobald mir klar ist, was das Problem ist sicherlich.
Für dich poste ich das nächste mal 20 verschiedene Varianten um absolut korrekt zu bleiben! Es war ein Beispiel!
Ich wollte dir nur helfen, so dass du in Zukunft bessere Beispiele bringen kannst, damit es leichter ist dir zu helfen.
Dann erklär mir mal bitte wie ich das ohne Tabellen hinbekommen soll??
Mit CSS, wie genau, das kann ich dir leider nicht sagen, da du noch nicht damit herausgerückt bist, was das eigentliche Problem ist, dass dich dazu verleitet Layouttabellen zu nutzen.
Tofu ist was zum Essen mein Freund!
... und ToFu ist ein Plage.
mfg
Woodfighter
-
-
-
-