kostenloser Webspace werbefrei: lima-city


<div> vertikal und horizontal zentrieren

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    pcundsoftware

    Kostenloser Webspace von pcundsoftware, auf Homepage erstellen warten

    pcundsoftware hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

  3. Hier auf Lima gibt es dazu auch ein Tutorial.

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

    pcundsoftware

    Kostenloser Webspace von pcundsoftware, auf Homepage erstellen warten

    pcundsoftware hat kostenlosen Webspace.

    Danke, das tutorial habe ich nicht gesehen.
    Problem gelöst.

    Beitrag zuletzt geändert: 4.1.2010 12:15:33 von pcundsoftware
  5. 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

Login zum Webhosting ohne Werbung!