DIV-Container existiert nicht - javarea.de Forum powered by javarea.de

Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > DIV-Container existiert nicht

Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > DIV-Container existiert nicht

Pages: [1] 2 ... nächste » ... Letzte »

geschrieben von Matneu am 25.02.2005 - 22:22

Moin,

ich habe ein Problem. Ich tippe sehr stark auf Betriebsblindheit, komme aber nicht drauf.
Habe beispielsweise mal eine XHTML-Datei erstellt:

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51: 
52: 
53: 
54: 
55: 
56:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html>
	<head>
		<title>
			Bla
		</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<style type="text/css">
			div.BG {
				background-color:#f00;
			}
			div.left {
				float:left;
				width:45%;
			}
			div.right {
				float:right;
				width:45%;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="BG">
				<div class="left">
					test test test test test test test test test test test test test test test test test
					test test test test test test test test test test test test test test test test test
					test test test test test test test test test test test test test test test test test
					test test test test test test test test test test test test test test test test test
					test test test test test test test test test test test test test test test test test
					test test test test test test test test test test test test test test test test test
					test test test test test test test test test test test test test test test test test
					test test test test test test test test test test test test test test test test test
					test test test test test test test test test test test test test test test test test
					test test test test test test test test test test test test test test test test test
					test test test test test test test test test test test test test test test test test
					test test test test test test test test test test test test test test test test test
				</div>
				<div class="right">
					test test test test test test test test test test test test test test test test test
					test test test test test test test test test test test test test test test test test
					test test test test test test test test test test test test test test test test test
					test test test test test test test test test test test test test test test test test
					test test test test test test test test test test test test test test test test test
					test test test test test test test test test test test test test test test test test
					test test test test test test test test test test test test test test test test test
					test test test test test test test test test test test test test test test test test
					test test test test test test test test test test test test test test test test test
					test test test test test test test test test test test test test test test test test
					test test test test test test test test test test test test test test test test test
					test test test test test test test test test test test test test test test test test
				</div>
			</div>
		</div>
	</body>
</html>

Hintergrund: Es sollen zwei grosse Texte nebeneinander stehen, logischerweise der eine links (.left), der andere rechts (.right). Eigentlich sollte im Hintergrund eine Grafik sein (background:url(/pics/bla.gif) center no-repeat), ich habe jetzt einfach mal anschaulicherweise einen farbigen Hintergrund gesetzt.
Mein Problem: Der Hintergrund erscheint nur, wenn ich die width-Angabe der beiden Kästen entferne. Doch dann bekomme ich die Kästen ja nicht mehr nebeneinander.
Hat irgendwer eine Idee, wo da der Fehler liegt? Bekomme die Tomaten nicht von den Augen.

So far...
Matthias

geschrieben von Hawk am 25.02.2005 - 22:41

Hi

nehme mal in der Style die divs weg

also nur:

<style type="text/css">
.BG {
background-color:#f00;
}
.left {
float:left;
width:45%;
}
.right {
float:right;
width:45%;
}
</style>

geschrieben von Matneu am 25.02.2005 - 23:55

	Zitat
	Original geschrieben von Hawk am 25.02.2005 - 22:41 nehme mal in der Style die divs weg

Verdammt, das funktioniert ja tatsächlich. Dachte immer, div.klassenname ist einfach nur eine genauere Definition als .klassenname.

Jetzt habe ich ein weiteres Problem, das sich allerdings nicht mit so einer einfachen nachgemachten Seite erklären lässt, deshalb einfach mal einen Link:
http://beteiligungsgesellschaft.de/neu/?page=2
Unter Opera und FF sieht alles so aus, wie es sein sollte. Lediglich der IE zieht das Hintergrundbild in den Vordergrund, jedoch sehe ich keinen Grund, warum er das tut. Existiert da vielleicht auch noch eine Idee?
Hier die (denke ich) wichtigsten Definitionen aus der CSS-Datei dazu:

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20:

div.BG {
background:url(/pics/logosingle.gif) center no-repeat;
}
table.berichte {
margin-bottom:50px;
border:0px;
empty-cells:show;
width:70%;
}

table.berichte_left {
float:right;
margin-right:50px;
clear:both;
}
table.berichte_right {
float:left;
margin-left:50px;
clear:both;
}

Auf anderen Seiten mit reinem Text als Inhalt funktioniert das problemlos (z. B. http://neu.bnw.matneu.de/?page=3). Habe schon herausgefunden, dass es vermutlich an dem floatbzw. width liegt, doch dürfte das doch eigentlich nicht stören, oder?

So far...
Matthias

geschrieben von Hawk am 26.02.2005 - 00:04

Hi

erst mal wieder den div weg nehmen bei BG

Das HintergrundBild ist Dort auch im Body eingebunden, bei dir in einen Div Container.

Entweder du schreibst statt div.Bg einfach mal Body

geschrieben von Matneu am 26.02.2005 - 02:33

	Zitat
	Original geschrieben von Hawk am 26.02.2005 - 00:04 erst mal wieder den div weg nehmen bei BG

War ein Fehler meinerseits, habe hier im Forum nicht die aktuellste Version der CSS gepostet. Im Netz war schon das div vor .BG weg. Hier also die styles.css, wie sie im Netz auf betreffender Seite ist:

HTML-Quelltext

1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21:

.BG {
background:url(/pics/logosingle.gif) center no-repeat;
}

.berichte {
empty-cells:show;
width:45%;
margin:0px;
margin-bottom:20px;
padding:0px;
border:0px dotted #000;
text-align:center;
}

.berichte_left {
float:left;
}

.berichte_right {
float:right;
}

	Zitat
	Das HintergrundBild ist Dort auch im Body eingebunden, bei dir in einen Div Container. Entweder du schreibst statt div.Bg einfach mal Body

Wo dort? Es sollte bei mir schon in dem DIV-Container sein. Eventuell würde auch der DIV-Container .content gehen, doch es soll halt nicht immer in den Container, weshalb ich den Container div.BG eingeführt habe.

So far...
Matthias

geschrieben von Hawk am 26.02.2005 - 08:03

hi

Hier der richtige Style :

.BG {
background-image:url((/pics/logosingle.gif);
background-repeat:no-repeat;
background-position: center;
border:2px solid black;
width:400px;
heigth:400px;
}

Bau den ein und prüfe es

geschrieben von Matneu am 26.02.2005 - 08:34

	Zitat
	Original geschrieben von Hawk am 26.02.2005 - 08:03 Bau den ein und prüfe es [/b]

Damit verschiebt er mir die DIV-Container mit den Links total, da der gesamte Container diese Breite von 400px hat. Warum da übrigens ein Border hinein soll habe ich nicht verstanden. Und warum überhaupt die Höhe und Weite? Ich möchte die Seite gerne variabel in der Breite haben.

So far...
Matthias

geschrieben von Armin am 26.02.2005 - 09:26

Guten Morgen Matneu,

setz zusätzlich z-index mit ein.

Armin

geschrieben von Hawk am 26.02.2005 - 10:59

Hallo Armin,

habe mit z-index experimentier bin zu keiner Lösung gekommen.
Die beste lösung nach meiner Meinung ist diese.

<style type="text/css">

</style>
</head>
<body>
<div class="BG">

<table> <tr><td>
test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test
est test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test
</td> <td>
test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test
test test test test test test test test test test test test test test test test test
</td>
</tr>
</table>

Sonst müßte mann den DIV CONTAINER BG nämlich eine höhe zuweisen das die anderen beiden DIV CONTAINER darin erscheinen.
</body>

geschrieben von Armin am 26.02.2005 - 11:21

Hallo,

das hat was mit dem float in .berichte_left und .berichte_right zu tun.
Am besten, wenn du float benutzen möchtest, packst du die beiden Tabellen in ein weiteres div.

Armin

geschrieben von Matneu am 28.02.2005 - 00:47

@Armin: Mit z-index habe ich das auch schon mal probiert, leider ohne Erfolg

@Hawk: Bei Deiner Lösung fehlt mir die Tabellendefinition (die beiden Klassen). Ohne die Klassen geht es ja auch ohne Probleme, lediglich mit den Klassen klappt es nicht.

	Zitat
	Original geschrieben von Armin am 26.02.2005 - 11:21 das hat was mit dem float in .berichte_left und .berichte_right zu tun. Am besten, wenn du float benutzen möchtest, packst du die beiden Tabellen in ein weiteres div.

Das werde ich mal ausprobieren. eventuell auch die Tabellen mit dem übergeordneten DIV-Container einfach nach rechts bzw. links verlagern.
Die Seite geht jetzt erstmal ohne Hintergrundbild auf der Seite online, mal schauen, ob ich es mit den divs hinbekomme.

Ist trotzdem ein sehr merkwürdiger Bug, denn ich denke nicht, dass M$ da irgendwas bewusst gemacht hat.

So far...
Matthias

geschrieben von Hawk am 28.02.2005 - 07:42

Hallo Matneu;

Ich habe deshalb eine Tabelle eingefügt weil der Div Container von der Klasse BG leer ist,Du kannst nur weiter arbeiten von Du Ihn breite und höhe in der Klasse zuweist.

Also:

<style type="text/css">

</style>

<body>

<div class="BG">
<div class="berichte_left">
hier kommt Text
</div>
<div class="berichte_right">
hierkommt Text
</div>
</div>

da Du aber gesagt hast das der Container sich an die Textlänge anpassen soll, brauchst Du eine Tabelle. Sie paßt sich nmlich den Text an und dait auch der DIV CONTAINER.
Du kannst natürlich die beiden anderen Klassen in die Tabelle einfügen.

<div class="BG">
<table>
<tr>
<td>
<div class"berichte_left">
hier der Text
</div>
</td>
<td>
<div class="berichte_right">
hier der Text
</div>
</td>
</tr>
</table>
</div>

beim zweite Beispiel kannst Du dir die höhe und breite in der Klasse BG sparen.

geschrieben von Matneu am 01.03.2005 - 14:41

So, jetzt bin ich wieder da. Hatte erstmal damit zu tun, die neue Seite online zu bringen bzw. die bisherige Datenbank an die neue Seite anzupassen.

	Zitat
	da Du aber gesagt hast das der Container sich an die Textlänge anpassen soll, brauchst Du eine Tabelle. Sie paßt sich nmlich den Text an und dait auch der DIV CONTAINER.

Eine Tabelle nur, damit sich der DIV-Container BG an den Inhalt anpasst? Ist das wirklich vom W3C so gedacht oder ist das einfach ein Bug? Ich sehe keinen Grund, warum ein DIV-Container sich nicht an andere Inhalte anpassen sollte und nur an eine Tabelle.
Ich habe das Thema jetzt erstmal auf Eis gelegt, da ich keine für mich vernünftige Lösung gefunden habe. Eine Tabelle nur, damit der Inhalt passt halte ich für nicht wirklich elegant.

Trotzdem allen ein Dank für die Lösungsvorschläge.

So far...
Matthias

geschrieben von Hawk am 01.03.2005 - 16:43

hallo Matneu,

darum habe ich ja einen Border in der BG eingefügt damit mann sieht das der Div Container geschlossen ist wenn die anderen Div Container darin sind. mann muß sich voorstellen das div container wie ebenen sind.

geschrieben von Matneu am 01.03.2005 - 16:54

	Zitat
	Original geschrieben von Hawk am 01.03.2005 - 16:43 darum habe ich ja einen Border in der BG eingefügt damit mann sieht das der Div Container geschlossen ist wenn die anderen Div Container darin sind. mann muß sich voorstellen das div container wie ebenen sind. [/b]

Es kann doch aber nicht sein, dass man - um Inhalt in einem DIV-Container angezeigt zu bekommen - irgendwelche im Prinzip überflüssigen Tags (<table>)einfügen muss, nur damit der DIV-Container angezeigt wird.
Laut SelfHTML darf DIV sowohl jegliche Block- wie Inline-Elemente enthalten, also sollte es zumindest theoretisch kein Problem sein, DIVs in DIV zu packen. Aber naja, anscheinend ist doch irgendwo ein Haken.

So far...
Matthias

HTML-Quelltext

Zitat

HTML-Quelltext

Zitat

HTML-Quelltext

Zitat

Zitat

Zitat

Zitat

Zitat