XHTMLforum - Einzelnen Beitrag anzeigen

dope_dope · #5 (**permalink**) 03.10.2005, 12:41

Also noch mal von vorne:

Das ist meine HTML-Datei:

Code:

<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/XHTML-1.0-Transitional.dtd">
	
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> 

<head>
	<title>Titel</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<link rel="stylesheet" type="text/css" media="screen, projection, print" href="style.css" />
</head>

<body>

<div id="header">
</div>

<div id="main">

	<div id="main-left">
		Menu
	</div>
		
	<div id="main-content">
		<div id="inner-border">
			ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text 
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text 
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text 
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text 
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		 ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text ganz langer Text
		</div>
	</div>

</div>

</body>
</html>

Und das ist die CSS-Datei:

Code:

body { 
	font-family: verdana, geneva, arial, sans-serif;
	font-size: 0.7em;
	color: #5c5c5c;
	line-height: 1.7em;	}

div#header {	/* Header */
	font-size: 28px;	
	text-align: center;
	color: #000000;
	border: 2px solid red;
	height: 91px;
	padding: 3px;
	margin-bottom: 10px;
	clear: both;	}

div#main {	/* Main */
	position: absolute;
	background-color: #ffffff;
	border: 1px solid green;
	padding: 2px;
	height: 75%;
	margin-top: 5px;
	width: 98%;	}

div#main-left {	/* Linke Leiste */
	background-color: #ffffff;
	border-right: 5px solid red;
	float: left;
	padding: 5px;
	width: 16%;
	height: 85%;
	padding-top: 25px;
	padding-bottom: 35px;
	padding-right: 0px;	}

div#main-content {	/* Rechte Seiste */
	position: relative;
	background-color: #ffffff;
	border: 5px solid red;
	float: right;
	padding: 2px;
	width: 80%;
	height: 96%;	}

div#inner-border {	/* Main-Content innerer Rahmen */
	background-color: #ffffff;
	border: 2px solid red;
	padding: 10px;
	margin: 0px;
	height: 94%;
	overflow: auto;	}

Was ich möchte:
1.) div#main soll 75% der gesamten Seite hoch sein, egal was drin steht!
2.) div#main-left und div#main-content dürfen nicht über den unteren Rand von div#main hinausragen
3.) div#inner-border darf nicht über den unteren Rand von div#main-content hinauragen
4.) bei div#inner-border sollen scrollbalken angezeigt werden, anstatt den gesamten div#main einfach nach unten zu vergrößern wie es im Moment im IE der Fall ist (siehe auch 1.)

--> Was muss ich machen, damit z.B. div#main-content weiss, dass es nen Teil von div#main ist und da drinnen bleibt anstatt sich drüber zu legen??? Und damit es auch die Größe von div#main nicht einfach vergrößert sondern so lässt wie sie ist? Kann ich das mit position machen oder wie geht das???

Ist das jetzt besser erklärt???