Problem mit einem CSS Layout

Status
Nicht offen für weitere Antworten.
devStorm

devStorm

Erfahrenes Mitglied
Hallo, ich habe eine Aufgabe bekommen, dieses Layout mit CSS umzusetzen. Es dürfen keine Tabellen verwendet werden. Es geht um den DATA (blau) Bereich. Leider scheitere ich im Moment daran. Kann mir eventuell jemand behilflich sein?

Es sind ins gesamt 3 Layer (blau, grün, rot). Der blaue Layer soll 900px breit und 100% hoch sein, dabei sollte der Header und Footer beachtet werden, also solte sich der Bereich nur im Browserfenster ausbreiten, und nicht daraus schießen.

Beim grünem Layer, sind es ingesamt 4 div`s. Das war leider notwendig, da je ein Bereich ein unterschiedliches Hintergrundbild enthält. Hier hatte ich schon das erste Problem, was die Anordnung der divs angeht.

Der rote Layer, ist der eigentliche Datenbereich, auf der linken Seite sollen Inhalte dargestellt werden, rechts die News. Das Problem hier ist, das beide Bereiche den grünen Layer überdecken müssen. Auch hier hatte ich das Problem bei der div Anordnung.

Ich habe noch ein Bild von der Aufgabe angehängt, so kann es vielleicht besser veranschaulicht werden.

Würde mich sehr freuen wenn mir jemand bei diesem Problem helfen könnte.
 

Anhänge

  • Layout.jpg
    Layout.jpg
    26,4 KB · Aufrufe: 102
Etwa so:
HTML: 
<div id="container">
	<div id="header">Header</div>

	<div id="data">
		<div id="dx">
			<div id="d1">D1</div>
			<div id="d2">D2</div>
			<div id="inhalt">Inhalt</div>
		</div>
		<div id="nx">
			<div id="n1">N1</div>
			<div id="n2">N2</div>
			<div id="news">News</div>
		</div>
	</div>

	<div id="footer">Footer</div>
</div>
Code: 
* {
	margin:			0;
	padding:		0;
}
body {
	text-align:		center;
}
#container {
	position:		relative;
	margin:			0 auto;
	width:			900px;
	text-align:		left;
}
#header, #footer {
	height:			170px;
	background-color:	#b9b9b9;
}
#data {
	padding:		20px;
	background-color:	#008cbf;
}
#dx {
	position:		relative;
	float:			left;
	width:			597px;
}
#nx {
	position:		relative;
	width:			248px;
	margin-left:		607px;
}
#d1, #d2, #n1, #n2 {
	height:			248px;
	background-color:	#09be01;
}
#d1, #n1 {
	margin-bottom:		10px;
}
#inhalt, #news {
	background-color:	#be0030;
}
#inhalt {
	position:		absolute;
	top:			12.5%;
	right:			0;
	width:			451px;
	height:			75%;
}
#news {
	position:		absolute;
	top:			12.5%;
	left:			0;
	width:			90px;
	height:			75%;
}
 
Besten Dank für die Hilfe. Jedoch habe ich noch ein Problem entdeckt, das es von der Höhe her, nicht auf 100% skaliert wird, der Scrollbalken ist immer noch vorhanden, so das der Footerbereich ein Tuck zu weit unten ist. Der Data Layer und die einzelnen 4 Layer müssen ja Skalieren, so wie der News und Inhaltbereich.

Mit dem IE6.0 und FF 1.0.4 ist es leider gleich, sprich die Skrollaction.
 
Wenn jemand dir die Aufgabe gegeben hat, dies zu realisieren, dann solltest du dich damit auch beschäftigen. Was ich vorgeschlagen habe, ist eine fast schon komplette Lösung. Wo bleibt die Eigeninitiative?
 
Keine Frage, hast mit sicherheit REcht. Jedoch ist das Layout der Webseite so konfus und verschachtelt, das ich noch an anderen Bereichen zu knabern habe. Das einzige Problem was ich nicht lösen konnte, war diese Verschtelung wie auf dem Bild zu sehen.

Ich bekomme es leider auch nicht hin, das der Brwoser mein Konstrukt genauf 100% in der Hohe darstellt. Es ist etweder immer weniger oder mehr. Aber nie 100%. Deshalb auch die bitte.
 
Irgendwie ist das alles sehr depremierend. Ich habe früher immer mit Tabellen das Design definiert. Jaja ich weiß, eigentlich darf das nicht gemacht werden. Deshalb wollte ich nun bei meinem neuen Projekt alles mit CSS umsetzen. Doch leider haut das irgendwie nicht hin. Ich habe die alten Entwurfe jetzt verworfen, und habe gerade komplett alles neu aufgebaut. Aber auch jetzt funktioniert es nicht. Wenn ich nun in den roten Layer Conten übergebe, wird das Konstrukt nicht skaliert. Ich weiß langsam nicht mehr weiter. Hier der Code und der Layoutplan als Bild. Hoffe mir kann jemand helfen.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<style type="text/css" media="screen">
*                 { margin: 0; padding: 0;}
body            { height: 100%; text-align: center; background-color: #868369; }
div#container   { width: 857px; height: auto; text-align: left; margin: 0 auto;  border: 1px solid blue; }
#head         { height: 170px; background-color:   #b9b9b9; }
#ubgng       { height: 45px; background-color:   #b9b9a1; }
#data         { background-color: #008cbf; margin: 0 auto; }
#foot          { height: 68px; background-color:   #b9b9b9;}
#dx            { position: relative; width: 600px; float: left; height: auto; background-color: #FFD200; }
#nx            { position: relative; width: 257px; float: right; left: 0px; height: auto; background-color: #FFD200;  }
#d1             {  position: fixed; height: 185px; margin: 5px; background-color: #09BE00; }
#d2             {  position: fixed; height: 185px; margin: 5px; background-color: #09BE00; }
#n1             {  position: fixed; height: 185px; margin: 5px; margin-left: 0px; background-color: #09BE00; }
#n2             {  position: fixed; height: 185px; margin: 5px; margin-left: 0px; background-color: #09BE00;  }
#inhalt    { position: absolute; width: 525px; margin: 5px; top: 7%; left: 40px; background-color: #BE0031; white-space: wrap }
#news     { position: absolute; width: 200px; margin: 5px; top: 7%; left: 28px; background-color: #BE0031; }
</style>
</head>
<body>
	<div id="container">
		<div id="head">HEADER</div>
		<div id="ubgng">FADEÜBERGANG</div>
		<div id="dx">
			<div id="d1">D1</div>
			<div id="inhalt">INHALT</div>
			<div id="d2">D2</div>
		</div>
		<div id="nx">
			<div id="n1">N1</div>
			<div id="news">NEWS</div>
			<div id="n2">N2</div>
		</div>
		<div id="foot">FOOTER</div>
	</div>	
</body>
</html>
Layout.jpg
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück