Grundlayout im ganzen Bildschirm

[minggi]

Hallo zusammen

Ich hab mich fast zu tode gegoogelt!
Leider nichts gefunden.

Meine Frage: Wie kann ich ein Layout über die gesammte Seite machen?
Zuerst ein header mit einer fixen höhe 100px; und overflow:hidden
Dann eine Navigation breite 150px, höhe= rest bis unten, overflow: auto!!!
dann daneben ein main mit breite rest bis rechts, höhe= rest bis unten und overflow: auto!!!

Ich habs so:
Problem wenn ich bei der navi und dem main height:100% mache, zeigt das fenster noch 100px zuviel an.

#header {
    background-color:#33CC66;
    height:100px;
}

#navigation {
 float:left;
 background-color:#CC0066;
    height:400px;
 width:150px;
    overflow:scroll;
}

#main {
 background-color:#0000FF;
    height:400px;
    overflow:auto;
}

<div id="header">Header</div>
<div id="navigation">
 Navigationsdffffffffffffsdfgdfgsdgsfdg
</div>
<div id="main">
 <b>Und hier ist der langerwartete main!</b>
</div>

[Claus]

Hallo minggi,

vielleicht möchtetst du dieser Maschine dein Problem einmal anvertrauen?

Grüße,
Claus

[minggi]

Ich habe es gerade versucht...

Höhe ist leider nicht 100% und da liegt ja auch mein hauptproblem.

Andere Idee?

[Tomas]

Ich habe es gerade versucht...

Höhe ist leider nicht 100% und da liegt ja auch mein hauptproblem.

Andere Idee?

machs mit Tabellen!
Da hast du solche Probleme nicht.

Mach einfach das Grundlayout mit Tabellen und den Rest mit CSS.
Tabellen machen immer genau das was du willst.

[Patrick Andrieu]

Hallo Tomas!

Mach einfach das Grundlayout mit Tabellen

Liegen Daten vor, welche eine tabellarische Darstellung erfordern?

Dieses Forum richtet sich selbstverständlich an Anfänger, dennoch werden hier semantisch korrekte Layout-Techniken empfohlen - und Hilfe dazu geleistet, wo immer sie benötigt wird.

Dein Vorschlag ist keine Hilfe, sondern ein Rückschritt zum Design vor der Jahrtausendwende.

Viele Grüße aus Frankfurt/Main,
Patrick

[Tomas]

Hallo Tomas!

Mach einfach das Grundlayout mit Tabellen

Liegen Daten vor, welche eine tabellarische Darstellung erfordern?

Dieses Forum richtet sich selbstverständlich an Anfänger, dennoch werden hier semantisch korrekte Layout-Techniken empfohlen - und Hilfe dazu geleistet, wo immer sie benötigt wird.

Dein Vorschlag ist keine Hilfe, sondern ein Rückschritt zum Design vor der Jahrtausendwende.

Viele Grüße aus Frankfurt/Main,
Patrick

So wie Steel geschrieben hat sind hier einfach die Grenzen von CSS erreicht.
Und bis jetzt konnte keiner einen Lösungsvorschlag liefern wie das in CSS absolut reibungslos funktioniert.

Deshalb einfach mal der Tip mit dem Tabellen-Design weil das 100% funktioniert.
Solange man mit CSS nicht so reibungslos Seiten-Layouts erstellen kann wie mit Tabellen, werden Tabellen als Layout-Mißbrauch auch noch weiterhin bestehen bleiben.

Die Menschen wählen halt immer den einfachen Weg zum Ziel und in diesem Fall ist das Ergebniss auch von der Stabilität durchaus besser als wenn zig Container durch die Webseite springen.

Keine Frage: Tabellen sind nicht für das Seitenlayout gedacht.
Aber wenn es so gut funktioniert warum nicht?
Warum sollte ich nicht Tabellen fürs Layout benutzen wenn am Ende alles so aussieht wie ich es wünsche und kaum "zerstört" werden kann?

[Minggi]

Uff bin ich jetzt froh.

Ich hatte eine Lösung mit einer Tabelle. Nach dem ich hier gelesen habe, dass das nicht mehr zeitgemäss sei, habe ich es mit css versucht. Leider ohne Erfolg. Nun bin ich am Zweifeln ob ich mit Tabellen(Nicht mehr zeitgemäss) oder mit css arbeiten soll. Ich bin also doch nicht der einzige der dieses Problem hat.

Was wird nun empfohlen?

[Tomas]

Was wird nun empfohlen?

Empfohlen wird ganz klar CSS. Das ist die Zukunft!

Aber solange es noch diese typischen CSS Probleme gibt werde ich immer wieder gern auf Tabellen zurückgreifen, wenn es mit ihnen leichter geht.

Es gibt einfach einige Sachen die kriegst du nur mit Tabellen so schnell und passend hin.

Also ich für meinen Teil, vermische es jeh nachdem was gerade besser passt.

[Harlequin]

Yerf!

Was wird nun empfohlen?

CSS sollte das Mittel der Wahl sein. Das Problem an dieser Stelle ist auch nicht, dass die Grenzen von CSS erreicht sind. Jeder halbwegs gute Browser kann mittels position:fixed und Angabe der Eckpunkte deiner Boxen das Layout problemlos umsetzen. Leider benutzt die Mehrheit der Leute ein "Ding"[1], dass selbst in der aktuellen Version absolut unfähig ist mit CSS vernünftig umzugehen...

Evtl. klappt aber folgendes:

<body>
<div id="header"></div>
<div id="scroll">
<div id="navi"></div>
<div id="content"></div>
</div>
</body>

Den header absolut positionieren mit top:0 und height:100px (evtl noch mit z-index:2). Scroll wird 100% hoch und bekommt overflow:auto. navi floatet links und bekommt ebenso wie content ein paddin-top von 100px (oder etwas mehr). Das sollte eigentlich den gewünschten Effekt ergeben, mit der Ausnahme, dass die Scrollbar über die Volle Höhe geht.

Gruß,

Harlequin

[1] leider hat das W3C nicht die Möglichkeit dagegen zu klagen, damit der IE endlich mal eingestampft wird. Bei Sun/Java hats ja geklappt.

[Steel]

Hiho!

Was wird nun empfohlen?

Is das hier ne Umfrage? :)

Empfohlen wird natuerlich CSS. Umsetzen wuerde ich es auch damit. Das Problem ist halt mal wieder MS. Die Sache mit dem Padding sollte auch funktionieren. Das Scrollen ist dann halt das Problem.

Sicherlich kann man auch eine Tabelle benutzen, bevor man mehr oder weniger gezwungen ist ne richtig dicke Divsuppe zu produzieren. Denn dank des wundervollen Produktes aus dem Hause Microsoft stoesst man hier eben doch an die Grenzen von CSS, bzw dem was dort interpretiert wird.

Aber ganz ehrlich: mir is mittlerweile der IE ziemlich schnurz. Solange man da die Infos bekommt, ist mir egal, wie das aussieht. Wenn der die Container so festlegt, dass man sie scrollen muss, dann ist das halt so. Oder man gibt ihm ein einfacheres Stylesheet mit, wo einige Dinge anders umgesetzt sind. In diesem Fall haetten bei mir die Besucher mit IE wohl keine 100% Bildschirm. Dumm nur, wenn man es nicht fuer sich selber macht, sondern einen Kunden hat der etwas genauso haben will. Dann greift man eben zur Tabelle, sonst verdient ein anderer das Geld indem er die Tabelle macht...

[Engin]

Hi Minggi,

Uff bin ich jetzt froh.

Es ist noch nicht vorbei.  :)

Ich hatte eine Lösung mit einer Tabelle. Nach dem ich hier gelesen habe, dass das nicht mehr zeitgemäss sei, habe ich es mit css versucht. Leider ohne Erfolg.

Übung macht den Meister.

Was wird nun empfohlen?

Ich schliesse mich den Kollegen hier im Thread an und sage CSS!

Gefunden bei dynamicdrive.com und in 20 Minuten angepasst.
Für eine Reibungslose Funktionalität in _allen_ Browsern kann ich nicht Garantieren.

Getestet in IE 6+7, FF 2.0.0.8 und Opera 9.24.

Have Fun!

Grüße,
Engin
 GYRO

[Steel]

Hi!

Tja. Wie kann die Hoehe auch 100% sein? Du sagst ja selbst, dass Du da nen 100px Header hast unter den Du ein element Schiebst, dass 100% der Hoehe des elternelements hat. Solange CSS nicht rechenen kann, wird das so auch nicht klappen.

Was Du versuchen kannst: Positioniere absolut und gib den Elementen top:100px und bottom:0px mit.

Ansonsten hast Du hier einfach die Grenzen von CSS erreicht. Waere das so einfach universell und fuer jeden Browser realisierbar, gabe es nicht das Konzept der faux collumns.

[Længlich]

Vanakkam!

Meine Frage: Wie kann ich ein Layout über die gesammte Seite machen?
Zuerst ein header mit einer fixen höhe 100px; und overflow:hidden
Dann eine Navigation breite 150px, höhe= rest bis unten, overflow: auto!!!
dann daneben ein main mit breite rest bis rechts, höhe= rest bis unten und overflow: auto!!!

Ich habs so:
Problem wenn ich bei der navi und dem main height:100% mache, zeigt das fenster noch 100px zuviel an.

So was ähnliches habe ich mal gemacht. Der Ansatz geht wie folgt:
1. Den Header positionierst Du absolut an der linken oberen Ecke, mit Höhe 100px und Breite 100%.
2. Die Navi bekommt Mindesthöhe 100% (für den IE 6: Höhe 100%), Breite 150px und floatet links. (Eventuell die Breite lieber in em angeben, damit sie wächst, wenn der Benutzer die Schrift vergrößert - wenn Du nicht nur Bilder drin hast.) Damit hat sie mindestens die Höhe der Seite, beginnt links oben und liegt über dem Header.
3. Der Header bekommt einen höheren Z-Index als die Navi, damit er komplett zu sehen ist und es so aussieht, als würde die Navi erst nach 100 Pixeln beginnen.
4. Jetzt bleibt nur noch das Problem, daß die Inhalte von Navi und Content hinter dem Header beginnen, also die ersten 100 Pixel verborgen sind. Padding oder Margin für die Navi geht nicht, da dies zur Höhe hinzuaddiert werden würde. Also muß das erste Element innerhalb der Navi die Margin nach oben bekommen.

Das ist jetzt mal nur der grobe Ansatz, Du mußt bestimmt noch ein paar Feinheiten nachjustieren und einige Angaben ergänzen. Nimm auf jeden Fall einen Doctype, der die Browser in den standardkonformen Modus versetzt, sonst bringst Du den IE nicht mehr unter Kontrolle. IE 5 versagt völlig, aber der ist heute auch nicht mehr wichtig.

Viele Grüße vom Længlich