✔ <div> Seitenlayout

[saila]

Oh, ich habe nur FF getestet. Aber das er den Contentbereich scrollen wollte, hab ich wohl überlesen. Allerdings muss das ganze dann ganz anderst aufgebaut werden

Moment.....


// edit
Damit ich das richtig verstehe, du willst das header und footer den content überlagern und beim scrollen im grunde nur die content-box scrollt?

 

[Maik]

Bevor du hier vermeintliche Lösungsvorschläge postest, solltest du erstmal die Beiträge aufmerksam durchlesen, um die Aufgabenstellung zu erkennen, und die Funktionalität deiner selbstgestrickten Modelle in den unterschiedlichen Browsern testen.

 

[saila]

@michaelsinterface,

was hast du eigentl. für ein Problem?

Er gibt an, dass sein Content-Bereich zu 100% zwischen Heder und Footer liegen soll. Dies kann unterschiedlich gelöst werden. Wenn ich selbstgestrickte Dinge hier mitteile, dann ist das immer noch besser, als ständig auf irgendwelche Seiten zu verlinken, wie du es machst.


Im übrigen ist deine Mitteilung mit 0 Inhalt und beantwortet auch nicht annähernd die Frage, welche zwar nicht an dich direkt gestellt war, aber du (da du ja aufmerksam lesen wirst) diese auch beantworten kannst.

Nichts für ungut, aber wenn du hier den alleinigen Helfer und Ratgeber mimen willst, bitte.

 

[Gumbo]

Probier mal folgendes Stylesheet:

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
}
#outer {
	width: 90%;
	margin: 0 auto;
	text-align: left;
	background-color: #fe0;	
	position: relative;
	min-height: 100%;
	height: 100%;
	voice-family: "\"}\"";
	voice-family: inherit;
	height: auto;
}
html>body #outer {
	height: auto;
}
#header {
	background-color: #f00;
}
#content {
	background-color: #0f0;
}
#footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	background-color: #00f;
}

 

[Maik]

@ saila:

Ich erhebe nicht den Anspruch, hier der alleinige Helfer bzw. Ratgeber zu sein.

Ebenso habe ich keine Probleme damit, wenn du konstruktive Lösungsvorschläge bieten kannst, die dem Hilfesuchenden weiterhelfen.

Wenn deine Vorschläge aber am Thema vorbeilaufen bzw. das Problem in keinster Weise lösen, ist es meine Aufgabe und Pflicht als Moderator, auf diesen Mißstand hinzuweisen und dem entgegenzuwirken.

Nachtrag: bevor ich das Rad neu erfinde, bevorzuge ich den Link zu einem bewährten Lösungsansatz.

 

[saila]

Folgendes ist getestet und auch entsprechend. Fraglich nur, ob dass das Ziel des Fragestellers war:

html, body {
	height			: 100%; 
	max-height		: 100%; 
	margin			: 0; 
	border			: 0; 
	background		: #F1F1F1;
	overflow		: hidden; 
	}

#content {
	display			: block; 
	position		: absolute; 
	top				: 80px; 
	bottom			: 160px; 
	width			: 860px; 
	margin-left		: -422px; 
	left			: 50%; 
	border-left		: 1px solid #000;
	border-right	: 1px solid #000;
	background		: #fff;
	overflow		: auto; 
	z-index			: 3; 
	}

>html #content {
	top				: 0; 
	bottom			: 0; 
	height			: 100%;
	width			: 860px;
	border-top		: 154px solid #fff; 
	border-bottom	: 50px solid #fff;
	}

#head {
	position		: absolute; 
	margin-left		: -422px; 
	left			: 50%; 
	top				: 0; 
	width			: 860px; 
	min-width		: 860px; 
	height			: 80px; 
	background		: #FF0000; 
	border			: 1px solid #000;
	z-index:5; 
	}

>html #head {
	top				: 0px; 
	width			: 860px; 
	height			: 80px;
	}
	
#foot {
	text-align		: center;
	position		: absolute; 
	margin-left		: -422px; 
	left			: 50%; 
	bottom			: 0; 
	width			: 860px; 
	min-width		: 860px; 
	height			: 160px; 
	background		: #FF0000;
	border			: 1px solid #000;
	z-index:5; 
	}

>html #foot {
	bottom			: 0px; 
	width			: 860px; 
	height			: 160px;
	}

 

[Maik]

Und was hast du daran getestet?

Im IE kann der Content-Bereich noch immer nicht gescrollt werden

Zudem solltest du mal das Kapitel über die Kind-Selektoren studieren.

 

