Vertikales zentrieren wenn Browserfenster kleiner als gesamte Seite

dwex

Erfahrenes Mitglied
Hallo Leute,

ich habe eine Seite gebastelt welche vertikal zentriert sein soll.
Das funktioniert auch bestens solange das Browserfenster größer als der Inhalt ist.
Ist es jedoch kleiner wird mir #header abgeschnitten.

Kann mir da bitte einer weiterhelfen?

Hier das CSS:
Code:
body {
	background-color:white;
	margin: 0px;
	font-family:Arial;
	font-size: 12px;
}

hr{
 border: 0px; /* Für Firefox und Opera */
 border-top: solid 1px rgb(189,9,38);
 border-bottom: solid 1px white; /* Für I.Explorer (Seiten-Hintergrundfarbe!) */
}

h1 {
	color: rgb(189,9,38);
	font-size: 23px;
}


#container {
	/*background-color:yellow;*/
	position: absolute;
	height: 560px;
	width: 100%;
	clear:left;
	margin: -280px 0px 0px 0px;
	top: 50%
}

#header {
	/*background-color:silver;*/
	width: 900px;
	text-align: right;
	margin: 0 auto;
}

#content {
	/*background-color:silver;*/
	width: 900px;
	margin: 0 auto;
}

#links {
	float:left;
	height: 400px;
	margin: 20px 0px 20px 120px;
	text-align:center;
}

#rechts {
	float:left;
	height: 400px;
	margin: 30px 0px 20px 100px;
	text-align:left;
}

.stop {
	clear:both;
}

#footer {
	/*background-color:silver;*/
	width: 900px;
	text-align: right;
	margin: 0 auto;
	color: rgb(131,130,128);
}
und hier das HTML:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE">
<head>

<link href="screen.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<body>

<div id="container">

    <div id="header">
        <img src="logo.jpg">
    </div>

    <hr />

    <div id="content">
    	<div id="links">
    		<img src="glas.jpg">
    	</div>

    	<div id="rechts">
    		<h1>Wir wachsen und bauen um</h1>
    		<strong>Gro&szlig;e Ideen brauchen gro&szlig;en Freiraum.<br />
    		Deshalb wird unser Auftritt derzeit &uuml;berarbeitet.<br />
    		In K&uuml;rze pr&auml;sentieren wir hier unseren neuen Auftritt</strong><br />
    		<br />
    		<br />
    		<br />
    		Firmenname<br />
            Strasse<br />
            PLZ Ort<br />
            Telefon: +49 (0)999 888 777<br />
            Telefax: +49 (0)666 555 444<br />
            E-Mail: email@adresse.asdf<br />
			<br />
            Vertretungsberechtigter Gesch&auml;ftsf&uuml;hrer: Name<br />
			<br />
            Registergericht: Amtsgericht Stadt (Handelsregister)<br />
            Registernummer: HRB 1234<br />
			<br />
            Inhaltlich Verantwortlicher gem&auml;&szlig; § 55 Abs. 2 RStV: Name (Anschrift wie oben)
    	</div>
    </div>



    <hr class="stop">

    <div id="footer">
    	<strong>Webdesign &nbsp &bull; &nbsp Hosting &nbsp &bull; &nbsp Programmierung</strong>
    </div>

</div>
</body>

Vielen Dank für eure Hilfe im Voraus!
 
Servus Maik,

vielen dank aber das habe ich schon probiert.

Wenn ich im CSS folgendes mache:
Code:
#distance {
		width:1px;
		height:50%;
		background-color:#fc6;
		margin-bottom:-260px; /* half of container's height */
		float:left;
		}

#container {
	position: relative;
	height: 560px;
	width: 100%;
	clear:left;

und das DIV "distance" vor den "container" setze klebt mir das Layout wieder oben fest (getestet mit FF 3.6.3)
 
Jo, die Box wird zum oberen Fensterrand geschoben, aber nicht mehr über ihn hinaus, sodass Bereiche verschwinden.

mfg Maik
 
Ich habe dann den "container" auch am oberen rand "kleben" wenn ich das Fenster größer habe als den "container".

Oh man - wenn man(n) mit Doofheit geschlagen ist wie ich :confused:

Ich sollte natürlich im CSS von html und body auch die Höhe auf 100% setzten.

Hier das CSS:
HTML:
html {
	height:100%;
}

body {
	background-color:white;
	margin: 0px;
	font-family:Arial;
	font-size: 12px;
	height:100%;
}

hr{
 border: 0px; /* Für Firefox und Opera */
 border-top: solid 1px rgb(189,9,38);
 border-bottom: solid 1px white; /* Für I.Explorer (Seiten-Hintergrundfarbe!) */
}

h1 {
	color: rgb(189,9,38);
	font-size: 23px;
}


#distance {
		width:1px;
		height:50%;
		/*background-color:#fc6;*/
		margin-bottom:-280px; /* half of container's height */
		float:left;
		}

#container {
	position: relative;
	height: 560px;
	width: 100%;
	clear:left;
}

#header {
	/*background-color:silver;*/
	width: 900px;
	text-align: right;
	margin: 0 auto;
}

#content {
	/*background-color:silver;*/
	width: 900px;
	margin: 0 auto;
}

#links {
	float:left;
	height: 400px;
	margin: 20px 0px 20px 120px;
	text-align:center;
}

#rechts {
	float:left;
	height: 400px;
	margin: 30px 0px 20px 100px;
	text-align:left;
}

.stop {
	clear:both;
}

#footer {
	/*background-color:silver;*/
	width: 900px;
	text-align: right;
	margin: 0 auto;
	color: rgb(131,130,128);
}

Vielen Dank Maik für deine Denkanstösse
 
Zurück