p-Tag läßt DIV-Block verrutschen

weltbürgerin · #1 (**permalink**) 06.05.2009, 15:02

Hallo,
seit mehreren Tagen probiere ich unterschiedliche Layouts für eine Seite aus. Seit gestern jedoch beiße ich mir an einem ganz speziellen Layout die Zähne aus. Habe versucht hier und anderswo zu recherchieren, jedoch vergebens bzw. nicht die richtigen Suchworte gefunden. Die HTML- und CSS-Datei sind validiert (W3C).
HTML

HTML-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" xml:lang="de" lang="de">
<head>
	<title>zum Vatertag</title>
	<link rel="stylesheet" type="text/css" href="test.css" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="content-language" content="deutsch,de" />
</head>
<body>
	<div class="kopf">Kopf</div>
	<div class="containerRand">
		<div class="containerKopf">&nbsp;</div>
		<div class="container">
			<p>
			dies ist ein Testext ... dies ist ein Testext ... ... ... ... ... ... ... 
			</p>
		</div>
	</div>
	<div class="fuss">Fußzeile</div>
</body>
</html>

CSS

Code:

body { 
	width : 100%; 
	margin : 0; 
	padding : 0; 
	background-color : gray;
	color : #1f1f1f; 
	font-family : arial, tahoma, helvetica, sans-serif; 
	font-size : 100.01%; 
} 
.kopf { 
	height : 70px; 
	background-color : green;
} 
.containerRand { 
	margin : 0 120px 0 0; 
	background-color : navy;
} 
.containerKopf { 
	height : 6px; 
	background-color : blue;
} 
.container { 
	margin : 0 6px 0 0; 
	background-color : #ADD8E6;
} 
.fuss { 
	height : 70px; 
	background-color : green;
}

Das Ergebnis ist, daß ich an zwei unterschiedlichen Stellen unerwünschte Abstände bekomme. Nehme ich das p-Tag weg, sind die Boxen genauso wie ich es möchte. Was nur mache ich verkehrt?

LG von einer schier verzweifelten Weltbürgerin

andir · #2 (**permalink**) 06.05.2009, 15:10

Der Abstand kommt vermutlich von einem default-Abstand (margin) für p, den jeder Browserhersteller verwendet. Such mal in der Faq nach "CSS-Reset".

Wenn Du p margin: 0 vergibst, erhältst Du vermutlich das gewünschte Aussehen.

weltbürgerin · #3 (**permalink**) 06.05.2009, 15:20

Ist den der margin vom p-Tag nicht zum Elternelement (hier zum div.container) zu sehen ?

fricca · #4 (**permalink**) 06.05.2009, 15:27

Nein, denn Margins kollabieren.
Suchbegriff: "Collapsing Margins".

weltbürgerin · #5 (**permalink**) 07.05.2009, 07:34

Guten Morgen,

ein komisches Ding ist dies mit HTML: Inline-/Blockelemente; ein kollabierendes p-Tag was zusätzlich das Eltern-Div-Element expandiert usw. So richtig kann ich es nicht nachvollziehen, aber einiges andere lernt man beim Recherchieren kennen - Danke Euch.

Nun ja, habe nun meine CSS-Datei "angepaßt"
CSS

Code:

* { 
	margin : 0; 
	padding : 0; 
}
body { 
	width : 100%; 
	background-color : gray;
	color : #1f1f1f; 
	font-family : arial, tahoma, helvetica, sans-serif; 
	font-size : 100.01%; 
} 
.kopf { 
	height : 70px; 
	background-color : green;
} 
.containerRand { 
	margin : 0 120px 0 0; 
	background-color : navy;
} 
.containerKopf { 
	height : 6px; 
	background-color : blue;
} 
.container { 
	margin : 0 6px 0 0; 
	background-color : #ADD8E6;
} 
.fuss { 
	height : 70px; 
	background-color : transparent;
}

.container p	{padding:0 0 24px 0;margin:0;}

und habe dieses mal ein Browser-spezifisches Problem:
Opera 9.63: Problem gelöst
Firefox 2.0.0.6: Problem gelöst
Safari 3.2.2.: Problem gelöst
Internet Explorer 7.0.5730.11: jetzt habe ich eine Fußzeile, die in den container rutscht. ?!

LG Weltbürgerin, die sich überlegt, warum man den Internet Explorer "braucht"

andir · #6 (**permalink**) 07.05.2009, 08:28

Morgen auch,

kann ich anhand deines Codes nicht nachvollziehen.
Ich habe .fuss mal rot hinterlegt, damit man ihn besser sieht.
Bitte versuche doch vollständige Testcases einzubauen, so ist das immer mühsam....

