soezkan: Hintergrundfarbe bei verschachtelten DIV-Ebenen

Beitrag lesen

SELF-Forum

Hintergrundfarbe bei verschachtelten DIV-Ebenen

soezkan
– Informationen zu den Bewertungsregeln

Ich habe einen Lösungsansatz gefunden (Vielen Dank für eure Hilfe, nach stundenlanger Recherche im Internet habe ich eine Kombi aus CSS + JS hinbekommen). Das spacer.jpg ist ein 1px X 1px großes weisses JPG das aufgezogen wird:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Testen</title>
<script language="Javascript">

function Viewport(){
 var windowX = (document.documentElement && document.documentElement.clientWidth) || window.innerWidth || self.innerWidth || document.body.clientWidth;
 var windowY = (document.documentElement && document.documentElement.clientHeight) || window.innerHeight || self.innerHeight || document.body.clientHeight;
 var scrollX = (document.documentElement && document.documentElement.scrollLeft) || window.pageXOffset || self.pageXOffset || document.body.scrollLeft;
 var scrollY = (document.documentElement && document.documentElement.scrollTop) || window.pageYOffset || self.pageYOffset || document.body.scrollTop;
 var pageX = (document.documentElement && document.documentElement.scrollWidth) ? document.documentElement.scrollWidth : (document.body.scrollWidth > document.body.offsetWidth) ? document.body.scrollWidth : document.body.offsetWidth;
 var pageY = (document.documentElement && document.documentElement.scrollHeight) ? document.documentElement.scrollHeight : (document.body.scrollHeight > document.body.offsetHeight) ? document.body.scrollHeight : document.body.offsetHeight;

return pageY;
}

function pagesize(scroll) {

if (self.innerHeight) // all except Explorer
 {
  document.getElementById("spacerjpg").height = Viewport();
 }
 else if (document.documentElement && document.documentElement.clientHeight)
  // Explorer 6 Strict Mode
 {
  document.getElementById("spacerjpg").style.height = Viewport();
 }
 else if (document.body) // other Explorers
 {
  document.getElementById("spacerjpg").style.height = Viewport();
 }
}
</script>
<style type="text/css">

body {
 background-color: #c5c5c5;
 margin-top: 0px;
}

#box {}

#main {
 z-index: 1;
 width: 860px;
 margin: 0px auto 0px auto;
 padding: 0px;
 height: 100%;
 background-color: #ffffff;
 background-image: url(Untitled-1-Dateien/spacer.jpg);
 background-repeat: repeat;
 text-align: right;
}

#block {
 position: absolute;
 z-index: 2;
}

#inhalt {
 position: absolute;
 width: 600px;
 z-index: 4;
 padding-top: 230px;
 padding-left: 246px;
}

</style>
</head><body onresize="pagesize()" onload="pagesize()">
<div id="box">
 <div id="main">
  <div id="block"> <img id="spacerjpg" src="images/spacer.jpg" alt=""></div>
  <div id="inhalt">Vestibulum tempor nibh eleifend diam. Aenean blandit turpis at leo. Sed a leo non tortor congue aliquam. Donec ac justo sit</div>
 </div>
</div>
</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln