css Layout Problem

**counter18** · 02.09.2006 11:54

Hallo zusammen,

hab ein neues Layout gebastelt, aber irgendwie läuft es nicht. Hab schon einige ausprobiert. Hier mal der Quelltext mit der css:

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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Unbenanntes Dokument</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>

<body>
<div id="main">
	<div id="head"></div>
	<div id="nav">
		<div id="nav_01"></div>
	</div>
	<div id="content">
		<div id="content_01">
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augueLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augueLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augueLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue 
		</div>
	</div>
		<div id="foot">
			<div id="sub"></div>
			<div id="down"></div>
		</div>
</div>
</body>
</html>

css:

Code:

/* CSS Document */
body {
	background:#000000;
	color:#FFFFFF;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
#main {
	width: 805px;
	height: 605px;
	margin: 0px 50% 0px 50%;
	background:#2D3B1C;
}
#head {
	width: 800px;
	height: 125px;
	border: solid 1px #FFFFFF;
	background:url(../img/img_01.jpg);
	background-repeat:no-repeat;
}
#nav {
	width: 142px;
	border: solid 1px #FFFFFF;
	float:left;
}
#nav_01 {
	width:142px;
	height:326px;
	background:url(../img/img_02.jpg);
	background-repeat:no-repeat;
}
#content {
	background: #000000;
	float: left;
	width:656px;
	border: solid 1px #FFFFFF;
}
#content_01 {
	width: 636px;
	height:326px;
	min-height:326px;
	background:url(../img/img_03.jpg);
	background-repeat:no-repeat;
	padding: 10px;
	float:left;
}
#foot {
	width: 800px;
	clear:both;
}
#sub {
	width: 142px;
	height:144px;
	background:url(../img/img_04.jpg);
	background-repeat:no-repeat;
	float:left;
	border: solid 1px #FFFFFF;
}
#down {
	width:654px;
	height:144px;
	border: solid 1px #FFFFFF;
	background:url(../img/img_05.jpg);
	background-repeat:no-repeat;
	float:left;
}
#text {
	width: 636px;
}

Hier meine Probleme:

1. der Blindtext verschiebt den Footer nicht, sondern geht drunter durch. Warum? Wie kann ich das verhindern?

2. Wenn ich den Blindtext per margin anordne, dann fängt der Hintergrund ebenfalls nach dem Rand an, obwohl nur der Text in einem Div drin ist, nicht der Background.
Woran liegt das? Auch wenn ich den Text in <p> Tags schreibe und diesen per margin anordne wird der Hintergrund verschonben. Warum? Was mache ich falsch?
So soll es aussehen....

Wie bekomme ich das hin? Was mache ich flasch?

**hero-master** · 02.09.2006 12:50

Zitat von counter18

1. der Blindtext verschiebt den Footer nicht, sondern geht drunter durch. Warum? Wie kann ich das verhindern?

Du musst richtig clearen

http://www.andreas-kalt.de/webdesign.../float-theorie

Zitat von counter18

2. Wenn ich den Blindtext per margin anordne, dann fängt der Hintergrund ebenfalls nach dem Rand an, obwohl nur der Text in einem Div drin ist, nicht der Background.
Woran liegt das? Auch wenn ich den Text in <p> Tags schreibe und diesen per margin anordne wird der Hintergrund verschonben. Warum? Was mache ich falsch?

Welcher Hintergrund wird dann verschoben? Gib dem Blockelement, dass den Text umschließt dann einfach einen padding-Wert

**counter18** · 02.09.2006 14:26

Danke für die Antwort. Mit dem Padding hat es funktioniert.
Habs hin bekommen, nur eine Sache noch das linke grüne Menue soll genau so hoch werden wie der Inhalt. Das soll den grünen Background bekommen. Den height hab ich auf 100% gestellt aber trotzdem funktioniert es nicht.
css

Code:

/* CSS Document */
body {
	background:#000000;
	color:#FFFFFF;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
#main {
	width: 805px;
	height: 605px;
	margin: 0px 10% 0px 10%;
	background:#2D3B1C;
}
#head {
	width: 800px;
	height: 125px;
	border: solid 1px #FFFFFF;
	background:url(../img/img_01.jpg);
	background-repeat:no-repeat;
}
#nav {
	background:#2D3B1C;
	width: 142px;
	height:100%;
	border: solid 1px #FFFFFF;
	float:left;
}
#nav_01 {
	width:140px;
	height:326px;
	background:url(../img/img_02.jpg);
	background-repeat:no-repeat;
}
#content {
	background: #000000;
	float: left;
	width:800px;
	border: solid 1px #FFFFFF;
}
#content_01 {
	width: 636px;
	background:url(../img/img_03.jpg);
	background-repeat:no-repeat;
	padding: 10px;
	float:left;
}
#foot {
	width: 802px;
}
#sub {
	width: 142px;
	height:144px;
	background:url(../img/img_04.jpg);
	background-repeat:no-repeat;
	float:left;
	border: solid 1px #FFFFFF;
}
#down {
	width:656px;
	height:144px;
	border: solid 1px #FFFFFF;
	background:url(../img/img_05.jpg);
	background-repeat:no-repeat;
	float:left;
}
#text {
	width: 636px;
}

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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Unbenanntes Dokument</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>

<body>
<div id="main">
	<div id="head"></div>

	<div id="content">
	<div id="nav">
		<div id="nav_01">&nbsp;</div>
	</div>
		<div id="content_01">
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augueLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augueLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augueLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue 
		</div>
	</div>
		<div id="foot">
			<div id="sub"></div>
			<div id="down"></div>
		</div>
</div>
</body>
</html>

**hero-master** · 02.09.2006 16:20

Faux-Columns lautet die Antwort

zur Startseite vom TP

Thema: css Layout Problem

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

css Layout Problem

Aktive Benutzer

Aktive Benutzer