BG des body nicht länger als 100% des Viewpoints

[Seeker]

Bei folgender Seite: http://bruno.viviane.ch/
... will der Body nicht länger sein als 100%. Ich hab's schon mit weglassen von height:100%; mit min-height, display:table; overflow und einem clearer-DIV versucht (obwohl ich gar keine floats habe). Hat alles nichts genützt.

Hier das Stylesheet: http://bruno.viviane.ch/basis/bruno.css

Am tollsten wäre es, wenn das Hintergrundbild am unteren Rand des Viewpoints und “background-attachment: fixed” sein würde. So dass man es auf Anhieb beim Öffnen der Seite sieht und nicht erst, wenn man heruntergescrollt hat. Aber solange das background-Problem nicht gelöst ist, bringt das auch nichts.

Für Hilfe wäre ich echt froh!

[sejuma]

100% height entsprechen der Viewportgröße, also der Höhe des Bildschirmfensters.
Das Problem sieht mir nach einem Fall für Faux Columns aus: http://www.ohne-css.gehts-gar.net/0005.php

Lass also mal die ganzen prozentualen Höhenangaben weg.
Verzichte ebenso auf absolute und relative Positionierungen und arbeite besser mit float und margin.

[Seeker]

Hi Sejuma

Vielen Dank für den Tipp! Habe jetzt mal die verschachtelten DIVs auseinander genommen, sie auf float:left gestellt und Positionierungen und Höhenangaben rausgenommen.

Siehe hier: http://bruno.viviane.ch/test/
Das dazugehörige Stylesheet: http://bruno.viviane.ch/test/basis/bruno.css

Leider sieht es nicht so aus, wie vorgesehen. Die beiden DIVs "balken1" und "balken2" werden gar nicht mehr angezeigt und "hintergrund" nur unvollständig. Einzig das DIV "Inhalt" wird korrekt dargestellt.

Der Artikel "Faux Columns" ist insofern nicht anwendbar, als dass ich nicht möchte, dass alle DIVs gleich lang sind. Damit das Hintergrundbild 'fixed' und immer im Viewport sichtbar ist, möchte ich gerne, dass alle DIVs so lang sind wie der Viewport, also 100% mit Ausnahme des DIVs "Inhalt", welches entsprechend dem Inhalt länger ist.

Weisst du vielleicht eine Lösung?*hoff*

[sejuma]

#balken1 und #balken2 haben weder Inhalt, noch sind sie per CSS mit Höhen und Breiten definiert. Also können sie auch nicht angezeigt werden.

[Seeker]

Ich hatte ihnen die Höhe 100% angegeben, doch solange body und html keine Höhe von 100% haben, werden sie nicht angezeigt.

Ich habe die Höhen nun überall wieder eingefügt: http://bruno.viviane.ch/test/

Doch jetzt habe ich wieder dasselbe Problem wie am Anfang, dass body nicht so lang ist, wie das DIV "Inhalt" und somit der Hintergrund verschwindet, sobald ich runterscrolle.

[sejuma]

Nimm bei body und html den height-Wert raus. Kannst die Angaben ja zunächst mal nur auskommentieren.

Dann cleare, indem du vor dem Schließen von body dies einfügst:

Code: Alles auswählen

<div style="clear: both;"><!--Clear-div--></div>

Danach sollte noch der mittlere hellgrau-blaue Hintergrund fehlen.
Das könntest du so lösen, indem du #inhalt in einen 500px breiten Div mit der Hintergrundfarbe #dce0e7 setzt und #inhalt einen margin-right von 50px gibst.
Auf #balken1 und #balken2 kannst du dann verzichten.

[Seeker]

Vielen Dank, jetzt sieht's mit dem body schonmal besser aus.

Die Balken-DIVs habe ich der Einfachheit halber mal weggelassen: http://bruno.viviane.ch/test/
Allerdings ist #hintergrund (ich habe dem DIV zur Veranschaulichung eine andere Farbe gegeben) immer noch nur so hoch wie sein Inhalt, weswegen auch das Hintergrundbild nicht mehr angezeigt wird. Wie lässt sich dieser Widerspruch lösen?

Bei mir gibt es ganz zuunterst einen weissen horizontalen Balken von 8 Px Höhe. Ist das bei dir auch so?

[sejuma]

Du kannst #hintergrund eine Pixelhöhe geben, welche die Höhe des Hintergrundbildes berücksichtigt.
Alternativ kannst du das Hintergrundbild auch dem body zuweisen.

Der weiße Balken ist nur im IE zu sehen. Lass den letzten clearfix weg. Dessen Bedeutung kann ich eh nicht nachvollziehen.

[Seeker]

Ich möchte mich herzlich bedanken, dass du mir so lange geholfen hast, aber es scheint, als bewegen wir uns eher wieder mehr auf das Layout zu, wie ich es zu Beginn hatte und löst die besagten Probleme leider nicht.

Zum Glück habe ich jetzt eine Lösung gefunden: http://bruno.viviane.ch/
Stylesheet: http://bruno.viviane.ch/basis/bruno.css