Probleme mit Abständen und z-index (DIV)

Status
Nicht offen für weitere Antworten.
Sebigf

Sebigf

Erfahrenes Mitglied
Hallo zusammen...

Ich habe ein Layout gemacht, welches auf folgenden DIV-Ebenen besteht:

#background = Beinhaltet ein BG-Image mit Verlauf der x-achse (also verlaut horizontal)
#content = Beinhaltet das Haupt-DIV für jeden Content

Soweit so gut... mit dem überlappen habe ich keine Probleme. Nur ist die #content Klasse "immer" am Ende der Seite platziert. Es lässt sich einfach ein Abstand unter #content bringen. Kann mir da jemand helfen ?

Hier die Klassen-Codes

Code: 
#background { 
height:513px; 
overflow:hidden; 
background-image:url('images/navigation_main_bg_top.gif'); 
background-repeat: x-repeat; 
}
#content { 
float:left; 
width:920px; 
z-index:2; 
margin-bottom:30px; 
background-color:#5f7f94; 
background-image:url('images/body_main_bg.gif'); 
background-repeat: y-repeat; 
position:absolute; 
left:50%; 
margin-left:-460px; 
text-align:center;
}

Das Problem ist einfach, wenn ich ein weiteres DIV mit einbringen will, zb. unter #content, dann wird dieses unter #background gehangen, als an #container.



Danke
 
#content ist absolute positioniert...dadurch beinflusst es nicht die Position anderer Seitenelemente....also: nimm diese Positionsangabe heraus, und nachfolgende Elemente kleben unter #content.

Ich weiss allerdings nicht, ob ich dich jetzt richtig verstanden habe... irgendwie muss man deine Beiträge immer 5x lesen, bevor man zumindest eine Ahnung hat, was du meinst :-(

Vielleicht kannst du daran ja mal etwas feilen :)
 
Nur mal so am Rande angemerkt: es handelt sich hierbei um IDs und nicht um Klassen.

Wie Sven schon richtig erkannte, liegt es an der absoluten Positionierung, die mit left:50% sowie margin-left:-460px der horizontalen Zentrierung des Elements dienen soll, und sich auch mit einer relativen Positionierung regeln lässt:

Code: 
#content { 
position:relative;
left:50%;
margin-left:-460px;
margin-bottom:30px;
z-index:2;
width:920px;
background-color:#5f7f94;
background-image:url('images/body_main_bg.gif');
background-repeat: repeat-y;
text-align:center;
}
Auf diese Weise werden alle nachfolgenden Elemente unter dem DIV #content angeordnet.
 
Sven Mintel: Danke für den Hinweis. Ich werde es mir zu herzen nehmen. Danke für deine Lösung :)

michael: Ja, es sind keine Klassen, ich weis. Habe es nur so im Kopf gehabt, da es damals einmal Klassen waren. Danke für deine Lösung!

Es hat wirklich funktioniert. Danke für die schnelle Hilfe :)


Ich habe noch einige Fragen. Ich mache dafür keinen neuen Thread auf.

- Ich habe nun das Problem, dass sich trotz dem (background-repeat: x-repeat;) das Hintergrundbild "Zeile" für "Zeile" wiederholt, außer nur seitlich. (Betrifft nur den IE 6 bisher)

- Ich bin gestern auf etliche Lösungen für DIV's gestoßen, mit denen es möglich sein soll das DIV mit "height:100%;" zu belegen. (html { height:100%; } ) Leider hat es nicht funktioniert. Gib es da noch andere Lösungswege mittlerweile ?

Danke
 
Die Werte lauten repeat-x bzw. repeat-y.

Neben der height-Angabe für den Viewport und Dokumentkörper (html und body), benötigt auch das entsprechende DIV diese Eigenschaft. Als Beispiel hierzu siehe auch den Thread Footer unten plazieren.
 
ROFL @ Repeat :)

Ok, das habe ich gemacht.

body, html { height:100%; }
.the_div { height:100%; }


Trotzdem wird das DIV nur anhand den Inhalts groß gezogen...

Hier das DIV selber:

HTML: 
#box_outer    { float:left; width:165px; height:100%; overflow:visible; border-left:solid 1px #607f93; background-color:#fef5e4;}

Danke
 
Also bei mir funktioniert's einwandfrei, Testumgebung: Win2k, Firefox 1.5.0.4, IE 6.0, Mozilla 1.7.12, Netscape 7.0, Opera 8.50.

Hier der Quelltext meiner Testseite:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
html, body {
height: 100%;
margin: 0;
padding: 0;
}

#box_outer {
float:left;
width:165px;
height:100%;
overflow:visible;
border-left:solid 1px #607f93;
background-color:#fef5e4;
}
-->
</style>

</head>
<body>

<div id="box_outer">box_outer</div>

</body>
</html>
 
Dein Lösungsvorschlag geht bei mir nun auch... Habs einfach mal copy & paste eingefügt mit DW.

#box_outer ist das zweite DIV in einer Zeile. Vielleicht liegt es daran.

HTML: 
#box_inner    { float:left; width:740px; height:100%; overflow:auto; background-color:#FFF;}

#box_inner befindet sich direkt links neben #box_outer. Kann es daran liegen ?
 
Kurz und knapp: nein.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
html, body {
height: 100%;
}

#box_outer  {
float:left;
width:165px;
height:100%;
overflow:visible;
border-left:solid 1px #607f93;
background-color:#fef5e4;
}

#box_inner {
float:left;
width:740px;
height:100%;
overflow:auto;
background-color:#ffff00;
}
-->
</style>

</head>
<body>

<div id="box_outer">box_outer</div>

<div id="box_inner">box_inner</div>

</body>
</html>
 
Mmh, es geht einfach nicht.

Kann es vielleicht daran liegen, dass ich diese beiden DIV nochmal in einem DIV habe ? Also quasi umrahmt noch einmal.

Hier der entsprechende Code:

HTML: 
#container     { width:920px; z-index:2; background-color:#5f7f94; background-image:url('images/body_main_bg.gif'); background-repeat: repeat-y; position:relative; left:50%; margin-left:-460px; text-align:center; }
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück