Wer knackt dieses Layout ;)

Status
Nicht offen für weitere Antworten.
daflowjoe

daflowjoe

Mitglied
Hi,

ich habe eine Layoutvorgabe. Diese soll ich ohne Tabellen etc umsetzen.
Das Layout soll im Prinzip aus einer Spalte(links) bestehen die eine feste Höhe hat.
Daneben sollen dann im Prinzip 3 Zeilen stehen. In der ersten Zeile der Header. In der zweiten Zeile 2 Spalten, dabei soll sich die jeweils höhere Spalte, also die die mehr Text enthält , der Größe der jeweils benachbarten Spalten anpassen. Danach folgt ein Footer..

Bedingung ist, dass es im IE als auch im Firefox funktioniert.

Ich habe es hinbekommen, dass es der Firefox packt, allerdings streikt der IE.

Wer bekommt es hin? ;-)

Mfg Joe
 

Anhänge

  • layout_fh.jpg
    layout_fh.jpg
    119,4 KB · Aufrufe: 31
Läuft bei mir im IE7 und Firefox
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<title>Spaltenlayout</title>
		<style type="text/css">
		<!--
		* {
			margin: 0;
			padding: 0;
		}
		
		body {
			background-color: #fff;
		}
		
		#spalte-fest {
			background-color: #f0f0f0;
			width: 50px;
			height: 500px;
			position: absolute;
		}
		
		#spalte-oben, #spalte-mitte, #spalte-unten {
			left: 50px;
			position: relative;
			width: 450px;
		}
		
		#spalte-oben {
			background-color: #333;
			color: #fff;						
		}
		
		#spalte-mitte {
			background-color: #eee;
		}
		
		#spalte-mitte-links {
			background-color: lime;
			width: 225px;
			height: 100%;
		}
		
		#spalte-mitte-rechts {
			background-color: orange;
			width: 225px;
			height: 100%;
			left: 225px;
			top: 0;
			position: absolute;
		}
		
		#spalte-unten {
			background-color: #333;
			color: #fff;
		}
		-->
		</style>
	</head>

	<body>
		<div id="spalte-fest">
			<p>
				fest
			</p>
		</div>
		<div id="spalte-oben">
			<h1>Header</h1>
		</div>
		<div id="spalte-mitte">
			<div id="spalte-mitte-links">
				<p>
					Text Text Text Text
				</p>
				<p>
					Text Text Text Text
				</p>
			</div>
			<div id="spalte-mitte-rechts">
				<p>
					Text Text Text Text
				</p>
			</div>
		</div>
		<div id="spalte-unten">
			<p>
				Footer
			</p>
		</div>
	</body>
</html>
 
hi,

funktioniert bei mir leider nur im Firefox. Im IE ist der rechte Container leider nicht so hoch wie der linke der Grüne. Das sollte allerdings genauso sein, wie im Firefox. =) Das is ja das Problem! *g

Hat jemand noch eine andere Lösung?
 
Zuletzt bearbeitet:
okok, das war ja garnicht mal so schwer :D

wie siehts aus, wenn die linke Spalte keine feste Breite hat bzw nur in em Werten angegeben ist? Sinn der Sache soll sein, dass User ihre Schriftgröße erhöhen können und der Container sich dann anpasst.

Ist das überhaupt technisch machbar?

Mfg Joe
 
Liquid Layout Problem

Hallo Liebe Tutorialer,

ich habe folgendes Problem. Ich möchte ein Layout entwerfen dessen Größen komplett liquid, also anpassbar, sind. Ich hab eine Navi, derren Breite demzufolge nicht fest sein darf. Daneben folgen 3 Zeilen, welche den Rest der Seite auffüllen. Die mittlere also die 2te Zeile soll hierbei in 2 Spalten unterteilt sein. Dabei soll die rechte Spalte immer genauso hoch sein wie die linke Spalte. Die Maximale Höhe der beiden Spalten ist also die Spalte mit dem meisten Inhalt.

Ist das überhaupt möglich?


P.S. Beispiel liegt im Anhang, allderings müsste nach oberer Logik, der schwarze Bereich unter dem grünen Bereich, da auch grün sein.

Vielen Dank schonmal im Vorraus

Mfg Joe
 

Anhänge

  • layout_fh.jpg
    layout_fh.jpg
    119,4 KB · Aufrufe: 12
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück