<div> vertikal und horizontal zentrieren

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

11:42, 4.1.2010

Hallo,

wie in der Überschrift beschrieben, möchte ich ein div vertikal und horizontal zentrieren. Zuerst soll erreicht werden, dass sich das div middle vom div heading bis zum div footer erstreckt, dass immer am unteren ende des Browserfensters angezeigt wird, egal wie groß das browserfenster ist. Nun soll das div login im div middle vertikal und horizontal zentriert werden. (Es soll nachher alles so ein, dass man die Seite nicht scrollen muss und auch kein Scrollbalken erscheint.) Wie geht das?

hier kann man den Status der seite anschauen http://Kollross.selfip.com/login

hier der 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 content="de" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>PCundSoftware.de OnLine - Login</title>
<link href="login.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.style1 {
	text-align: center;
	font-size: small;
}
.style2 {
	font-size: x-large;
}
</style>
</head>

<body>
	<div id="complete">
		<div id="heading">
			<div id="logo">
			Logo
			</div>
			<div id="bg">
			Hintergrund
			</div>
			<div id="streifen">
			Streifen
			</div>
		Heading
		</div>
		<div id="middle">
			<div id="login" class="style1">
				Mit einer einzigen Anmeldung erhalten Sie Zugriff auf viele 
				Dienste von <br />
				<strong>PCundSoftware.de OnLine<br />
				<br />
				<span class="style2">Anmeldung<br />
				</span>bei PCundSoftware.de OnLine<br />
				<br />
				<table style="width: 100%">
					<tr>
						<td style="height: 24px">Benutzername:</td>
						<td style="height: 24px">
						<form method="post">
							<input name="Text1" type="text" /></form>
						</td>
					</tr>
					<tr>
						<td style="height: 4px">Passwort:</td>
						<td style="height: 4px">
						<form method="post">
							<input name="Password1" type="password" /></form>
						</td>
					</tr>
				</table>
				<br />
				&gt;&gt; Neu Registrieren</strong></div>
		</div>
		<div id="footer">
		Footer
		</div>
	</div>
</body>

</html>

hier der css code

html{
	height: 100%;
}

body{
	font-family: Arial, Helvetica, Sans-Serif;
	font-size: 12px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	height: 100%;
	padding: 0;
}

#complete{
	min-height: 100%;
	position: relative;
	width: 100%;
	height: 100%;
	background: #ffffff url('footer_rechts.jpg') no-repeat;
	background-position: right bottom;
}

#heading{
	background: #ededed url('heading_zischt.jpg') repeat-x;
	margin: 0;
	padding: 0;
	height: 100px;
	width: 100%
}

#middle{
	width: 100%;
	height: auto;
}

#login{
	background: #ffffff;
	margin: auto auto;
	width: 550px;
	height: 400px;
}

#footer{
	position: absolute; 
	bottom: 0; 
	left: 0;
	width: 100%;
	}

Schöne Grüße,
pcundsoftware

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
julian101

julian101 hat kostenlosen Webspace.

11:47, 4.1.2010
Hier auf Lima gibt es dazu auch ein Tutorial.

Schau hier http://www.lima-city.de/tutorials/inhalte-zentrieren
Autor dieses Themas
pcundsoftware

pcundsoftware hat kostenlosen Webspace.

11:51, 4.1.2010
Danke, das tutorial habe ich nicht gesehen.
Problem gelöst.

Beitrag zuletzt geändert: 4.1.2010 12:15:33 von pcundsoftware
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city