✔ Mehrzeiliges Layout mit 100% Höhe (aber ggf. innere Scrollbalken)

Status
Nicht offen für weitere Antworten.
Hi Maik,

hmm - sieht so aus, als würde es klappen. Einen gravierenden Unterschied am Stylesheet kann ich zwar immer noch nicht entdecken, aber Hauptsache, es läuft erst einmal. :)

Ich verwende im Endeffekt ein externes Stylesheet, aber das dürfte fürs Rendering keine Rolle spielen, oder?

Ich bastel dann damit weiter und sage schon einmal danke!

Gruß,

Tobi
 
Hallo nocheinmal,

das Grundlayout funktioniert auf diese Weise tatsächlich gut im IE.

Ich nun aber folgendes realisieren:

Angenommen, der Bereich #left hat eine feste Breite von 350 Pixel, und der Bereich #content eine feste Breite von z.B. 600 Pixel. Nun sollen beide Bereiche gemeinsam im Browserfenster zentriert werden.

Wichtig dabei wäre, dass der Bereich #content getrennt von #left (das Menü) gescrollt werden kann, so dass das Menü die gesamte Zeit sichtbar ist. Ich habe es mit entsprechenden Paddings und
CSS: 
margin: 0 auto;
probiert, bin dabei allerdings im IE gescheitert.

Wenn jemand hier noch einen Tipp für mich hat, würde ich mich freuen.

Gruß
.
 
Hi Tobi,

eine ähnliche Frage ist gerade eben hier im CSS-Board aufgetaucht: div und IE = Problem = Hilfe! ;)

Code: 
body {
height:100%; 
max-height:100%; 
overflow:hidden; 
padding:0; 
margin:0; 
border:0; 
text-align:center;  /* Für IE */
}

#wrap {
position:relative;
margin:0 auto; /* Für moderne Browser */
width:950px;
}

Das bestehende Layout packst du dann in das DIV #wrap.


Gruß
Maik
 
Hi,

Das hört sich erst einmal gut an - allerdings:

mit dem Wrapper um alle Elemente sind auch die Header- und Footer-Bereiche betroffen; setze ich #wrap nur um #left und #content, so sehe ich im Firefox keinen Inhalt, und im IE irgend etwas zusammengestauchtes.

HTML: 
<!-- Put IE into quirks mode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Seitentitel</title>
<link rel="stylesheet" href="styles/main.css" type="text/css" />
<link rel="stylesheet" href="styles/def.css" type="text/css" />
<script type="text/javascript" src="scripts/activateSWF.js"></script>
</head>
<body>
<div id="head">
	<img src="elements/topframe.jpg" alt="" width="100%" height="97" />
	<img src="elements/hr.jpg" alt="" width="100%" height="23" />
</div>
<div id="foot">
	<img src="elements/bottomframe.jpg" alt="" width="100%" height="97" />
</div>
<div id="wrap">
	<div id="left">
			{MENUE}
	</div>
	<div id="content">
		<div class="content">
			{CONTENT}
		</div>
	</div>
</div>
</body>
</html>
CSS: 
html {
	height:					100%;
	max-height:				100%;
	padding:				0;
	margin:					0;
	border:					0;
	background:				#fff;
	/* hide overflow:hidden from IE5/Mac */
	/* \*/
	overflow:				hidden;
	/* */
}

body {
	height:				100%;
	max-height:			100%;
	overflow:			hidden;
	padding:			0;
	margin:				0;
	border:				0;
	text-align:			center;
}

#wrap {
	position:			relative;
	margin:				0 auto; /* Für moderne Browser */
	width:				950px;
}

#left {
	position:			absolute;
	left:				0;
	top:				120px;
	bottom:				97px;
	width:				350px;
	z-index:			4;
	overflow:			auto;
}

* html #left {
	height:				100%;
	top:				0;
	bottom:				0;
	border-top:			100px solid #fff;
	border-bottom:		50px solid #fff;
	color:				#fff;
}

#content {
	overflow:			auto;
	position:			absolute;
	z-index:			3;
	top:				120px;
	bottom:				97px;
	left:				350px;
	right:				0;
	width:				600px;
}

* html #content {
	top:				0;
	left:				0;
	right:				0;
	bottom:				0;
	height:				100%;
	max-height:			100%;
	overflow:			auto;
	position:			absolute;
	z-index:			3;
	border-top:			100px solid #fff;
	border-bottom:		50px solid #fff;
	border-left:		350px solid #fff;
}

#head {
	position:				absolute;
	margin:					0;
	top:					0;
	left:					0;
	display:				block;
	width:					100%;
	height:					120px;
	background-color:		#F2D27F;
	background-position:	0 0;
	background-repeat:		no-repeat;
	font-size:				4em;
	z-index:				5;
	overflow:				hidden;
	color:					#000000;
}

#foot {
	position:			absolute;
	margin:				0;
	bottom:				0;
	left:				0;
	display:			block;
	width:				100%;
	height:				97px;
	font-size:			1em;
	z-index:			5;
	overflow:			hidden;
	background-color:	#94BA81;
	color:				#fff;
}

div.content {
	padding:			10px;
}

img {
	display:			block;
	margin:				0px;
	padding:			0px;
	background-color:	#FFFFFF;
}

object, embed {
	display:			block;
	margin:				0px;
	padding:			0px;
	margin-top:			20px;
	background-color:	#FFFFFF;
}

Gruß

