Layout mit DIV-Containern - Höhe 100%

[stefacht]

Hi Leute,

ich bin grade dabei meine Website komplett neu zu programmieren - soll komplett valid sein (XHTML 1.0 Strict + CSS (mal schaun, ob ich 1.0 schaffe)), Inhalte und Formatierungen sollen ganz getrennt sein und zumindest WAI-A konform will ich sie dann auch noch hinkriegen.
Dazu mach ich mal alles mit DIVs und entsprechenden CSS-Klassen (was ein ganz schöner "Kampf" ist...).

Jedenfalls hab ich jetzt folgendes Problem:
Mein Hintergrundbild vom DIV-Container soll die Page vertikal zu 100% ausfüllen - und zwar immer.
D.h. wenn das Fenster so groß ist, dass der Inhalt nicht gescrollt werden muss, dann soll der Hintergrund trotzdem bis ganz hinunter gehen. Wenn der Inhalt gescrollt werden muss, dann soll beim Runterscrollen unten auch noch der Hintergrund weitergehen, bis zum Ende vom Inhalt (also dann auch bis ganz hinunter). Und wenn die Fenstergröße geändert wird, dann soll das Ganze natürlich auch passen.

Leider gibts hier Unterschiede zwischen IE und anderen Browsern und auch ohne diese Unterschiede wärs recht tricky. Jedenfalls hab ich folgende Varianten ausgetestet:

1.
für html, body und container:
height: 100%;
Firefox hat dann ein Problem, wenn das Fenster zu klein ist und gescrollt werden muss -> unten geht der Hintergrund nicht weiter!
Beim IE funktioniert so alles super.

2.
beim container statt height min-height (wird vom IE nicht unterstützt)
Firefox "verlängert" jetzt zwar den Hintergrund beim Scrollen, ein schmaler Streifen bleibt ganz unten aber trotzdem ohne Hintergrund.
IE: Nix mehr mit 100%, der Hintergrund geht nur mehr bis zum Ende vom Inhalt, egal wie groß das Fenster ist.

3.
beim container beide Zeilen:
height: 100%;
min-height: 100%;
(Reihenfolge ist anscheinend egal!)
Firefox hat wieder genau das gleiche Verhalten wie bei Variante 1.
Beim IE funktioniert wieder alles.

Hier der Link zur Seite, die ich meine:
http://www.powerhalse.at/_v4_/v4pro/

Kann mir irgendwer sagen, wie ich das Problem lösen kann?

[Efchen]

ich bin grade dabei meine Website komplett neu zu programmieren

Weder HTML noch CSS sind übrigens Programmiersprachen.

Dazu mach ich mal alles mit DIVs und entsprechenden CSS-Klassen (was ein ganz schöner "Kampf" ist...).

Das kann ich verstehen. Man macht ja auch kein Layout mit divs. Genausowenig, wie mit Tabellen. Beides ist Krampf. Man macht Layout mit CSS. Das Element <div> ist nur für die Struktur, niemals aber für das Layout zuständig. Und man verwendet es nur, wenn man mehrere Elemente gruppieren will. Um richtig CSS-Layout machen zu können, musst Du Dich mit der Semantik auseinandersetzen, also einer richtigen Struktur Deines Inhalts.

Mein Hintergrundbild vom DIV-Container soll die Page vertikal zu 100% ausfüllen - und zwar immer.

Das passiert im body automatisch.

Leider gibts hier Unterschiede zwischen IE und anderen Browsern und auch ohne diese Unterschiede wärs recht tricky. Jedenfalls hab ich folgende Varianten ausgetestet:

Nicht im body.

für html, body und container:
height: 100%;
Firefox hat dann ein Problem, wenn das Fenster zu klein ist und gescrollt werden muss -> unten geht der Hintergrund nicht weiter!

Ist ja auch logisch. Dein Container ist ja nur 100% hoch. D.h. alles, was nur über das Scrollen angesehen werden kann, ist natürlich höher als 100%.