HTML-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" xml:lang="de" lang="de">
<head>
	<title>zum Vatertag</title>
	<link rel="stylesheet" type="text/css" href="test.css" />
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<meta name="content-language" content="deutsch,de" />
<style type="text/css">

* {
	margin : 0;
	padding : 0;
}
body {
	width : 100%;
	background-color : gray;
	color : #1f1f1f;
	font-family : arial, tahoma, helvetica, sans-serif;
	font-size : 100.01%;
}
.kopf {
	height : 70px;
	background-color : green;
}
.containerRand {
	margin : 0 120px 0 0;
	background-color : navy;
}
.containerKopf {
	height : 6px;
	background-color : blue;
}
.container {
	margin : 0 6px 0 0;
	background-color : #ADD8E6;
}
.fuss {
	height : 70px;
	background-color : red;
}

.container p	{padding:0 0 24px 0;margin:0;}

</style>
</head>
<body>
	<div class="kopf">Kopf</div>
	<div class="containerRand">
		<div class="containerKopf">&nbsp;</div>
		<div class="container">
			<p>
			dies ist ein Testext ... dies ist ein Testext ... ... ... ... ... ... ...
			</p>
		</div>
	</div>
	<div class="fuss">Fußzeile</div>
</body>
</html>

weltbürgerin · #7 (**permalink**) 07.05.2009, 14:42

Es tut mir leid, werde ich demnächst bedenken. Erst wenn der .fuss transparent ist (tut mir auch leid) kann man es erkennen. Ist deshalb passiert, weil ich nicht meinen gesamten Müll präsentieren wollte. Also

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" xml:lang="de" lang="de">
<head>
	<title>zum Vatertag</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<meta name="content-language" content="deutsch,de" />
<style type="text/css">

* {
	margin : 0;
	padding : 0;
}
body {
	width : 100%;
	background-color : gray;
	color : #1f1f1f;
	font-family : arial, tahoma, helvetica, sans-serif;
	font-size : 100.01%;
}
.kopf {
	height : 70px;
	background-color : green;
}
.containerRand {
	margin : 0 120px 0 0;
	background-color : navy;
}
.containerKopf {
	height : 6px;
	background-color : blue;
}
.container {
	margin : 0 6px 0 0;
	background-color : #ADD8E6;
}
.fuss {
	height : 70px;
	background-color : transparent;
}

.container p	{padding:0 0 24px 0;margin:0;}

</style>
</head>
<body>
	<div class="kopf">Kopf</div>
	<div class="containerRand">
		<div class="containerKopf">&nbsp;</div>
		<div class="container">
			<p>
			dies ist ein Testext ... dies ist ein Testext ... ... ... ... ... ... ...
			</p>
		</div>
	</div>
	<div class="fuss">Fußzeile</div>
</body>
</html>

LG

fricca · #8 (**permalink**) 07.05.2009, 15:23

Das Element .containerRand braucht hasLayout, dann verschwindet der Fehler.

Du verwendest nur Klassen. Sinnvoller wären IDs für Elemente, die pro Seite nur einmal auftauchen -- und somit eindeutig identifiziert werden können. Dazu gehören sicher Kopf-, Haupt- und Fußbereich.

Was willst du denn in deinen 6px-hohen "containerKopf" für einen Inhalt einsetzen?

weltbürgerin · #9 (**permalink**) 07.05.2009, 16:03

So ne Frickelarbeit! Und dann noch ein

hasLayout (habe bei diesem Artikel nur Bahnhof verstanden) - zumindestens habe ich es versucht zu lesen. Deshalb ziehe ich vor Euch meinen Hut.

Aber das Problem mit dem IE habe ich gelöst

und zwar mit

HTML-Code:

<div>&nbsp;</div>

am Ende des DIV-Blocks.

"Was willst du denn in deinen 6px-hohen "containerKopf" für einen Inhalt einsetzen?"

+ schäm anbei das Beispiel

und herzlichen Dank

Boris · #10 (**permalink**) 08.05.2009, 14:12

Zitat:

am Ende des DIV-Blocks.

Oh, ja, ein total leeres, sinnloses DIV ist natürlich eine tolle Lösung.

^^

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Brauche Hilfe: Schwarzes Nichts	Zwox	CSS	10	19.11.2010 16:53
CSS Text nebeinander?	carstiee09	CSS	13	13.11.2009 19:18
Der Text will nicht nach unten im div Tag...	18inch	Knowledge Base	22	03.07.2006 16:19
div block 1px hoch?	bw	CSS	3	06.06.2004 12:41
höhe eines div tag an ein anderes anpassen	ffr	CSS	4	09.12.2003 16:59