2 Ebenen in einem DIV

[Mathis]

Hallo,

ich formuliere zunächst ersteinmal mein Ziel, bevor ich das Problem erläutere. Ich habe eine Seite mit folgendem Aufbau:

<div id="header" class="header"></div>
<div id="content" class="content"></div>
<div id="footer" class="footer"></div> 

Soweit so gut, bis hierhin alles kein Problem. Nun möchte ich in jedes dieser DIV's 2 weitere DIV's unterbringen, die genau übereinander liegen. In einem (dem "unteren" der beiden) soll der Hintergrund liegen, in dem anderen der Vordergrund (der Text). Der Sinn dessen ist, dass ich das Hintergrund-DIV mithilfe von style="opacity:0.80; -moz-opacity:0.80; filter:alpha(opacity:80);" (diese Variante soll angeblich cross-browser-save sein) leicht durchscheinend machen möchte, damit der Seitenhintergrund etwas durchscheint, der Text hingegen, der besseren Lesbarkeit halber, nicht durchsichtig ist. Mit PNG's möchte ich nicht arbeiten, um das ganze ohne Browser-Hack (ich bin kein Fan von denen) auch im IE lauffähig zu machen.

Im Prinzip soll das ganze also so aussehen:

<div id="header" class="header">
 <div class="bg"></div>
 <div class="text">Headertext</div>
</div>
<div id="content" class="content">
 <div class="bg"></div>
 <div class="text">Content</div>
</div>
<div id="footer" class="footer">
 <div class="bg"></div>
 <div class="text">Footertext</div>
</div>
<style type="text/css">
.bg {
  opacity:0.80;
  -moz-opacity:0.80;
  filter:alpha(opacity:80); 
  ?:?;
}
.text {
  ?:?;
}
</style> 

Wie bekomm ich jetzt die DIV's .bg und .text so formatiert, dass sie übereinander liegen UND zusätzlich die Höhe des "Eltern-DIV" (.header | .content | . footer) annehmen? Letztendlich soll die Höhe des "Eltern-DIV" sich automatisch an die Höhe des Inhalts des jeweiligen .text-DIV's anpassen (sprich: wenn man mehr in das .text-DIV reinschreibt verändert sich die Höhe des Eltern-DIV's und damit auch automatisch die des Hintergrund-DIV's.

Ich würd ich über Hilfestellung freuen, da ich hier gerade echt nicht weiterkomme...

[Kropff]

wenn ich dich richtig verstanden habe, wird das etwas komplizierter. du musst dann mit position: relativ/absolute und z-index arbeiten. und zwar für alle betroffenen divs. spiel mal damit herum.

peter

[Mathis]

Ok, vielen Dank für den Hinweis. Folgendermaßen scheint es zu gehen:

<div id="header" class="header">
 <div class="bg"></div>
 <div class="text">Headertext</div>
</div>
<div id="content" class="content">
 <div class="bg"></div>
 <div class="text">Content</div>
</div>
<div id="footer" class="footer">
 <div class="bg"></div>
 <div class="text">Footertext</div>
</div>
<style type="text/css">
.bg {
  opacity:0.80;
  -moz-opacity:0.80;
  filter:alpha(opacity:80); 
  position:absolute;
  width:inherit;
  height:inherit;
}
.text {
  position:absolute;
  width:inherit;
  height:inherit;
}
.header, .content, .footer {
  position:relative;
}
</style> 

[Kropff]

Folgendermaßen scheint es zu gehen:

scheint es zu gehen, oder funktioniert es tatsächlich?

peter

[Mathis]

OK, inzwischen habe ich das ganze auf der "Zielseite" implementiert und leider scheint es eben nur zu gehen. Und zwar geht es genau unter der Voraussetzung, dass ich den Eltern-DIV's (.header, .content, .footer) eine feste Höhe und Breite zuordne. Ansonsten liegen sie alle aufeinander. Wobei die Breite nur für den Hintergrund von Bedeutung ist, da dieser sonst nicht angezeigt wird, da er eben 0px breit ist...

Mein Problem liegt also momentan noch darin, dass die Elternelement nicht die Ausmaße des größten Kindelements annehmen. Ihre Größe müsste aber durch die des Textelements bestimmt werden, damit erstens das Hintergrundelement die entsprechende Größe annimmt (height:inherit; width:inherit und zweitens sich das nachfolgende Elternelement entsprechend ausrichtet und nicht mehr über dem Element davor liegt...