Beim IE funktioniert so alles super.

Das ist aber falsch.

beim container beide Zeilen:
height: 100%;
min-height: 100%;
(Reihenfolge ist anscheinend egal!)

Ja.

Firefox hat wieder genau das gleiche Verhalten wie bei Variante 1.

Ist ja auch logisch.

Beim IE funktioniert wieder alles.

Und wieder falsch.

Hier der Link zur Seite, die ich meine:

Das ist kein Link.

Kann mir irgendwer sagen, wie ich das Problem lösen kann?

Ja, indem Du Dein Hintergrundbild dem body gibts. Warum Du es Dir auch so schwer machst, kann ich nicht verstehen. Es ist das normalste von der Welt, dass man ein Hintergrundbild dem body gibt, das war auch schon vor CSS so.

P.S.: Das Design der Site lässt mich eher an Botanik denken, an eine Gärtnerei. Kurz vorm Schließen der Seite ist mir dann aufgefallen, dass da was von Windsurfing steht...

[stefacht]

ich bin grade dabei meine Website komplett neu zu programmieren

Weder HTML noch CSS sind übrigens Programmiersprachen.

Weiß ich doch

Dazu mach ich mal alles mit DIVs und entsprechenden CSS-Klassen (was ein ganz schöner "Kampf" ist...).

Das kann ich verstehen. Man macht ja auch kein Layout mit divs. Genausowenig, wie mit Tabellen. Beides ist Krampf. Man macht Layout mit CSS. Das Element <div> ist nur für die Struktur, niemals aber für das Layout zuständig. Und man verwendet es nur, wenn man mehrere Elemente gruppieren will. Um richtig CSS-Layout machen zu können, musst Du Dich mit der Semantik auseinandersetzen, also einer richtigen Struktur Deines Inhalts.

Mein ja eh im CSS
...ist dir aber vermutlich eh aufgefallen, wie du nach dem Kommentieren dieses Satzes weitergelesen hast (sollte man das nicht immer so machen?)

Mein Hintergrundbild vom DIV-Container soll die Page vertikal zu 100% ausfüllen - und zwar immer.

Das passiert im body automatisch.

Leider gibts hier Unterschiede zwischen IE und anderen Browsern und auch ohne diese Unterschiede wärs recht tricky. Jedenfalls hab ich folgende Varianten ausgetestet:

Nicht im body.

für html, body und container:
height: 100%;
Firefox hat dann ein Problem, wenn das Fenster zu klein ist und gescrollt werden muss -> unten geht der Hintergrund nicht weiter!

Ist ja auch logisch. Dein Container ist ja nur 100% hoch. D.h. alles, was nur über das Scrollen angesehen werden kann, ist natürlich höher als 100%.

Beim IE funktioniert so alles super.

Das ist aber falsch.

beim container beide Zeilen:
height: 100%;
min-height: 100%;
(Reihenfolge ist anscheinend egal!)

Ja.

Firefox hat wieder genau das gleiche Verhalten wie bei Variante 1.

Ist ja auch logisch.

Beim IE funktioniert wieder alles.

Und wieder falsch.

Bei mir im IE 6 hats so funktioniert wie ich es gern hätte. Hab einfach die Standard-Einstellungen vom IE, weil ich ihn eigentlich nicht verwende, nur zum Testen.
Wär super, wenn du mir sagen würdest, welche IE-Version du hast und wie er sich bei dir verhält!

Hier der Link zur Seite, die ich meine:

Das ist kein Link.

Sorry, hab gedacht das wird funktionieren...

Kann mir irgendwer sagen, wie ich das Problem lösen kann?

Ja, indem Du Dein Hintergrundbild dem body gibts. Warum Du es Dir auch so schwer machst, kann ich nicht verstehen. Es ist das normalste von der Welt, dass man ein Hintergrundbild dem body gibt, das war auch schon vor CSS so.

Der Hintergrund soll aber eben horizontal zentriert sein und nur vertikal wiederholt werden, darum hab ich den Hintergrund dem Container gegeben.