P.S.: Ich komme hier wahrscheinlich in etwa so hilflos rüber, wie die Leute, die mich im Flashbereich zur Verzweiflung bringen (wie Die sich fühlen müssen, kann ich nun besser nachvollziehen ;)), aber diese Art Layout ist für mich tatsächlich schon "höheres" CSS.
.
 
Hier die erforderlichen Ergänzungen und Korrekturen für das Stylesheet:

Code: 
#wrap {
        position:                        relative;
        margin:                          0 auto; /* Für moderne Browser */
        width:                           950px;
        height:                          100%;
        text-align:                      left;
}

* html #left {
        position:absolute;
        height:                                100%;
        top:                                0;
        bottom:                                0;
        border-top:                        120px solid #fff;
        border-bottom:                97px solid #fff;
        color:                                #000;
}

* html #content {
        top:                                0;
        left:                                0;
        right:                                0;
        bottom:                                0;
        height:                                100%;
        max-height:                        100%;
        overflow:                        auto;
        position:                        absolute;
        z-index:                        3;
        border-top:                        120px solid #fff;
        border-bottom:                97px solid #fff;
        border-left:                350px solid #fff;
}
P.S. Keine Sorge Tobias, du bringst mich hier nicht zur Verzweiflung. ;)
 
Hi Maik,

vielen Dank für Deine Mühe!

Wir sind dicht dran, aber damit bekomme ich im IE7 immer noch etwas sehr schmales:

css.jpg

aktuelles CSS:
CSS: 
html {
	height:					100%;
	max-height:				100%;
	padding:				0;
	margin:					0;
	border:					0;
	background:				#fff;
	/* hide overflow:hidden from IE5/Mac */
	/* \*/
	overflow:				hidden;
	/* */
}

body {
	height:				100%;
	max-height:			100%;
	overflow:			hidden;
	padding:			0;
	margin:				0;
	border:				0;
	text-align:			center;
}

#wrap {
	position:			relative;
	margin:				0 auto; /* Für moderne Browser */
	width:				950px;
	height:				100%;
	text-align:			left;
}

#left {
	position:			absolute;
	left:				0;
	top:				120px;
	bottom:				97px;
	width:				350px;
	z-index:			4;
	overflow:			auto;
}

* html #left {
	height:				100%;
	top:				0;
	bottom:				0;
	border-top:			120px solid #fff;
	border-bottom:		97px solid #fff;
	color:				#000;
}

#content {
	overflow:			auto;
	position:			absolute;
	z-index:			3;
	top:				120px;
	bottom:				97px;
	left:				350px;
	right:				0;
	width:				600px;
}

* html #content {
	top:				0;
	left:				0;
	right:				0;
	bottom:				0;
	height:				100%;
	max-height:			100%;
	overflow:			auto;
	position:			absolute;
	z-index:			3;
	border-top:			120px solid #fff;
	border-bottom:		97px solid #fff;
	border-left:		350px solid #fff;
	width:				600px;
}

#head {
	position:				absolute;
	margin:					0;
	top:					0;
	left:					0;
	display:				block;
	width:					100%;
	height:					120px;
	background-color:		#F2D27F;
	background-position:	0 0;
	background-repeat:		no-repeat;
	font-size:				4em;
	z-index:				5;
	overflow:				hidden;
	color:					#000000;
}

#foot {
	position:			absolute;
	margin:				0;
	bottom:				0;
	left:				0;
	display:			block;
	width:				100%;
	height:				97px;
	font-size:			1em;
	z-index:			5;
	overflow:			hidden;
	background-color:	#94BA81;
	color:				#fff;
}

div.content {
	padding:			10px;
}

img {
	display:			block;
	margin:				0px;
	padding:			0px;
	background-color:	#FFFFFF;
}

object, embed {
	display:			block;
	margin:				0px;
	padding:			0px;
	margin-top:			20px;
	background-color:	#FFFFFF;
}

Keine Sorge Tobias, du bringst mich hier nicht zur Verzweiflung.
Zum Vergrößern anklicken....
Das kann ich mir bei Deiner Kompetenz in diesem Gebiet auch nicht vorstellen. ;) Für mich ist es ungewohnt, in diesem Maße mit Workarounds arbeiten zu müssen; der Flashplayer verhält sich subjektiv vorhersehbarer.^^

Gruß
.
 
Tobias Menzel hat gesagt.:
Wir sind dicht dran, aber damit bekomme ich im IE7 immer noch etwas sehr schmales
Zum Vergrößern anklicken....

Code: 
* html #content {
	top:				0;
	left:				0;
	right:				0;
	bottom:				0;
	height:				100%;
	max-height:			100%;
	overflow:			auto;
	position:			absolute;
	z-index:			3;
	border-top:			120px solid #fff;
	border-bottom:		97px solid #fff;
	border-left:		350px solid #fff;
	width:				100%;
}
Treffer! :-)

Gruß
Maik
 
Treffer
Zum Vergrößern anklicken....
... und versenkt! ^^

Ich hatte es mit einem festen Wert bzw. dem Weglassen der Breitenangabe in "* html #content" probiert, auf 100% bin ich noch nicht gekommen (währe bei mir sowieso bestenfalls recht blindes Try&Error gewesen).

Gibt es eigentlich irgendwo eine Doku, in der alle möglichen und unmöglichen Tricks, um identisches Verhalten in den verschiedenen Browsern zu erzeugen, in Form einer allgemenen Referenz aufgelistet sind? Man findet zwar viele konkrete Beispiele von Gurus, aber auch schon bei mittelmäßigen Änderungen fehlt es oft an mangelndem Verständnis der Hintergründe.

Gruß,

Tobi
.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück