✔ Dynamischer, schattierter Rahmen - Höhe kann nicht ausgerechnet werden

[Da Hacker]

Hallo liebe Tutorials.de-Community,

da mich CSS generell irgendwie nicht mag, hoffe ich bei euch ein wenig Hilfe zu bekommen.
Ich habe schon nach Seiten und Foreneinträgen gesucht, die mein Problem behandeln. Aber bisher bin ich - leider - noch nicht fündig geworden. Wahrscheinlich sowieso ein Klacks für meinen zukünftigen Helfer

Also dann schieß ich mal los:
Es geht um das Layout dieser Seite: http://lwtv.de/projects/lwlife/
Wie man dort unschwer erkennen kann, gibt es Probleme mit dem Schatten, der eigentlich um den ganzen Header/Navi/Content-Bereich fließen sollte. Beim oberen Teil klappt das ganz gut - aber auch nur, weil dort eine Höhenangabe für den Schattenfluss definiert ist. Bei einem sich in der Höhe verändernden Contentbereich geht das aber natürlich nicht. Da ich das Layout zumindest in der Höhe flexibel halten möchte würde es mich freuen, wenn mir hier jemand die Lösung nennen könnte.

Aufgebaut ist das CSS-Layout jetzt in der Form.

	<div style="width: 10px ; height: auto ; min-height: 20px ; background-image: url('./bilder/shadow_left.png') ; float: left ;"></div>
	<div style="width: 1000px ; height: auto ; background-color: white ; float: left ; text-align: left ;">
		[....]
	<div style="width: 10px ; height: auto ; min-height: 20px ; background-image: url('./bilder/shadow_right.png') ; float: left ;"></div>

Also ganz einfach: links ein Div für den linken Schatten, dann das Content-DIV und rechts das Div für den rechten Schatten. Ich habe auch eine min-height angegeben, damit mein Versuch zumindest nicht ganz zerhauen wird. Die ganzen Angaben befinden sich noch in einem übergeordneten Div, um dem Ganzen eine feste Form zu geben.

Und bitte beschmipft mich nicht, weil ich die CSS-Angaben inline definiere - ich arbeite schließlich noch dran

Ich freue mich auf eine Antwort, damit ich mich ins nächste Problem stürzen kann

Danke vielmals!

 

[Maik]

Moin,

die Ursache liegt darin, dass die beiden äußeren DIVs keinen Bezug zum Inhaltsumfang im benachbarten mittleren Block besitzen, und daher in der Höhe auch nicht mitwachsen.

Du kannst aber beide Grafiken (shadow_left.png, shadow_right.png) zu einer Grafik (1020*1px) vereinen, und diese als Hintergrundbild im mittleren DIV-Block verwenden, der dann 1020px breit dimensioniert sein muß, oder du bindest sie im übergeordneten DIV-Block ein, der das komplette Layout umschließt. In beiden Fällen entfallen somit die beiden äußeren DIVs im HTML-Code.

mfg Maik

 

[Da Hacker]

Hi Maik,

vielen Dank für deine schnelle und ausführliche Antwort.

Stimmt, das ist natürlich die einfachste Lösung. Wieso bin ich nicht darauf gekommen

Auf jeden Fall danke ich dir für die Hilfestellung und wünsch dir noch eine schöne Woche.

Ciao:
Adam