P.S.: Das Design der Site lässt mich eher an Botanik denken, an eine Gärtnerei. Kurz vorm Schließen der Seite ist mir dann aufgefallen, dass da was von Windsurfing steht...

Glaub mir, Surfer erkennen das schon - da ist das Design sehr eindeutig. Die Site ist ein Online Windsurfmagazin, mit zusätzlichem Fokus auf Reisen.

Aloha & Hang loose!

Steffi

[Efchen]

ich bin grade dabei meine Website komplett neu zu programmieren
Weder HTML noch CSS sind übrigens Programmiersprachen.
Weiß ich doch

Wie "programmierst" Du sie dann?

Dazu mach ich mal alles mit DIVs und entsprechenden CSS-Klassen (was ein ganz schöner "Kampf" ist...).
Das kann ich verstehen. Man macht ja auch kein Layout mit divs.
Mein ja eh im CSS

Du scheinst viel sagen zu wollen, drückst Dich aber immer verkehrt aus?

...ist dir aber vermutlich eh aufgefallen, wie du nach dem Kommentieren dieses Satzes weitergelesen hast (sollte man das nicht immer so machen?)

Mach ich nie ;-)
Aber, selbst wenn ich herausfinden würde, dass Du das weißt, würde ich es Dir ankreiden, weil
a) Anfänger sich diese falsche und oftmals verwirrende (bei der Problemsuche) Ausdrucksweise angewöhnen
b) ich nicht verstehe, warum die Menschen dazu tendieren, etwas, das sie sagen wollen, immer anders und missverständlich ausdrücken müssen.

Bei mir im IE 6 hats so funktioniert wie ich es gern hätte.

Das heißt ja nicht, dass es so richtig ist. Der IE hat erhebliche Schwächen in Sachen CSS, wenn etwas da so aussieht, wie Du es willst, und im FF anders, dann ist die Wahrscheinlichkeit bei 99%, dass Du es falsch gemacht hast.

Wär super, wenn du mir sagen würdest, welche IE-Version du hast und wie er sich bei dir verhält!

Ich habe hier auf Linux nur den IE6, aber den krame ich ungern raus. Aber so weit bist Du ja noch gar nicht, dass Du die Fehler des IE ausbügeln musst, wenn ich Dich richtig verstehe, hast Du ja noch keine Standardkonforme Lösung...?

Hier der Link zur Seite, die ich meine:
Das ist kein Link.
Sorry, hab gedacht das wird funktionieren...

Die Forumshasen würden jetzt auf die FAQ verweisen...

Der Hintergrund soll aber eben horizontal zentriert sein und nur vertikal wiederholt werden, darum hab ich den Hintergrund dem Container gegeben.

Dann schau Dir mal die background-Eigenschaft von CSS an, da kannst Du genau das machen.

[stefacht]

Na du bist ja eine ganz Schlaue Efchen, schade dass nicht jeder mit dieser einmaligen Intelligenz gesegnet wurde, wirklich ein Jammer...

Schade nur, dass du mit solchen Einträgen das ganze Forum hinunterziehst. Eigentlich habe ich von SelfHTML ja einen sehr positiven und professionellen Eindruck, aber das Forum dazu kann da offensichtlich leider nicht mithalten.

In einem Forum sollte jeder eine sinnvolle, hilfreiche Antwort erhalten, egal wie er seine Frage formuliert.
Ich hab doch wohl mein Problem ganz eindeutig beschrieben und jedem der den Beitrag durchliest sollte klar sein, was ich wissen will.
D.h. entweder jemand weiß eine gute Antwort und teilt sie mir mit, oder er/sie schreibt eben keine Antwort. Und in einem guten Forum findet sich dann immer recht bald jemand, der was sinnvolles schreibt.

