Probleme mit Abständen und z-index (DIV) @ tutorials.de: Tutorials, Forum & Hilfe

Sebigf · 21.06.06 02:28

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

Sven Mintel · 21.06.06 02:45

#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

Maik · 21.06.06 05:53

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.

Sebigf · 21.06.06 08:31

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

Maik · 21.06.06 08:34

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.

Sebigf · 21.06.06 08:42

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-Code:

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

Danke

Maik · 21.06.06 12:28

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-Code:

<!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>

Sebigf · 21.06.06 13:49

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-Code:

#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 ?

Maik · 21.06.06 16:57

Kurz und knapp: nein.

HTML-Code:

<!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>

Sebigf · 21.06.06 19:50

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-Code:

#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; }

Maik · 21.06.06 19:57

Dann formatiere auch dieses DIV mit der height:100%-Eigenschaft

Und nenne bitte beim nächsten Mal gleich zu Beginn alle enthaltenden Seitenelemente und serviere die Infos nicht "häppchenweise".

Sebigf · 21.06.06 20:05

Es geht immernoch nicht...

Hier nochmal alle CSS-Teile:

HTML-Code:

html, body {  margin:0; padding:0; height:100%; }

#container     { width:920px; height:100%; 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; }

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

Vielleicht findest Du ja einen Fehler...

#container = Basis DIV (Rahmen)
#box_outer = rechte Spalte
#box_inner = linke (Haupt-)Spalte

Maik · 21.06.06 20:08

Am CSS-Code kann es nicht liegen, denn der funktioniert weiterhin in allen mir zur Verfügung stehenden Browsern fehlerfrei.

Zeig doch mal den vollständigen Quelltext deiner HTML-Seite, vielleicht gibt es ja noch ein weiteres DIV, das die Regel wieder aushebelt?

Maik · 22.06.06 06:50

Vielleicht hilft dir ja der Quelltext meiner Testseite bei der Fehlersuche weiter:

HTML-Code:

<!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%;
}

#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;
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="container">
     <div id="box_inner">box_inner</div>
     <div id="box_outer">box_outer</div>
</div>

</body>
</html>

Browsercheck: Firefox 1.5.0.4, IE 6.0, Mozilla 1.7.12, Netscape 7.0, Opera 8.50 | Win2000

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Vererbung von Abständen

Probleme mit z-index

Probleme mit Abständen zwischen den divs bei IE!

Probleme mit Abständen

Probleme mit z-index und Reitern

E-Mail:

Abonnieren Abbestellen