Frage zu "content"

[bttrfly]

Ich bin mir nicht sicher, ob das eher ein CSS-Problem oder doch ein Typoscript-Problem ist...


Die Struktur meiner Seite soll so aussehen wie im Anhang. Hintergrund, sowie Banner und Navigation stehen soweit. Jetzt möchte ich aber noch die weisse Fläche da reinbauen, die sich mit der Höhe meiner verschiedenen Contents (contentLeft, content...) ändern soll.

Ich hab das versucht in CSS mit height: 100% zu realisieren, hatte jedoch keinen Erfolg. Width:100% funktioniert, aber nicht height. Kann man das in Typoscript irgendwie erreichen, dass das voneinander abhängt? (vielleicht mit einer Eltern-Kind-Relation oder so...)

[Elli]

Ich nehme mal an, dass deine weiße Fläche immer bis zum unteren Ende des
Browsers gehen soll?! Das wäre dann eine CSS-Sache. Schau mal hier >
http://www.xs4all.nl/~peterned/examples/csslayout1.html

[bttrfly]

Danke für deine Antwort, Elli.

Ja, die weiße Fläche soll ganz runter gehen, jedoch wird bei mir, wie es auch hier bei jemandem der Fall war, nur die im moment sichtbare Fläche weiß. Unten fehlt dann immer ein Stück.

Ich habe jegliche Lösungen hier aus dem Forum angewandt, und auch über Google alles mögliche ausprobiert, jedoch immer ohne Erfolg. Es passiert immer dasselbe.

Die Seite, die du mir empfohlen hast, hatte ich vorher schon mehrmals gesehen... wenn ich den CSS-Code kopiere und bei mir einfüge, sieht es komischerweise wie im Anhang unten aus.


Bin am verzweifeln.



Edit: Kann es sein, dass ich die Divs in Typoscript falsch anlege? Da ich nicht weiss, wie man leere Divs anlegt, habe ich das immer mit einem MiniBild (1x1px) gemacht...
10 = IMAGE
10.file = Bild*.jpg
10.wrap = <div id="container"> | </div>

[Elli]

Jo, das hängt ja damit zusammen, dass die unten einen fixed frame positioniert
haben. Den musst du natürlich minimieren, auf vielleicht 0 oder eben 1px höhe.
Schau mal im CSS nach, da sollten ja irgendwo die werte drin stehen

[bttrfly]

Hmm... ich verstehe ehrlich gesagt nicht ganz was du meinst.
Ich stell hier mal den Code von der Seite rein. Kannst du mir vielleicht erkären, was du mit fixed frame meinst?

/**
 * 100% height layout with header and footer
 * ----------------------------------------------
 * Feel free to copy/use/change/improve
 */

html,body {
	margin:0;
	padding:0;
	height:100%; /* needed for container min-height */
	background:gray;
	
	font-family:arial,sans-serif;
	font-size:small;
	color:#666;
}

h1 { 
	font:1.5em georgia,serif; 
	margin:0.5em 0;
}

h2 {
	font:1.25em georgia,serif; 
	margin:0 0 0.5em;
}
	h1, h2, a {
		color:orange;
	}

p { 
	line-height:1.5; 
	margin:0 0 1em;
}

div#container {
	position:relative; /* needed for footer positioning*/
	margin:0 auto; /* center, not in IE5 */
	width:750px;
	background:#f0f0f0;
	
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/

	min-height:100%; /* real browsers */
}

div#header {
	padding:1em;
	background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
	border-bottom:6px double gray;
}
	div#header p {
		font-style:italic;
		font-size:1.1em;
		margin:0;
	}

div#content {
	padding:1em 1em 5em; /* bottom padding for footer */
}
	div#content p {
		text-align:justify;
		padding:0 1em;
	}

div#footer {
	position:absolute;
	width:100%;
	bottom:0; /* stick to bottom */
	background:#ddd;
	border-top:6px double gray;
}
	div#footer p {
		padding:1em;
		margin:0;
	}

[bttrfly]

Da das, wie oben schon erwähnt, durch Anwendung verschiedener Lösungen nicht geklappt hat, hab ich mein Problem anderweitig, mit einem kleinen Trick gelöst. Ist zwar nicht die eleganteste Variante, aber es tut, was es tun soll.