"Unmögliches Layout"?

[sunny]

Hallo zusammen!

Ich beiße mir hier an einem Layout regelrecht die Zähne aus - ich schaff es nicht, das CSS dafür hinzubekommen und langsam gehen mir echt die Ideen aus wie ich es noch versuchen könnte.

Schematische Darstellung der Layout-Vorlage:

Der Inhaltsbereich hat eine fixe Breite und soll sich automatisch zentrieren. Soweit kein Problem.

Aber: links und rechts davon sollen auch noch Hintergrundbilder angeordnet werden. Aber so, dass sie sich an den Inhaltsbereich "anschmiegen". Also das Bild im linken oberen Eck soll genau am linken Rand des Inhaltsbereichs kleben. Der obere Abstand ist fix. Es sollte deswegen ein Hintergrundbild sein, weil es bei kleineren Bildschirmauflösungen die Zentrierung des Inhaltsbereiches nicht beeinflussen darf, dann soll einfach nur der Inhalt zu sehen sein, die seitlichen Bilder verschwinden dann eben einfach (oder werden abgeschnitten).

Und nochmals ein Aber, noch schlimmer: Es gibt auch noch einen Footer. Dieser befindet sich immer unterhalb des Inhaltes (orientiert sich also vertikal gesehen nicht an der Viewportgröße sondern nur am Text in Inhaltsbereich). Aber er hat ebenfalls wieder solche "Ausläufer" - also Hintergrundbilder links und rechts, die auch noch ganz genau "dranpassen" müssen (und auch bis ganz genau ans Ende der Seite reichen müssen). Und das, obwohl die Contenthöhe ja je nach Seite variabel ist.

Ich hoffe, ihr versteht überhaupt wie es gemeint ist, anhand des Bildes versteht man es hoffentlich halbwegs.

Habe versucht mit Prozentwerten herumzuspielen oder irgendwie vom Inhaltsbereich heraus mit negativen Zahlen die Positionierung der Hintergrundbilder genau auszurechnen, aber es klappt alles nicht.
Ich dachte immer, mit CSS kann man "alles" machen, aber schön langsam bekomme ich meine Zweifel daran. Kann mir irgendjemand helfen? Ich bekomme nichtmal das links oben hin, geschweige denn von diesem Footer ...

Liebe Grüße
sunny

[3vi1]

echo ($light == true) ? 'Guten Tag,' : 'Guten Abend,';

ich habe dieses Problem für meine Webseite gelöst (die "Linien" rechts und links vom Inhalt) indem ich die Hintergrundbilder breiter als den Inhalt gemacht habe und diese dann zentriert hinter dem Inhaltsdiv anzeigen lasse. Die Hintergrundbilder müssen dazu die Breite des Inhalts + zweimal die Breite dessen was überstehen soll haben. Der nicht sichtbare Teil ist transparent.

Grüße

Markus

[sunny]

Hallo Markus,

danke für Deine Antwort!

ich habe dieses Problem für meine Webseite gelöst (die "Linien" rechts und links vom Inhalt) indem ich die Hintergrundbilder breiter als den Inhalt gemacht habe und diese dann zentriert hinter dem Inhaltsdiv anzeigen lasse.

Das funktioniert aber nur, wenn das Hintergrundbild auch einfach als Bild abgespeichert werden kann. Ich weiß aber nie im Vorhinein, wo die Hintergrundbilder vom Footer dann wirklich sein werden. Der Content kann ja mal 500px hoch sein, mal 1000 px usw. Wenn ich das fix abspeichere, dann sind die seitlichen Bereiche vom Footer irgendwo, aber nicht da, wo sie hingehören.

Oder?

Liebe Grüße
sunny

[Stefan Einspender]

Hallo,

Das funktioniert aber nur, wenn das Hintergrundbild auch einfach als Bild abgespeichert werden kann. Ich weiß aber nie im Vorhinein, wo die Hintergrundbilder vom Footer dann wirklich sein werden. Der Content kann ja mal 500px hoch sein, mal 1000 px usw. Wenn ich das fix abspeichere, dann sind die seitlichen Bereiche vom Footer irgendwo, aber nicht da, wo sie hingehören.

kannst Du nicht dem Footer dann dieses Hintergrundbild zuweisen? Also die
gesamte Seite bekommt ein Hintergrundbild und der Footer nochmal ein
eigenes, beide sind wie von Markus beschrieben aufgebaut.

Viele Grüße,
Stefan

[sunny]

Hallo Stefan,

kannst Du nicht dem Footer dann dieses Hintergrundbild zuweisen? Also die
gesamte Seite bekommt ein Hintergrundbild und der Footer nochmal ein
eigenes, beide sind wie von Markus beschrieben aufgebaut.

Der Footer an sich hat ja wieder nur genau dieselbe Breite wie der Inhalt. Er soll nicht breiter werden, wegen der Zentrierung und damit bei kleineren Auflösungen nicht gleich unnötige Scrollbars auftauchen. Wenn ich einem Div mit fixer Größe ein Hintergrundbild zuweise, das größer ist als das Div, dann wird es ja, soweit ich weiß, einfach abgeschnitten. Somit wären meine seitlichen "Footer-Ausläufer" dann weg.

Aber ich werde gleich einmal ein Mini-Layout versuchen umzusetzen, mit meiner vorigen Idee, vielleicht klappt es ja.

Liebe Grüße
sunny

[sunny]

Hallo nochmal!

*Juhuu* - das funktioniert! :-)
Dankeschön - das Forum ist wie immer genial!
So einfach ists, und ich bin nicht drauf gekommen ...

Liebe Grüße und danke
sunny

[sunny]

Ah, aber Du hast mich auf eine Idee gebracht ... man kann Hintergrundbilder ja auch immer am "bottom" positionieren. Ich bräuchte einfach einmal so einen Hintergrund oben und einmal einen unten, mit einem Div das als zweiter "body" im body fungiert, könnte das vielleicht klappen ... werde das gleich mal ausprobieren!

Lg
sunny