Vertikales zentrieren wenn Browserfenster kleiner als gesamte Seite @ tutorials.de: Tutorials, Forum & Hilfe

dwex · 08.06.10 08:39

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-Code:

<!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!

Maik · 08.06.10 08:41

Moin,

CSS vertical centering using float and clear hilft dir hierbei.

mfg Maik

dwex · 08.06.10 08:44

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)

Maik · 08.06.10 08:47

Jo, die Box wird zum oberen Fensterrand geschoben, aber nicht mehr über ihn hinaus, sodass Bereiche verschwinden.

mfg Maik

dwex · 08.06.10 08:49

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

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

Hier das CSS:

HTML-Code:

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

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Bild kleiner machen wenn Auflösung kleiner

Gesamte Website kleiner darstellen?

Div zentrieren - Problem bei kleiner auflösung

Befehl um eine Site im Browserfenster zu zentrieren

[CSS] Warum wird mein Layer nicht auf das gesamte Browserfenster gestreckt?

E-Mail:

Abonnieren Abbestellen