Antworten auf deine Fragen:
Neues Thema erstellen

DIV mit z-index soll bis ganz unten gehen

D

danielx11

Nicht mehr ganz neu hier

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:

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;
}
Und mein HTML-Code:

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">&nbsp;</div>
    <!-- / HEAD -->
    
    <!-- NAVBAR -->
    <div id="navi">&nbsp;</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:

M

MainAngler

Excel (SVERWEIS...)

AW: DIV mit z-index soll bis ganz unten gehen

Ich habs mir mal gerade eben angeschaut, da fehlt ja noch soviel um überhaupt was zu sehen.:rolleyes:
Bin also mal hergegangen und habe den einzelnen Divs mal einen Rahmen gegeben.;)

Dein Content-Bereich ist breiter als der Header und die Navi.:uhm:
Ist das gewollt?

Warum gibts du dem Content-Bereich keine exakte Höhenangabe?

Schau dir mal meinen Code dazu an.
Das Div6 schließt unten mit dem Content-Div ab.;)

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title> Your Title Here </title>
<meta name="Generator" content="I.dont.know" />
<meta name="Description" content="Your description here..." />
<meta name="Keywords" content="Your keywords here..." />
<style type="text/css">
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:84%;
margin-top:278px;
margin-left:653px;
z-index:6;
border: 1px solid black;
}

#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;
border: 1px solid red
}

#navi {
background-image: url(images/stellenangebote.png);
height:31px;
width:910px;
background-repeat:no-repeat;
Z-Index:3;
border: 1px solid green;
}

#content {
background-image: url(images/content.png);
background-repeat:repeat-y;
padding:51px;
padding-top:30px;
width:910px;
height:600px;
z-index:4;
border: 1px solid blue
}

#footer {
background-image: url(images/footer.png);
background-repeat:no-repeat;
width:910px;
height:26px;
padding:3px;
z-index:5;
}

</style>
</head>

<body>
<!-- MAIN-PAGE -->
<div id="main">

    <!-- SIDEBAR -->
    <div id="sidebar">
        
        <!-- JOBSUCHE -->
        <div id="jobsuche"></div>
        <!-- / JOBSUCHE -->
        <div><br />
<br />irgendwas
<br />irgendwas
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

</div>
    </div>
    <!-- / SIDEBAR -->

    <!-- HEAD -->
    <div id="head">&nbsp;</div>
    <!-- / HEAD -->
    
    <!-- NAVBAR -->
    <div id="navi">&nbsp;</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 -->
</body>
</html>
Wenn du dem ganzen aber eh keinen Rahmen gibst, dann würde es auch reichen, wenn du dem Div6 keine 100% Höhe sondern z.b. nur 80% geben würdest.
Es schließt dann nicht mit dem Content-Div ab aber das sieht man ja nicht!:muede:

Der Code dazu sieht dann so aus:
Code: 
#sidebar {
position:absolute;
background-image: url(images/sidebar.jpg);
background-repeat:repeat-y;
width:252px;
[B]height:80%;[/B]
margin-top:280px;
margin-left:653px;
z-index:6;
border: 1px solid black;
}
 
Zuletzt bearbeitet:
D

danielx11

Nicht mehr ganz neu hier

AW: DIV mit z-index soll bis ganz unten gehen

Super, dank Dir! Ich glaube das klingt besser als meine angedachte Lösung. Werds mal testen.
 
M

MainAngler

Excel (SVERWEIS...)

AW: DIV mit z-index soll bis ganz unten gehen

Es kommt halt wirklich darauf an, wie das ganze bei dir zum Schluß aussehen soll bzw. am besten aussehen würde.;)

Daher wäre mehr Inhalt in deiner HP schon empfehlenswert um dann weiter zu schaun.
 
D

danielx11

Nicht mehr ganz neu hier

AW: DIV mit z-index soll bis ganz unten gehen

Der Contentbereich wurde weiter auseinander gedrückt, weil er die "normale" breite von 910 hatte + dann noch mal ein padding drinnen war. habe das padding jetzt raus genommen und würde dort noch mal ein div reinpacken mit den padding eigenschaften für den content. Oder kann man auch einfach die padding-breite von den 910 abziehen? was ist üblich?

Die Seite ist gerade noch im Aufbau, daher leider noch kein Content. Aber bin dran :)
 
lauffreak

lauffreak

FotoAnfänger

AW: DIV mit z-index soll bis ganz unten gehen

Halllo!
das mit dem zu breiten CONTENT liegt am margin.
mit dem padding sei vorsichtig - der IE berechnet den anderes als die vernünftigen browser.
Schau mal unter dem Stichwort faux columns nach!
Grüße- lauffreak
 
D

danielx11

Nicht mehr ganz neu hier

AW: DIV mit z-index soll bis ganz unten gehen

Also bei mir ist der CONTENT im FF, IE 7 und IE6 gleich platziert:

#content {
background-image: url(images/content.png);
background-repeat:repeat-y;
padding:51px;
padding-top:30px;
width:808px;
z-index:4;
}

// OK OK im IE6 ist eine kleine Abweichung ;)
 
Zuletzt bearbeitet:
lauffreak

lauffreak

FotoAnfänger

AW: DIV mit z-index soll bis ganz unten gehen

hallo
habe nochmal das nachgestellt: Nimm mal aus dem Content den Dummy Text raus- dann wird dieser noch kleiner.
So kannst du die Höhe schlecht angleichen -> faux columns.
lg - lauffreak
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 191 (Mitglieder: 5, Gäste: 186)
Robots: 889

Statistik des Forums

Themen
118.635
Beiträge
1.538.455
Mitglieder
67.558
Neuestes Mitglied
StarsMan
Oben