nicht angemeldet
Tabellen-Layout vs. CSS Kastenmodell
Hallo Leute,
Ich bin auf folgendes Problem gestoßen, als ich von Tabellen-Layout weg wollte.
Ich habe auf meiner Seite 4 Bereichen: Header, Footer, Menü und Hauptkasten, wo Haupt-Content dynamisch ausgegeben wird, also beliebig groß. Wenn Content zu kurz ist, will ich 100% der Fensterhöhe trotzdem belegen.
Klingt erst ganz simple, aber ich habe noch was :)
Zwei Kasten "Menu" und "Main" will ich immer gleich hoch haben, was mit einer Tabelle gar nicht in Frage kommt.
Hier ist eine Skizze mit Tabellen-Layout:
http://testserver.nosecret.ru/layout/table.html
Und hier habe ich eine Lösung gefunden, die gefällt mir aber gar nicht, weil es JavaScript zum Einsatz bringt und die Methode onresize benutzt, die zur HTML Standarts nicht gehört.
http://testserver.nosecret.ru/layout/div.html
Hier ist der Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>DIV-LAYOUT</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
<!--
function dheight() {
var t0 = document.getElementById('main').offsetHeight;
t0 = parseInt(t0);
t0 = t0-14;
document.getElementById('nav').style.height=t0+"px";
}
//-->
</script>
<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
div#root {position:absolute; width: 100%; height:100%;}
div#header {margin: 6px; padding: 6px; border: solid 1px;}
div#nav {margin: 0 0 0 6px; padding: 6px; float:left; width:150px; min-height: 20%; border: solid 1px;}
* html div#nav {margin-left: 0.2em; height: 20%;}
div#main {margin: 0 6px 6px 176px; padding: 6px; min-height: 83%; border: solid 1px;}
* html div#main {margin-left: 174px; height: 83%}
div#footer {margin: 0 6px 0 6px; padding: 6px; border: solid 1px; clear:both;}
</style>
</head>
<body onload="dheight()" onresize="dheight()">
<div id="root">
<div id="header">HEADER</div>
<div id="nav">MENU</div>
<div id="main">MAIN</div>
<div id="footer">FOOTER</div>
</div>
</body>
</html>
Kennt jemand ne bessere Lösung? Könntet ihr mir helfen?
Danke im voraus!
-
Hallo,
Kennt jemand ne bessere Lösung? Könntet ihr mir helfen?
Je nach Anforderung gibt es wohl verschiedene Wege, wenn du
Rahmen benötigst wird es schwieriger als wenn ein farbiger
Rand oder Hintergrund die Höhe darstellen soll.Du kannst z.B. den Hintergrund der Navigation als "unterlappenden"
breiten Rahmen des main-Blocks oder als Hintergrundbild des Body
realisieren. Womöglich ist auch eine Tabelle die bessere Alternative.Ein relativ einfacher Weg min-height 100% beim IE zu realisieren ist
per margin möglich.Dein Codebeispiel kann übrigens zumindest für "kleine" Inhalte und
moderne Browser etwas unabhängiger vom Javascript werden:
div#nav { min-height: 83%; }Grüsse
Cyx23-
Danke für Antwort!
Ein relativ einfacher Weg min-height 100% beim IE zu realisieren ist
per margin möglich.Die Lösung in meinem Beispiel finde ich auch einfach, Hauptsache es funktioniert!
Dein Codebeispiel kann übrigens zumindest für "kleine" Inhalte und
moderne Browser etwas unabhängiger vom Javascript werden:
div#nav { min-height: 83%; }Wenn ich aber mehr Text in "Main" Kasten dynamisch generiere, bleibt die Navigation ohne JavaScript-Einsatz beim 83% der Fenstergrösse, während der "Main" Kasten sich an Text anpasst. Also unerwünscht!
-
Hallo,
Die Lösung in meinem Beispiel finde ich auch einfach, Hauptsache es funktioniert!
Was willst du mit der Höhe eigentlich erreichen?
Wenn ich aber mehr Text in "Main" Kasten dynamisch generiere, bleibt die Navigation ohne JavaScript-Einsatz beim 83% der Fenstergrösse, während der "Main" Kasten sich an Text anpasst. Also unerwünscht!
Die Lösungen schliessen sich ja nicht aus.
Allerdings errgibt sich aus deiner Reaktion die Frage:Was willst du mit CSS-Layout eigentlich erreichen?
Grüsse
Cyx23
-
Was willst du mit der Höhe eigentlich erreichen?
Ich will dass die Höhe des Navigationskastens immer gleich dem Hauptkasten bleibt. Die "min-height" ist für Hauptkasten zwingend notwendig, um die minimale Höhe zu behalten. Da IE das nicht versteht, habe ich * html div#main {height: 83%}
Die Lösungen schliessen sich ja nicht aus.
Wahrscheinlich habe ich mich nicht verständlich ausgedrückt. Deine Lösung div#nav { min-height: 83%; } und ohne JavaScript habe ich hier realisiert
Mit JavaScript-Einsatz "etwas unabhängiger vom Javascript" wird deine Lösung nicht, weil JS immer die Höhe neurechnet!Allerdings errgibt sich aus deiner Reaktion die Frage:
Was willst du mit CSS-Layout eigentlich erreichen?
Ich programmiere CMS, wo Content sehr dynamisch ausgegeben wird, also ich will, dass HTML+CSS auch dynamisch bleibt, also keine feste Größen un Höhen. Für Web-Standarts habe ich mich entschieden um Fehlertoleranz auf Client-Seite bei der Scriptprogrammierung zu reduzieren.
Gruß,
Viktor-
Hi,
Was willst du mit CSS-Layout eigentlich erreichen?
Ich programmiere CMS, wo Content sehr dynamisch ausgegeben wird, also ich will, dass HTML+CSS auch dynamisch bleibt, also keine feste Größen un Höhen.und warum gibst Du dann überhaupt Höhen vor?
Selbst Deine 83% können bei entsprechend hohem Header und/oder Footer und kleiner Contenthöhe unpassend sein.freundliche Grüße
Ingo-
Hallo,
und warum gibst Du dann überhaupt Höhen vor?
Weil ich die minimale Höhe haben will, und ich keine andere Möglichkeit das zu realisieren sehe.
Selbst Deine 83% können bei entsprechend hohem Header und/oder Footer und kleiner Contenthöhe unpassend sein.
Du hast recht, aber, wie schon oben gesagt, kenne ich keine bessere Lösung!
Gruß,
Viktor
-
-
Hallo,
Was willst du mit der Höhe eigentlich erreichen?
Ich will dass die Höhe des Navigationskastens immer gleich dem Hauptkasten bleibt.also, wenn ich auf deine weiteren Ausführungen vorgreife, ohne konkreten
Layoutgrund, sondern eher vorsorglich?CSS (+übliche Browser) halte ich noch nicht für so leistungfähig
dass wirklich verlässlich "Form und Inhalt" getrennt werden könnte...Mit JavaScript-Einsatz "etwas unabhängiger vom Javascript" wird deine Lösung nicht, weil JS immer die Höhe neurechnet!
Wenn dein Content 83% hat und die Navi auch schauts bei dekativiertem
JavaScript und bei wenig Content doch wohl besser aus?Ansonsten gelingt es z.B. manchmal alternativ zu JavaScript-Schleifen
oder expressions auch nur einmalig max-width per durch JavaScript
erzeugter Tabelle umzusetzen.
Bei dir würde das wohl der Einbindung von content und navigation in
eine neu erzeugte Tabelle bedeuten, vielleicht auch vom Seitenaufbau
etwas unschön wenns länger dauert.Vorteil ist die geringe Belastung und höhere Stabilität, da keine
Schleife und kein Resize benötigt werden, und die Flexibilität
der Tabelle nach dem (Neu-)Aufbau der Seite ausreicht.Dein Ansatz mit onload hat immerhin den Vorteil dass du gegenüber
den eigentlich eleganten expressions erstmal keine JavaScript-Schleifen
erzeugst.Allerdings gibt es Browser oder Situationen die bei entspr. Code auf
deine Lösung mit einer Schleife reagieren mögen, wenn nämlich die
durch das Script ausgeführte Änderung einer Elementgrösse wieder als
resize aufgefasst werden könnte. Dürfte nicht passieren weil ja
der content auch da ist, sobald du aber je nach IE-Version, Rendermodus
und sonstigen CSS-Angaben, margin,padding, border, mit dem
angeglichenen nav-block größer wirst, wird womöglich ein resize
ausgelöst, von daher würde ich grundsätzlich solche Konstrukte
nicht nur exzessiv testen, sondern möglichst vermeiden, erst recht
angesichts deiner weiteren Anforderungen:Ich programmiere CMS, wo Content sehr dynamisch ausgegeben wird, also ich will, dass HTML+CSS auch dynamisch bleibt, also keine feste Größen un Höhen. Für Web-Standarts habe ich mich entschieden um Fehlertoleranz auf Client-Seite bei der Scriptprogrammierung zu reduzieren.
Wobei eine Tabelle womöglich stabiler und zugänglicher ist..
Grüsse
Cyx23
-
also, wenn ich auf deine weiteren Ausführungen vorgreife, ohne konkreten
Layoutgrund, sondern eher vorsorglich?Vorsorglich ist die Verwendung von CSS und keinen komplexen HTML-Strukturen. Grund für Rahmen und gleiche Höhe ist eher die Schönheit :)
Wenn dein Content 83% hat und die Navi auch schauts bei dekativiertem
JavaScript und bei wenig Content doch wohl besser aus?Hast voll recht!
Wobei eine Tabelle womöglich stabiler und zugänglicher ist..
Ich bin inzwischen auch dieser Meinung geworden.
Und Danke für wertvolle Beispiele!
Gruß,
Viktor
-
-
-
-
-