Aber solche Beiträge wie deine sind echt unterste Schublade. Wenn man nichts verstehen will, dann versteht man eben nichts. Aber dann sollte man sich auch mit seinen Beiträgen etwas zurückhalten.
Und so ganz nebenbei habe ich das hier für ein Fachforum gehalten, wo mir andere User helfen, Code-Probleme zu lösen - ich habe dich nicht um deine Meinung zu meinem Design gefragt!

Ich hoffe unterdessen, es findet sich doch noch jemand, der mir bei meinem Problem weiterhilft und damit auch diesem Forum wieder etwas mehr Niveau gibt.

[CarstenP]

Hallo,

Na du bist ja eine ganz Schlaue Efchen

Ja, Efchen ist ein ganz schlauer, denn er hat Dir mehrere wichtige Hinweise gegeben:

1.) Warum es mit Deinem Code im Firefox exakt so aussehen muß, wie es im Augenblick aussieht.
2.) Daß der IE Dir es vielleicht wie gewünscht anzeigt, es so aber leider nicht richtig ist.
3.) Wie man es besser macht.

Das einzige, was er Dir verschwiegen hat, ist, daß Du zusätzlich zu seinem Lösungsansatz noch eine Mindestweite für html brauchst, damit es auch in Opera klappt.

Wenn Du seine Hinweise nicht verstehst, dann frag bitte nach, anstatt hier laut zu werden.

In einem Forum sollte jeder eine sinnvolle, hilfreiche Antwort erhalten, egal wie er seine Frage formuliert.

Du hast eine sinnvolle Antwort erhalten.

Ich hab doch wohl mein Problem ganz eindeutig beschrieben und jedem der den Beitrag durchliest sollte klar sein, was ich wissen will.

Efchen hat sehr genau verstanden, was Du wilst. Das hat seine Antwort gezeigt.

D.h. entweder jemand weiß eine gute Antwort und teilt sie mir mit

Genau das hat Efchen getan.

Und in einem guten Forum findet sich dann immer recht bald jemand, der was sinnvolles schreibt.

Stimmt, da gebe ich Dir recht. Sogar gleich die erste Antwort war sehr hilfreich.

Aber solche Beiträge wie deine sind echt unterste Schublade.

Wir reden aber noch vom selben Posting?

Und so ganz nebenbei habe ich das hier für ein Fachforum gehalten, wo mir andere User helfen, Code-Probleme zu lösen - ich habe dich nicht um deine Meinung zu meinem Design gefragt!

Wenn Du nur die Antworten hören willst, die Dir passen, dann suche Dir einen bezahlten Support. In einem Forum wie diesem kannst Du niemandem vorschreiben, wie er zu antworten hat. Im übrigen war Efchens PS der freundliche Hinweis darauf, daß er persönlich das Design nicht unbedingt mit Windsurfing in Verbindung bringt. Wenn die entsprechenden Leutchen sofort merken, worum es geht, dann ist ja alles OK. Wenn Du seinen Hinweis dagegen als persönlichen Angriff auf Dich ansiehst, dann solltest erstmal den Rechner ausschalten, ein gutes Buch zur Hand nehmen, Dich ein bißchen beruhigen und morgen wieder ganz entspannt die Sache neu angehen.

Viele Grüße
Carsten

[Efchen]

Im übrigen war Efchens PS der freundliche Hinweis darauf, daß er persönlich das Design nicht unbedingt mit Windsurfing in Verbindung bringt. Wenn die entsprechenden Leutchen sofort merken, worum es geht, dann ist ja alles OK. Wenn Du seinen Hinweis dagegen als persönlichen Angriff auf Dich ansiehst, dann solltest erstmal den Rechner ausschalten, ein gutes Buch zur Hand nehmen, Dich ein bißchen beruhigen und morgen wieder ganz entspannt die Sache neu angehen.

Diese Arten von Antworten, wo der OP in die Defensive geht, kennt man als langjähriger Foren.Helfer doch sehr gut, oder?
Ich sag da aber lieber nicht mehr dazu.

[Efchen]

Na du bist ja eine ganz Schlaue Efchen

Nein, DAS bin ich nicht ;-)

