div mit mehreren Hintergründen?

[VerteX]

hi

gibt es eine möglichkeit einem div (oder einem anderen objekt) mehrere, unterschiedlich ausgerichtete grafiken als hintergründe zu verpassen?

mein problem ist folgendes:
ich habe ein div, welches zurzeit eine hintergrundgrafik hat, die auf die größe des divs perfekt abgestimmt ist (die grafik enthält rahmen, lichteeffekte und solchen schnickschnack).
wird der inhalt jedoch größer als das div, sieht das ganze dann nicht mehr so schön aus, weil die grafik entweder wiederholt wird oder, wenn man den hintergrund auf no-repeat stellt, es so aussieht, als würde der inhalt aus dem objekt herausragen.

meine idee ist, die eigentliche grafik in drei grafiken zu zerschneiden und diese dann als hintergründe zu benutzen:
eine mit fester größe für den oberen teil, eine mit fester größe für den unteren teil und falls das div dann höher ist wird zwischen den beiden grafiken mit einer weiteren grafik aufgefüllt.

ich hoffe jemand kann mir helfen :)

[ChrisB]

Hi,

gibt es eine möglichkeit einem div (oder einem anderen objekt) mehrere, unterschiedlich ausgerichtete grafiken als hintergründe zu verpassen?

Ja - auf CSS 3 (und dessen Umsetzung in den Browsern) warten.

meine idee ist, die eigentliche grafik in drei grafiken zu zerschneiden und diese dann als hintergründe zu benutzen:
eine mit fester größe für den oberen teil, eine mit fester größe für den unteren teil und falls das div dann höher ist wird zwischen den beiden grafiken mit einer weiteren grafik aufgefüllt.

Das ist die derzeit absolut übliche Vorgehensweise.

Natürlich braucht sie auch drei Elemente, die jeweils ein Hintergrundbild bekommen. Ggf. hat man die eh schon im Code, so dass man bspw. der ersten Überschrift im DIV die obere Grafik, dem DIV selber die zu wiederholende, und dem letzten Element die untere verpassen kann.
Sonst muss man halt noch zwei zusätzliche Elemente einbauen. Wenn man sich mit denen nicht das HTML verschmutzen will, dann kann man die auch per JavaScript erzeugen.

MfG ChrisB

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

Sonst muss man halt noch zwei zusätzliche Elemente einbauen. Wenn man sich mit denen nicht das HTML verschmutzen will, dann kann man die auch per JavaScript erzeugen.

Oder per CSS.

Qapla'

[VerteX]

Natürlich braucht sie auch drei Elemente, die jeweils ein Hintergrundbild bekommen.

ich habe mir nun was dazu überlegt und eine testseite erstellt.
meine umsetzung funktioniert aber nur teilweise:
mit fest vorgegebener höhe funktioniert das ganze einwandfrei, aber sobald man "height: auto;" einstellt, geht alles den bach runter.

Beispieldatei

gibt es nun eine nicht-javascript möglichkeit, die höhe des umschließenden divs an das element mit der höchsten höhe anzupassen?
also wenn das content-div größer ist, dann an die höhe von diesem und wenn die "grafik"-divs höher sind an diese beiden?

[ChrisB]

Hi,

mit fest vorgegebener höhe funktioniert das ganze einwandfrei, aber sobald man "height: auto;" einstellt, geht alles den bach runter.

Es „geht alles den Bach runter”, weil du so viel absolute Positionierung benutzt. Verzichte darauf.

MfG ChrisB

[VerteX]

Es „geht alles den Bach runter”, weil du so viel absolute Positionierung benutzt. Verzichte darauf.

wie kann ich denn dem div mit der grafik für die untere kante anders sagen, dass es an der unteren kante ausgerichtet sein soll?

[ChrisB]

Hi,

wie kann ich denn dem div mit der grafik für die untere kante anders sagen, dass es an der unteren kante ausgerichtet sein soll?

Platziere die Elemente nicht nebeneinander, sondern in einander.
Richte nicht Elemente aus, sondern Hintergrundbilder.

MfG ChrisB

[VerteX]

Platziere die Elemente nicht nebeneinander, sondern in einander.
Richte nicht Elemente aus, sondern Hintergrundbilder.

solche tricks und feinheiten des CSS-standards vergess ich immer, klasse tip.

vielen dank, nun funktioniert das ganze :)