Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 14.01.2009, 23:22
StefanE StefanE ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.01.2009
Beiträge: 12
StefanE befindet sich auf einem aufstrebenden Ast
Standard CSS Layout für Fortgeschrittene

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>
Mit Zitat antworten
Sponsored Links