3 Spalten-Problem

[masterkey88]

Hallo Leute,

ich habe bereits Tage lang gesucht und nichts gefunden.

Ich weiß auch, dass der drei-Spalten Problem bei div-Blöcke mit CSS oft behandelt wurde.

Ich finde trotz allem keine passende Lösung für mein Problem und bitte daher um Hilfe bzw. Lösungvorschlag.

Ich bin gerade dabei eine 3 Spaltige Website aufzubauen, und da ich von den "alten" und "billigen" Tabellen wegkommen möchte, hab ich mir gedacht das ganze mit CSS anzupassen.

Meine Seite wird 3 Spaltig aufgebaut,

--------------------------------------

Aufbau:

Das größte Problem ist mein Banner bzw. mein Bild oben auf der Seite, daher kann ich für die einzelne 3 Spalten kein "height: 100%" nehmen.

Jedes Block Element erhält eine andere Hintergrundfarbe und das ganze sollte sich beim besuch der Seite auf die ganze Browserhöhe anpassen.

Jedoch ist meine mittlere Spalte mein Textbereich, diese wächst je nach Text-/Berichtlänge, dann sollten sich die erste Spalte(Menü) und die 3.Spalte an der Höhe des Textbereiches anpassen und somit auch wachsen.

Ich bedanke mich vielmals und hoffe auf Unterstützung.

Grüße,

masterkey

[perdian]

Ich bin gerade dabei eine 3 Spaltige Website aufzubauen, und da ich von den "alten" und "billigen" Tabellen wegkommen möchte, hab ich mir gedacht das ganze mit CSS anzupassen.

Es gibt die "reine Lehre" und einen gesunden Pragmatismus. Auch wenn es jetzt wahrscheinlich Hasstiraden und bitterböse Flames geben wird aber ich würde, wenn sich nach ein bisschen Herumprobieren mit CSS nichts wirklich praktikables ergeben hat ganz einfach wieder zu den "guten alten" Tabellen wechseln. Nicht der Weisheit letzter Schluss aber letzten Endes lässt sich damit das Ziel erreichen.

[bmg4ever2]

kein grund für hasstiraden, stimme perdian da voll und ganz zu.

divs sind nicht aneinander gekoppelt, wenn ein browser also nachträglich dazu gezwungen ist, aufgrund eines überlaufenden inhalts, ein div element zu vergrößern, wird er selbiges auch immer nur für alle parent elemente machen und nicht für iwelche anderen divs iwo mitten im quelltext, woher soll er den zusammenhang auch erkennen

(der ganze abschnitt über dieser klammer gilt natürlich nicht nur für divs, sondern jedes andere html block element auch)

nehm einfach für das grundgerüst ne denkbar billige tabelle und mach danach dann ganz normal weiter.

nur weil man nicht mehr grundsätzlich nicht mehr mit tabellen layouten soll, heißt das nicht, dass man sie nicht mehr benutzen darf. die drei block-elemente sollen höhentechnisch also aneinander gekoppelt sein und das ist nunmal das logische abbild einer tabelle.

[Pixelfuchs]

Also ich würde es so machen:

<div id="Seite">

<div id="menü">

</div>

<div id="rechts">

<div id="bild">

</div>

<div id="unten">

<div id="untenlinks">

</div>

<div id="untenrechts">

</div>

</div>

</div>

</div>

Edit: Irgendwie wird meine Formatierung mit Leerzeichen ignoriert. Ich hoffe du blickst trotzdem durch.

mfg Hendrik232

[masterkey88]

Also ich würde es so machen:

<div id="Seite">

<div id="menü">

</div>

<div id="rechts">

<div id="bild">

</div>

<div id="unten">

<div id="untenlinks">

</div>

<div id="untenrechts">

</div>

</div>

</div>

</div>

Edit: Irgendwie wird meine Formatierung mit Leerzeichen ignoriert. Ich hoffe du blickst trotzdem durch.

mfg Hendrik232

Wie würde dann der dazugehörige CSS-Code lauten?

Jetzt mal unabhängig von den breitenangaben.

Beispiel:

div#seite {margin: 0 auto; height: 100%}

div#menu {position: relative; left: 0px; float: left; height: 100%}

div#rechts {position: relative; right: 0px; float: right; height: 100%}

div#bild{position: relative; left: 0px; float: left; height: 150px}

div#unten {position:relative: left:0px; float:left; height:????}

div#untenlinks {position: relative: left: 0px; height:100%; float:left}

div#untenrechts {position:relative; left:0px; height: 100%; float:left}

Was gebe ich nun als Höhe bei unten ein?

[bmg4ever2]

willkommen bei deinem ausgangsproblem, nur mit einem komplexeren code.

du musst halt einen weg finden, den browser mitzuteilen, dass dein menü und dein content feld höhenbezogen gekoppelt sein sollen, da ist imho ne tabelle browserübergreifend deine einzige chance.

[Pixelfuchs]

Mach doch:

div#unten {position:relative: left:0px; float:left; height:auto; min-height: 600px}

Dann passt sie sich der Höhe vom Inhalt an. hat aber einer mindesthöhe von 600px, falls nur ein kleiner Text vorhanden ist.

mfg Hendrik232

[masterkey88]

willkommen bei deinem ausgangsproblem, nur mit einem komplexeren code.

du musst halt einen weg finden, den browser mitzuteilen, dass dein menü und dein content feld höhenbezogen gekoppelt sein sollen, da ist imho ne tabelle browserübergreifend deine einzige chance.

(Namen vom oberen Beispiel)

OK, vielen Dank euch allen... wenn ich Menü und Rechts durch eine Tabelle ersetzte, bleibt mir das Problem dass untenlinks und untenrechts sich auf die Höhe der Tabelle anpassen müsste (die Höhe des Bildes sollte abgezogen werden), und dies soll bei beiden gleichzeitig geschehen, weil sie auch die gleiche höhe haben sollten.

[bmg4ever2]

du hast es noch nicht ganz verstanden

du hast halt das problem, dass egal ob menü, untenlinks oder untenrechts deine größten felder sind, alle gleich hoch sein sollen, bzw rechts das bild abgezogen werden musst, dann muss auch schon alles in die selbe tabelle

also sowas in der art

<!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" lang="en-AU">

<head>

	<style type="text/css">

	<!--

		html	{ height: 100%; }

		body {

			margin: 0px;

			padding: 0px; 

			height: 100%;

		}

		#seite {

			height: 100%;

			margin: 0px auto;

			width: 1000px; 

		}

		#menu {

			background: #f00;

		}

		#bild {

			background: #ff0;

			height: 150px;

		}

		#untenlinks {

			background: #0f0;

		}

		#untenrechts {

			background: #00f;

		}

		-->	

	</style>

</head>

<body>

	<table id="seite" cellpadding="0" cellspacing="0">

		<tr>

			<td id="menu" rowspan="2">

			</td>

			<td id="bild" colspan="2">

			</td>

		</tr>

		<tr>

			<td id="untenlinks">

			</td>

			<td id="untenrechts">

			</td>

		</tr>

	</table>

</body>

</html>

[bmg4ever2]

aber lass dich nicht täuschen jetzt, dein problem ist bei zweispaltigkeit, also ohne das "untenrechts" auch problemlos ohne eine tabelle lösen, auch mit synchroner höhenanpassung zwischen menü und content.

für alle 3 spalten fällt mir da keine lösung ein, allerdings muss selbst dann die verwendung von min-height ok sein. da muss man dann aber immer warnen, denn

min-height: Minimale Höhe: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

min-height geht nicht im IE6.

Jetzt mag man denken, gut der IE8 ist da, sch... auf IE6, nur die leute sind halt faul

Browser-Versionen » Statistiken » Browser-Statistik.de

ich würde neue webseiten auch nicht mehr für IE6 entwickeln, es schränkt einen nunmal massiv ein, aber es gibt nunmal auftraggeber, die verlangen, dass es wirklich bei jeden gleich aussieht.

[masterkey88]

aber lass dich nicht täuschen jetzt, dein problem ist bei zweispaltigkeit, also ohne das "untenrechts" auch problemlos ohne eine tabelle lösen, auch mit synchroner höhenanpassung zwischen menü und content.

für alle 3 spalten fällt mir da keine lösung ein, allerdings muss selbst dann die verwendung von min-height ok sein. da muss man dann aber immer warnen, denn

min-height: Minimale Höhe: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

min-height geht nicht im IE6.

Jetzt mag man denken, gut der IE8 ist da, sch... auf IE6, nur die leute sind halt faul

Browser-Versionen » Statistiken » Browser-Statistik.de

ich würde neue webseiten auch nicht mehr für IE6 entwickeln, es schränkt einen nunmal massiv ein, aber es gibt nunmal auftraggeber, die verlangen, dass es wirklich bei jeden gleich aussieht.

Vielen Lieben Dank!!!

ich löse nun das ganze mit tabellen, damit ist mein problem endgültig gelöst

Kannst mir die Lösung für die 2 Spalten erläutern? würde mich interessieren

[perdian]

min-height geht nicht im IE6

Auch wenn's hoffnungslos offtopic ist, aber wer sich 2009 noch dazu hinreissen lässt alles so zu coden, dass es auch im IE6 noch funktioniert, der gehört verdroschen von oben bis unten ;-)

Wenn mein Auftraggeber mir auferlegt, dass es auch in diesem uralten Stück Sch^wTechnik noch laufen muss, dann gilt es ihn davon zu überzeugen, dass es komplett sinnlos und vor allem eine Verschwendung seines Geldes ist. Wenn ich es "richtig" machen will und trotzdem lauffähig im IE6, dann heisst das: Tüfteilei. Tüftelei bedeutet Zeitaufwand. Zeitaufwand bedeutet Geld. Spätestens hier werden auch Nichttechniker hellhörig *g*.

Die ganze "Wie baue ich HTML Quellcode 'richtig' auf" Debatte ist voll von religiösen Diskussionen, Überlegungen und scheinbaren "must-do" Dingen, die sicherlich (mal mehr, mal weniger) sinnvoll sind aber in der realen Welt irgendwann einfach nicht mehr durchzusetzen sind. Wenn ich die Wahl habe zwischen einem halben Tag optimieren (inklusive Recherche, Regressionstests, etc) und zehn Minuten Umsetzung einer "dreckigen" Tabellenlösung, dann werde ich mich sehr wahrscheinlich für die dreckige Tabellenlösung entscheiden - that's life.

Irgendwie erinnert mich das an "Während Villariba schon live gegangen ist wird in Villabacho noch das richtige Layout gesucht" ;-)