schade dass nicht jeder mit dieser einmaligen Intelligenz gesegnet wurde, wirklich ein Jammer...

Findest Du? Dann bräuchte man ja kein Forum mehr.

Schade nur, dass du mit solchen Einträgen das ganze Forum hinunterziehst.

Ich finde, Du ziehst mit Deiner Antwort das Forum runter.

In einem Forum sollte jeder eine sinnvolle, hilfreiche Antwort erhalten

Ich fand sie durchaus hilfreich. Wenn Du was nicht verstehst, musst Du nachfragen.

egal wie er seine Frage formuliert.

Die Formulierung der Frage des OP ist eine ganz wichtige. Wird sie schlecht formuliert, kommen unpassende Antworten.

Ich hab doch wohl mein Problem ganz eindeutig beschrieben

Wenn ich Dir nicht eindeutig geantwortet habe, wirst Du das wohl nicht getan haben. Es ist auffällig, dass Du immer Sachen sagst, die Du ganz anders meinst. Wie soll man Dich dann verstehen?

und jedem der den Beitrag durchliest sollte klar sein, was ich wissen will.

Naja, die Lösung für Dein Problem ist ja schon genannt worden. Mehrfach. Wenn Dir das nicht reicht, musst Du nachfragen.
"Wer nicht fragt, bleibt dumm" - Das sagte schon die Sesamstraße.

D.h. entweder jemand weiß eine gute Antwort und teilt sie mir mit

Das tat ich.

Aber solche Beiträge wie deine sind echt unterste Schublade.

Nein, Deine Antwort ist unterste Schublade. Woher soll ich wissen, was Du verstehst, was nicht? Ich sage Dir die Lösung, wenn Du das nicht verstehst, musst Du weiter nachfragen.

Wenn man nichts verstehen will, dann versteht man eben nichts.

Und dann machst Du den Antwortenden dafür verantwortlich, dass Du nichts verstehst?

Aber dann sollte man sich auch mit seinen Beiträgen etwas zurückhalten.

Was zurückhalten? Die Lösung? Eben noch wolltest Du, dass man sich nicht zurückhält mit sinnvollen Antworten.

Und so ganz nebenbei habe ich das hier für ein Fachforum gehalten, wo mir andere User helfen, Code-Probleme zu lösen - ich habe dich nicht um deine Meinung zu meinem Design gefragt!

Ich habe nirgendwo in meinen Antwqorten meine Meinung kundgetan.
Abgesehen davon gilt in Deutschland das Recht auf freie Meinungsäußerung. Wer bist Du, dass Du mir das Recht nehmen willst?

Ich hoffe unterdessen, es findet sich doch noch jemand, der mir bei meinem Problem weiterhilft und damit auch diesem Forum wieder etwas mehr Niveau gibt.

Das Niveau machst Du derzeit kaputt.

[CarstenP]

Hallo,

beim container statt height min-height (wird vom IE nicht unterstützt)
Firefox "verlängert" jetzt zwar den Hintergrund beim Scrollen, ein schmaler Streifen bleibt ganz unten aber trotzdem ohne Hintergrund.

"min-height" alleine bedeutet "mindestens Höhe x, maximal so groß wie der Inhalt", d. h. das Hintergrundbild hört exakt dort auf, wo der Inhalt des Containers aufhört. Alle absolut positionierten Elemente werden aus dem Fluß genommen und zählen eben durch die Positionierung nicht mehr zum Inhalt des Containers, d. h. das Ende Deines Menüs inkl. der Blümchen liegt noch unterhalb des Endes Deines Containers, daher kommt es zu diesem Streifen. Im IE liegen die Listenpunkte dichter zusammen, deshalb fällt es Dir hier nicht auf. Mache Dein Menü mal länger, dann fällt es Dir auch im IE auf.

Und auch ich kann Dir nur raten: Gib das Hintergrundbild dem Body. Du ersparst Dir viel Ärger.

Viele Grüße
Carsten