zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Layout für Fortgeschrittene

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.01.2009, 23:22
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
  #2 (permalink)  
Alt 15.01.2009, 07:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 14.01.2009
Beiträge: 12
StefanE befindet sich auf einem aufstrebenden Ast
Standard

... zur Info:

Das div "main" sollte flexibel sein in der Höhe (zwecks anpassung an Bildschirm)!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.01.2009, 08:39
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Moin,

CSS-FAQ Punkt 4, 5 und 7
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:59 Uhr.