CSS ContentBox mit fancy Rand - nicht lösbar?

[PW-toXic]

Ich hab jetzt schon ne ganze Weile rumprobiert, aber ich bekomm es einfach nicht hin mit DIVs und CSS mein Layout von 3 Bildern für eine Content Box hinzubekommen. Tricky an der ganzen Sache ist vorallem, dass die Bilder mit PNGs halb-transparent sind, und ich somit nicht einfach ein Bild über ein anderes schieben kann, so wie ich es bisher gemacht habe.
Das Problem ist, dass ich das Layout von der Contentbox oben ein spezielles layout ist (siehe links oben), das recht weit nach unten geht. Der Text soll aber bereits ganz oben anfangen. Dann kommt der sich wiederholende Hintergrund, und dann das gleiche wieder unten.
Ich habe es schon geschafft den Text oben beginnen zu lassen, indem ich einfach mit position: absolute und top: -110px gearbeitet habe, aber ich bekomm dann das layout nicht unter dem Text aufgehört.
Ich habe natürlich schon mit margin-bttom: -xxx px gearbeitet, aber dann schieben sich die Hintergrund Grafiken einfacher übereinander, was nicht sein darf, da die Bilder ja halb-transparent sind.

Das ganze könnt ihr hier live ansehn:
http://pw.hoecht.dyndns.tv/contentBox.php

<div class="content-box">
	<div class="content-box-top"></div>
	<div class="content-box-repeat">
		<div class="content-box-text">Lorem ipsum ... langer Text ... </div>
	</div>
	<div class="content-box-bottom"></div>
</div>

.content-box {
	width: 628px;
	margin-left: 130px;
	margin-top: 185px;
}
.content-box-top {
	background:  url(media/images/layout/content-box-top.png) no-repeat;
	height: 148px;
	
}
.content-box-repeat {
	background-image:  url(media/images/layout/content-box-repeat.png);
	background-repeat: repeat-y;
}

.content-box-text {
	position: relative;
	top: -110px;
	text-align: justify;
	padding-left: 35px;
	padding-right: 35px;
	color: black;
}

.content-box-bottom {
	background: url(media/images/layout/content-box-bottom.png) no-repeat;
	height: 100px;
}

Ich würd mich wirklich über eine Hilfe freun, weil ich da jetzt schon eine ganze Weile rumprobiert hab, und ich das Design nicht wegen HTML/CSS ändern kann/möchte.

Ergänzung (8. März 2010)

<script type="text/javascript">
    $(function() {
        $('#contentBox').height(  $('#contentBox').height() - 170 );
    });
</script>

damit gehts.. aber is halt javascript Oo

 

[gstarr]

@PW-toXic

Hmm schon, aber wofür jQuery verwenden? Scriptgröße ~60kb, ich würde vlt. die Seite komplett überarbeiten. Konnte aber auf die Schnelle keine andere Lösung für dich finden.

 

[PW-toXic]

1) Das wird eine "gaming" Seite. 60 KB sind da nen Witz gegen die locker 500KB Bilder + flash zeugs.
2) JQuery wird auf der Seite eh benötigt

Was meinst du mit "die Seite komplett überarbeiten?" Meinst du damit das Layout zu ändern?

 

[gstarr]

Also das Layout ist ja unkompliziert und lässt sich ziemlich gut realisieren. Habe bisschen in den Quelltext reingeschaut und sehe totales Chaos, obwohl W3 Validator soweit keine Fehler anzeigt.

Ich weiss nicht wie der Originalquelltext ausschaut, aber würde das Ganze eher mit PHP ausgeben und halt etwas übersichtlicher, unkomplizierter und so wenig wie möglich umständlicher.

Damit meine ich die DIV Struktur nochmal komplett überdenken und mehrere Ebenen vlt. sogar kombinieren. Kann dir aber grad schlecht helfen, habe auf der Arbeit keine Anwendungen für und mit Notepad dauert es mir zu lange.

Aber es funktioniert ja soweit =) das ist ja das Wichtigste

Gruß

 

[PW-toXic]

Wo ist da ein Chaos? Und wenn es denn so unkompliziert ist, dann müsste es ja eine einfache Lösung geben. Genau das bezweifle ich und glaub es nicht bis mir jemand das Gegenteil beweist Einfach zu behaupten es geht ganz einfach ist doch ein wenig billig bzw. hilft mir kein bisschen weiter.

Was hat das ganze mit php zu tun? Was soll ich denn mit PHP ausgeben bzw berechnen?

 

[gstarr]

@PW-toXic
mit Chaos meinte ich die "http://pw.hoecht.dyndns.tv/" Seite und nicht die PHP die du verlinkt hast,
sehe gerade aber das diese ständig von dir aktualisiert wird, daher ist da ein Chaos!!

War ja nicht böse gemeint und beweisen muss hier keiner was
Aber die Lösung scheint ja gut zu funktionieren, Glückwunsch an dieser Stelle^^

Gruß

 

[PW-toXic]

Ja aber was meinst du mit Chaos?

den HTML Code? Ich wär wirklich froh über jeden Tipp wie ich die extreme Div Suppe vereinfachen könnte.

 

[QXARE]

Schaut bissal schwierig aus. Was man vllt. machen könnte ist dass du deine Hintergrundbilder nochmals vom Schatten trennst. Dann kannst du noch einen Wrapper machen der nur für den Schatten zuständig ist.

Oder du wrappst die ganze Box ohne Content und legst dann den Content nochmal drüber. Keine Ahnung ob das geht. Bin schon von deiner JS Lösung fasziniert

 

[PW-toXic]

;(
Keiner der eine reine HTML/CSS Lösung für das Problem kennt?
So aussergewöhnlich ist es ja nun auch wieder ned, was ich machen möchte

 

[PW-toXic]

Ich hab jetzt eine Lösung gefunden:

<head>
<style type="text/css">

.bg-repeat-y {
	background: url(/media/images/layout/content-box-repeat.png) repeat-y;
	margin-top: 149px;
	margin-bottom: 94px;
	padding-top: 1px;
}

.bg-static-top {
	background: url(/media/images/layout/content-box-top.png) no-repeat;
	margin-top: -149px;
	padding-bottom: 1px;
}

.bg-static-bottom {
	background: url(/media/images/layout/content-box-bottom.png) no-repeat;
	margin-bottom: -94px;
	padding-left: 40px;
	padding-top: 30px;
	padding-bottom: 20px;
	background-position: bottom left;
}


</style>

<script type="text/javascript" src="/media/js/jquery-1.3.2.min.js"></script>

</head>
<body>

<div class="bg-repeat-y">
	<div class="bg-static-top">
		<div class="bg-static-bottom">
			test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
			test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
			test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
			test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
		</div>
	</div>
</div>

</body>
</html>

Der Trick liegt darin, dass margins collapsen, wenn man kein border bzw padding hat.. Das hab ich mal wieder vergessen.
Vielen Dank an #css.de, die mir den Tipp gegeben haben.