CSS Layout für Fortgeschrittene

StefanE · #1 (**permalink**) 14.01.2009, 22:22

Hallo Kollegen -

Kann mir jemand bei meinem CSS Layout helfen?

Ich habe unten einen Code angehängt. Dabei möchte ich folgendes:

1. Wie kann ich die Seite über die gesamte Bildschirmhöhe gehen lassen?

2. Wie positioniere ich das div "content" vertikal mittig vom div "main"

3. Wie kann ich die beiden div's "menu" und "bottom" eleganter positionieren?

Herzlichen Dank schonmal, und ich bin gespannt auf eure Lösungen!!

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Test CSS Layout</title>
		<style type="text/css">
		
			body {
				background-color:	#FFFFFF;
				margin:				0;
			}

			#position {
				background-color:	#FFFFFF;
				border-width:		0px;
				border-color:		#000000;
				border-style: 		dotted;
				width:				1000px;
				height:				505px; /*wie funktioniert 100% Bildschirmhöhe minus 100px? */
				margin-right:		auto;
				margin-left:		auto;
				margin-top:			0px;
			}
			
			#main {
				background-color:	#FFFFFF;
				border-width:		5px;
				border-color:		#000000;
				border-style: 		solid;
				width:				600px;
				height:				500px; /*wie funktioniert 100% Bildschirmhöhe minus 100px? */
				margin-right:		auto;
				margin-left:		auto;
				margin-top:			0px;
			}

			#content {
				background-color:	#FFFFFF;
				border-width:		5px;
				border-color:		#000000;
				border-style: 		solid;
				height:				200px;
				margin-right:		10px;
				margin-left:		10px;
				margin-top:			100px; /*wie funktioniert die vertikale Zentrierung im div main? */
			}
			
			#bottom {
				background-color:	#FFFFFF;
				border-width:		5px;
				border-color:		#000000;
				border-style: 		solid;
				height:				50px;
				width:				570px;
				margin-top:    		-75px;
				margin-right:		auto;
				margin-left:		auto;

			}
			#menu {
				background-color: 	#FFFFFF;
				border-width:		5px;
				border-color:		#000000;
				border-style: 		solid;
				width:				175px;
				height:				200px;
				margin-top:			-210px;
			
			}
			
			#impressum {
				background-color:	#FFFFFF;
				border-width:		5px;
				border-color:		#000000;
				border-style: 		solid;
				width:				600px;
				height:				50px;
				margin-top:			25px;
				margin-right:		auto;
				margin-left:		auto;
			}
			
		</style>
	
	</head>

	<body>
		<div id="position">
			<div id="main">
				main
				<div id="content">
					content
				</div>
			</div>
			<div id="menu">
				menu
			</div>
		</div>
		<div id="bottom">
			bottom
		</div>
		<div id="impressum">
			impressum
		</div>
</body>
</html>

StefanE · #2 (**permalink**) 15.01.2009, 06:30

... zur Info:

Das div "main" sollte flexibel sein in der Höhe (zwecks anpassung an Bildschirm)!

hubspe · #3 (**permalink**) 15.01.2009, 07:39

Moin,

CSS-FAQ Punkt 4, 5 und 7

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Banner neben CSS Layout platzieren?	delaspuke	CSS	19	29.12.2010 22:08
Css 3 Seiten Layout will net so :)	nova_rs	CSS	1	30.03.2010 15:54
CSS Layout - ist das so möglich?	berlina	CSS	18	12.02.2007 21:55
Layout: Tabelle -> CSS \| ohne Schönheitsfehler?	Knickedi	CSS	20	05.08.2006 02:18
CSS Layout mit abgerundeten Ecken	dimension	CSS	3	17.04.2005 18:05