div-container: Probleme mit der Höhe

[bmg4ever]

Also das ist mein erster Versuch mit div-containern und ich hab da jetzt ein Problem, wo ich keine richtige Lösung für finden konnte.

Also prinzipiell soll meine Seite nachher so aufgebaut sein.

|----------------------------|

|-HEADER--------------------|

|----------------------------|

|--------|-------------------|

|--NAV--|-MAIN-------------|

|--------|-------------------|

|--------|-------------------|

|--------|-------------------|

|--------|-------------------|

Dafür hab ich die drei Divs "Main","nav" und "header" in einen umschließenden Container gepackt. Das ganze sieht dann in der CSS erstmal so aus und funktioniert auch ganz gut:

 #contentframe {

          width: 800px;

          height: 100%;

          text-align: left;


          margin: 0px auto;


          position: relative;

          left: 0;

          top: 0;

 }

 #header {

          background: #63AAFE;

          height: 30%;

          position: absolute;

          left: 0;

          top: 0;

 }

 #nav {

          background: #BBDAFE;

          width: 150;

          height: 70%;

          position: absolute;

          left: 0;

          top: 30%;

 }

 #main {

          background: #E7F1FE;

          width: 650;

          height: 70%;

          position: absolute;

          left: 150;

          top: 30%;

}

[/PHP]

Ich hab jetzt aber folgendes Problem:

Wenn z.B. der Inhalt des Containers "main" größer wird als der Container standardmäßig ist, vergrößert sich auch automatisch seine Höhe und der User erhält eine Scrollmöglichkeit.

Allerdings gilt dies dann nicht parallel für den Container "Nav". Dieser bleibt immer gleich groß (es sei denn man würde auch seinen inhalt verändern ).

Das sieht allerdings bei unterschiedlichen Hintergrundfarben ein bisschen blöd aus.

Wie kann ich also mit Div-Containern via CSS dafür sorgen, dass beide Container "main" und "nav" immer gleich groß sind und dass diese größe auch noch dynamisch vom Inhalt abhängig ist.

Ich hoffe man konnte das Verstehen und freue mich auf hoffentlich leichte Workarounds

Vielen Dank im Vorraus, bmg4ever

[Manitu71]

da ich leider ned viel Zeit habe, kurz das mal anschauen. Ich schaue mir das von dir heute Abend nach dem Training dann mal genauer an.

[etreu]

Schaue dir mal das Attribut overflow an. Damit kannst du Grösse deines Divs festlegen und die Scrollbalken erscheinen dann innerhalb des Divs (Main).

Das Funktioniert soweit ich weiss mit allen neueren Browsern (Version > 4.x).

[bmg4ever]

Schaue dir mal das Attribut overflow an. Damit kannst du Grösse deines Divs festlegen und die Scrollbalken erscheinen dann innerhalb des Divs (Main).

Das Funktioniert soweit ich weiss mit allen neueren Browsern (Version > 4.x).

naja die scrollbalken innerhalb des divs sehen bei einer festen Breite von 800px auf größeren monitoren ja total sch... aus.

ne also es sollte schon die standard browser-scrollbar sein.

@Manitu:

danke. das hab ich auch schon gefunden und so in etwa soll die seite ja auch aussehen.

aber es ist nicht ganz mein problem.

die beiden Container nav und inhalt hatten halt leicht verschiedene hintergrundfarben, wodurch man halt genau sah, wie groß sie waren.

Hinter dem Link können die beiden Container ja auch unterschiedlich groß sein, ohne dass das auffällt.

Solange ich keine Lösung hab, mache ich das jetzt auch erstmal mit der gleichen Hintergrundfarbe in "Main" und in "Nav".

[kills]

Hier gibts evtl auch Beispiele:

http://de.selfhtml.org/css/layouts/index.htm

Gruß,

Markus

[FMG]

Dafür hab ich die drei Divs "Main","nav" und "header"...

:confused:

1. für den Header, der normalerweise ein Bild bzw. ein Slogan ist, brauchst du nicht wirklich ein div! (für den Slogan eignet sich eher <h1>)
   
2. zwecks Menü: probiers mal mit ner Liste anstatt mit einem div
   
3. float bzw. clear (evt. in Verbindung mit margin-left) sind deine Freunde anstatt position: absolute, left und top.
   
4. lass den Inhaltsbereich floaten, dann klappts auch mit dem Menü

[Aiun]

ich halte die Einteilung Mithilfe von Divs für Sinnvoll. Es ist eben eine Modularisierung der Seite und macht das ganze Flexibel und gleichzeitig unabhängig voneinander.

An sich würde ich bei einer solchen Konstellation Scollbares Divlayer empfehlen...und es kann sein das du für größenveränderungen Javascript brauchst...je nachdem was du machen willst.

[FMG]

ich halte die Einteilung Mithilfe von Divs für Sinnvoll. Es ist eben eine Modularisierung der Seite und macht das ganze Flexibel und gleichzeitig unabhängig voneinander.

Ein div ist nur dann sinnvoll, wenn die zusammengehörenden Inhaltselemente nicht so wie ein div bzw. nicht alle einheitlich formatiert werden können (z. B. Text mit Überschriften und Bildern). Da dies jedoch in diesem Fall problemlos mit einer Liste geht, ist das div hier überflüssig.

[bmg4ever]

Erstmal danke an alle bis dahin.

Ein div ist nur dann sinnvoll, wenn die zusammengehörenden Inhaltselemente nicht so wie ein div bzw. nicht alle einheitlich formatiert werden können (z. B. Text mit Überschriften und Bildern). Da dies jedoch in diesem Fall problemlos mit einer Liste geht, ist das div hier überflüssig.

An sich hättest du recht, wenn das Menü nur eine einfach Liste wäre .

Ich bau das ganze halt in prinzip in verschachtelten Containern zusammen, um eben diese Modularisierung zu schaffen, so dass ich nachher nur Boxen über den Bildschirm schieben muss, in denen evtl. auch weitere relativ ausgerichtete andere Boxen liegen.

Auch der Header ist nicht nur ein Bild, sondern enthält z.B. eine Login-Box.

Das mit float werde ich mir gleich morgen früh, wenn ich wieder Zeit hab, zu Gemüte führen.

[FMG]

Ich bau das ganze halt in prinzip in verschachtelten Containern zusammen, um eben diese Modularisierung zu schaffen...

Damit erreichst du alles andere als Modularisierung...nämlich eine regelrechte div-Suppe, die sich mitunter extrem schwer händeln lässt!

so dass ich nachher nur Boxen über den Bildschirm schieben muss, in denen evtl. auch weitere relativ ausgerichtete andere Boxen liegen.

Dumm nur, dass die meisten User immernoch mit dem IE surfen, denn spät. bei der dritten Verschachtelung macht er dir einen Strich durch die Rechnung, da er das Box-Modell nicht wirklich richtig unterstützt und du somit ständig auf der Suche nach irgendwelchen Hacks bist.

[Aiun]

FMG, was hast du nur gegen Div Layer ?

eine <li>-"Suppe" halte ich hier für absolut unangebracht. Weil es bereits vorschreibt wie der inhalt auszusehen hat. Das Div Teilt die Seite nur, ähnlich den Frames in Bereiche ein, unabhängig davon was drinnen geschehen soll.

Verschachtelungen von Divs sind auch im IE ohne weiteres möglich, wobei es natürlich immer sonderfälle geben kann, die IE nicht mag... (position: fixed)... da sollte man sich dann aber auch nicht dran aufhängen.

das Div ist an sich nur eine Positionhierungshilfe und da wunderbar einzusetzen

@bmg4ever, wenn du mehrere Div Layer auf gleiche höhe bringen willst, ist JS vermutlich unumgänglich. möglich währe auch ein div style="height: 100%" aber da weis ich nicht im detail wie sie reagieren. Vermutlich wird aber einfach die Fensterhöhe verwendet....

[bmg4ever]

... möglich währe auch ein div style="height: 100%" aber da weis ich nicht im detail wie sie reagieren. Vermutlich wird aber einfach die Fensterhöhe verwendet....

genau das ist ja mein problem, dass es damit nicht so einfach geht

[Aiun]

naja, dann landest du bei Javascript

body onload und/oder onresize

dann kannst du die höhe der DivLayer festlegen / verstellen.

[FMG]

FMG, was hast du nur gegen Div Layer ?

Nichts, sofern sie sinnvoll eingesetzt werden, anstatt als Hilfskrücke (womöglich noch mit absoluten Positionierungen), wenn man keine Tabellen/Frames verwenden will!

eine <li>-"Suppe" halte ich hier für absolut unangebracht. Weil es bereits vorschreibt wie der inhalt auszusehen hat.

Nö, auch mit Listen kann man "zaubern". - klick

naja, dann landest du bei Javascript

body onload und/oder onresize

Wie schon von mir geschrieben: Wenn die richtigen Elemente floaten gibts solche Probleme nicht wirklich.

[Manitu71]

Nö, auch mit Listen kann man "zaubern". - klick

ein hervorragender Link, den auch ich in den letzten Monaten bevorzugt benutzte.

Kann ich nur empfehlen

[Aiun]

nette seite, zustimmung.

Zeigt jedoch für mich nicht den Grund, da Listen zu nehmen. Die Liste schreibt mir, so oder so, die Form meiner Navigation vor. Wenn ich da aber verschiedene Elemente einbringen will, oder sie sich später ändert, habe ich den Salat. Im Normalfall würde ich ein Div-Empfehlen...und wenn ein Teil der Navigation passt, eine Liste als Inhalt verwenden.

[bmg4ever]

Also ich machs einfach so, wie ich es für richtig halte.

und übrigens

@FMG:

Ich hab ganz vergessen mich zu bedanken, denn mit float klappts auch mit dem nachbar(n) div .

Nichts, sofern sie sinnvoll eingesetzt werden, anstatt als Hilfskrücke (womöglich noch mit absoluten Positionierungen), wenn man keine Tabellen/Frames verwenden will!

Ich dachte immer, dass man grade nicht mehr über Frames und Tabellen layouten soll. :confused:

[Aiun]

nichtmehr über Frames oder Tables zu Layouten ist schlicht schwachsinn

Ohne Tabellen gibt man ein großes, gutes HTML Feature auf. Frames ist es nicht viel anders.

Irgendwann haben vielleicht alle Gigabit-Leitungen, aber bis dahin sparen Frames viel Ladezeit und bieten für Anfänger viele wichtige Eigenschaften.

Div Layer Absolut zu positionieren ist doch das schöne daran ^^

Wer einen Ausblick auf andere Sprachen (.net, C++,Java) macht, sieht das oft Elemente Absolut positioniert werden.

Nunja, wir sollten nicht in eine dieser Frames ja / nein, Tabellen ja/nein unsw. diskussionen reinrutschen und einfach sagen es kann jeder machen wie er will ?

[Manitu71]

stimmt Aiun, und wir wissen auch das du ein Befürworter der Tables and Frames bist. Wenn auch der einzige