css layout.

wise · 27.01.2006, 05:01

hi, ich versuch seit 2 tagen ein layout (siehe screen) mit css zu bauen. habe einige tutorials etc. gemacht aber komme nicht zum gewünschten ergebnis.

das hauptproblem is die stelle mit den 2 balken untereinander. wenn ich das hinkriege dann kriege ich den rechten block nicht mehr rein.

habe jetzt keinen code zum zeigen da ich meistens nur tutorials abgeleitet hab aber nie wirklich an das gewünschte ergebnis herangekommen bin.

hero-master · 27.01.2006, 08:22

Hi

Das Ganze ist einfach ein 3-Spalten-Layout mit dem Trick, dass du in den mittleren Container noch 2 Boxen einfügen müsstest:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* {
margin:0;
padding:0
}

body {
text-align:center; /* Für den IE 5.x und IE, falls im Quirksmode*/
color:#FFF
}

#aussen {
width:700px;
background:#000;
padding:10px;
margin:0 auto
}

#links {
width:100px;
float:left;
background:red;
padding:50px 0
}

#mitte {
width:450px;
margin:0 25px;
float:left
}

#oben,
#unten {
padding:50px 0;
background:green
}

#unten {
margin-top:10px
}

#rechts {
width:100px;
float:left;
background:blue;
padding:50px 0
}

br#clear-left {
clear:left
}
</style>
<title></title>
</head>
<body>
<div id="aussen">
	<div id="links">1</div>
	<div id="mitte">
		<div id="oben">
			<p>
				2
			</p>
		</div>
		<div id="unten">
			<p>
				4
			</p>
		</div>
	</div>
	<div id="rechts">
		<p>
			3
		</p>
	</div>
	<br id="clear-left">
</div>
</body>
</html>

wise · 27.01.2006, 08:41

tja.. auf die einfachste lösung kommt man eben nie selbst

danke!