stefacht: Layout mit DIV-Containern - Höhe 100%

Beitrag lesen

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