Kompliziertes DIV-Container Problem

[ChrisB]

Hi,

die Anforderungen, die du beschreibst, sind für aktuelles CSS eine ziemliche Herausforderung.

Die drei DIV-Container sollen übereinander stehen, das heißt die zwei oberen auf dem unteren aufbauen. Der untere soll in der Höhe variabel sein (je nach Auflösung) und an den zwei roten Fixpunkten (siehe Bilder unten) "befestigt" sein. Ich hab das mal in zwei Bildern dargestellt (eins für hohe Auflösungen, eins für niedrige).

Bei einer kleinen Auflösung, soll die Höhe des Content-Divs sich so verringern, dass die beiden oberen Div-Blöcke nach unten rutschen und zwar nur soweit, dass noch ein paar Pixel zwischen Apfelmotiv und Motto-Div sind.

Das lässt sich ggf. umsetzen, in dem du das ganze per display-Eigenschaft wie Tabellenzeilen/-zellen darstellen lässt.

Bei einer großen Auflösung soll sich die Höhe des Content-Divs sich so vergrößern, dass die beiden oberen Div-Blöcke soweit nach oben rutschen, dass das Motto-DIV genau mittig zwischen oberen Apfelrand und oberen Seitenrand steht.

Das wird schon schwieriger/aufwendiger.

Am einfachsten kommst du vermutlich zum Ziel, in dem du JavaScript zu Hilfe nimmst, um Elementhöhen dynamisch zu berechnen. (Bei Verwendung des resize-Events darauf achten, dass dieser sehr häufig feuert - also ggf. eine Verzögerung einbauen, bevor darauf reagiert wird.)

Für Clients ohne JavaScript gibt es dann ein Fallback-Layout, dass die Anforderungen halt nicht ganz optimal umsetzt.

MfG ChrisB