[saila]

Wie auch immer, es fehlte lediglich die Angabe der Höhe in der Content-Box. Hier das Ergebnis:

html, body {
	height			: 100%;
	max-height		: 100%;
	margin			: 0;
	border			: 0;
	background		: #F1F1F1;
	overflow		: hidden;
	}
	
#content {
	display			: block;
	position		: absolute;
	top				: 80px;
	bottom			: 160px;
	width			: 860px;
	margin-left		: -430px;
	left			: 50%;
	border-left		: 1px solid #000;
	border-right	: 1px solid #000;
	background		: #fff;
	height			: 100%;
	overflow		: auto;
	z-index			: 1;
	}

>html #content {
	top				: 0;
	bottom			: 0;
	height			: 100%;
	width			: 860px;
	}

#head {
	position		: absolute;
	margin-left		: -430px;
	left			: 50%;
	top				: 0;
	width			: 860px;
	min-width		: 860px;
	height			: 80px;
	background		: #FF0000;
	border			: 1px solid #000;
	z-index			: 2;
	}

>html #head {
	top				: 0px;
	width			: 860px;
	height			: 80px;
	}

#foot {
	text-align		: center;
	position		: absolute;
	margin-left		: -430px;
	left			: 50%;
	bottom			: 0;
	width			: 860px;
	min-width		: 860px;
	height			: 160px;
	background		: #FF0000;
	border			: 1px solid #000;
	z-index			: 2;
	}

>html #foot {
	bottom			: 0px;
	width			: 860px;
	height			: 160px;
	}

 

[Maik]

Auch das funktioniert nicht, und damit waren das jetzt drei Fehlversuche.

Jeden weiteren Fehlversuch werde ich in diesem Thread kommentarlos entfernen.

 

[saila]

Weiste was, dann werde ich mich von jetzt an hier fern halten.

Selten ist mir solch eine Arroganz begegnet - vor allem von einer Person, welche selbst keine Lösungen vorschlagen kann. Du kannst ja kritisieren, das was nicht funktioniert oder zumindest darauf hinweien. Aber für Leute, die sich nach Lösungsvorschlägen bemühen, bist du gelinde gesagt ein Zumutung!


Hast du übrigens auch deine HTML angepasst?!
Bei mir funktioniert es im NN, FF, O und IE6

Hier der gesamte Quellcode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title</title>
<style type="text/css">
html, body {
	height			: 100%;
	max-height		: 100%;
	margin			: 0;
	border			: 0;
	background		: #F1F1F1;
	overflow		: hidden;
	}
	
#content {
	display			: block;
	position		: absolute;
	top				: 80px;
	bottom			: 160px;
	width			: 860px;
	margin-left		: -430px;
	left			: 50%;
	border-left		: 1px solid #000;
	border-right	: 1px solid #000;
	background		: #fff;
	height			: 100%;
	overflow		: auto;
	z-index			: 1;
	}

* html #content {
	top				: 0;
	bottom			: 0;
	height			: 100%;
	width			: 860px;
	}

#head {
	position		: absolute;
	margin-left		: -430px;
	left			: 50%;
	top				: 0;
	width			: 860px;
	min-width		: 860px;
	height			: 80px;
	background		: #FF0000;
	border			: 1px solid #000;
	z-index			: 2;
	}

* html #head {
	top				: 0px;
	width			: 860px;
	height			: 80px;
	}

#foot {
	text-align		: center;
	position		: absolute;
	margin-left		: -430px;
	left			: 50%;
	bottom			: 0;
	width			: 860px;
	min-width		: 860px;
	height			: 160px;
	background		: #FF0000;
	border			: 1px solid #000;
	z-index			: 2;
	}

* html #foot {
	bottom			: 0px;
	width			: 860px;
	height			: 160px;
	}

</style>
</head>

<body>
	<div id="head">HEADER</div>
	<div id="foot">FOOTER</div>
	<div id="content">
		CONTENT <br/>Test Inhalt<br/>Tes<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt<br/>Test Inhalt
		<p>Test Inhalt</p>
		<p>Test Inhalt</p>
		<p>Test Inhalt</p>
		<p>Test Inhalt</p>
		<p>Test Inhalt</p>
		<p>Test Inhalt</p>
		<p>Test Inhalt</p>
		<p>Test Inhalt</p>
		<p>Test Inhalt</p>
		<p>Test Inhalt</p>
		<p>Test Inhalt</p>
		<p>Test Inhalt</p>
		<p>Test Inhalt</p>
		<p>Test Inhalt</p>
	</div>
</body>
</html>