Hi Folks,
habe ein Problem mit der Höhe eines DIVS.
Und zwar möchte ich, dass ein DIV (rot markiert),
welches via Z-Index über den anderen Divs liegt,
von der Höhe her immer so weit runter geht, bis
es ans Ende des Content-Divs stößt.
Meine Gerüst sieht wie folgt aus:
Meine CSS-Datei:
Und mein HTML-Code:
Danke für Euer Feedback!
p.s. um die Vorschläge etwas einzugrenzen: Div 6 soll in jedem Fall die Navi und den Head-Bereich überlappen.
habe ein Problem mit der Höhe eines DIVS.
Und zwar möchte ich, dass ein DIV (rot markiert),
welches via Z-Index über den anderen Divs liegt,
von der Höhe her immer so weit runter geht, bis
es ans Ende des Content-Divs stößt.
Meine Gerüst sieht wie folgt aus:
Meine CSS-Datei:
HTML:
body {
background-image: url(images/bg.jpg);
background-repeat: repeat-x;
margin:0px;
margin-left:auto;
margin-right:auto;
}
#main {
position:absolute;
position:static;
margin-left:auto;
margin-right:auto;
width:910px;
margin-top:10px;
z-index:1;
}
#sidebar {
position:absolute;
background-image: url(images/sidebar.jpg);
background-repeat:repeat-y;
width:252px;
height:100%;
margin-top:281px;
margin-left:653px;
z-index:6;
}
#jobsuche {
background-image: url(images/suche.jpg);
background-repeat: no-repeat;
width:252px;
height:98px;
z-index:7;
}
#head {
background-image: url(images/head.png);
background-repeat:no-repeat;
width:910px;
height:303px;
Z-Index:2;
}
#navi {
background-image: url(images/stellenangebote.png);
height:31px;
width:910px;
background-repeat:no-repeat;
Z-Index:3;
}
#content {
background-image: url(images/content.png);
background-repeat:repeat-y;
padding:51px;
padding-top:30px;
width:910px;
z-index:4;
}
#footer {
background-image: url(images/footer.png);
background-repeat:no-repeat;
width:910px;
height:26px;
padding:3px;
z-index:5;
}
HTML:
<!-- MAIN-PAGE -->
<div id="main">
<!-- SIDEBAR -->
<div id="sidebar">
<!-- JOBSUCHE -->
<div id="jobsuche"></div>
<!-- / JOBSUCHE -->
<div><br />
<br />
<br />
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</div>
<!-- / SIDEBAR -->
<!-- HEAD -->
<div id="head"> </div>
<!-- / HEAD -->
<!-- NAVBAR -->
<div id="navi"> </div>
<!-- / NAVBAR -->
<!-- CONTENT -->
<div id="content">
<p>ökölk</p>
<p>sd</p>
<p>fsdf</p>
<p>sdf</p>
<p>sdf</p>
<p>sdf</p>
<p>sdfsdf</p>
</div>
<!-- /CONTENT -->
<!-- FOOTER -->
<div id="footer"></div>
<!-- / FOOTER -->
</div>
<!-- / MAIN-PAGE -->
Danke für Euer Feedback!
p.s. um die Vorschläge etwas einzugrenzen: Div 6 soll in jedem Fall die Navi und den Head-Bereich überlappen.
Zuletzt bearbeitet: