# position: fixed; und in Bildschirmmitte



## ping (21. März 2011)

Hallo zusammen

Als Neuling stelle ich meine aktuelle Frage einfach mal hier rein und hoffe auf eine mögliche Antwort.

Das Problem:
Ich möchte eine Webseite kreieren bei welcher das "Header"-Div beständig bleibt (an der gleichen Position) und das Content Div schiebt sich beim Scrollen hoch. Soweit noch kein Problem. Leider bringe ich den gewünschten Effekt jedoch nicht mittig und dynamisch auf den Bildschirm. Probiert habe ich es sowohl mit Text wie auch Bildern... wie im ".header" zu sehen ist.


```
<!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">
  <head>	
	<!-- CSS and JS imports -->
	<style type="text/css">
		html, body{ 
			text-align: center;
			width: 99.5%; 
			background-color: grey;
		}

		.wrap{
			text-align: left;
			margin: 0 auto;
			width: 80%;
			background-color: white;
		}

		.header{
			min-height: 160px;
			//position: fixed;
			background: red url(img/title.png) fixed repeat-y;
		}
		.header h1{
			text-align: center;
		}
		
		.content{
			padding: 160px 0;
		}
	</style>
  </head>

  <body>
	<div class="wrap">
		<div class="header">
			<h1>Shift</h1>
		</div>
		<div class="content">
			safasdfsdfasdf<p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p>
		</div>
	</div>
  </body>
</html>
```

Vielleicht kann ich jemanden mit meinem Beispiel herausfordern 
Vielen Dank für eine Antwort
Grüsse Ping


----------



## Frezl (21. März 2011)

Hey ping,

herzlich Willkommen im Forum ;-)

Füg mal bei html,body margin:0; und padding:0; ein und lass dafür das width:99,5% (wofür soll das denn gut sein?) ein! Wenn du dann dem header noch width:80% gibst, sollte alles so sein, wie du dirs vorstellst.

html und body ham standardmäßig ein margin und padding, das man als erstes erst mal ausschalten sollte ;-)

So sollte es aussehen:

```
<!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">
  <head>	
	<!-- CSS and JS imports -->
	<style type="text/css">		
		html, body{ 
			text-align: center;
			background-color: grey;
			margin:0;
			padding:0;
		}

		.wrap{
			text-align: left;
			margin:auto;
			width:80%;
			background-color: white;
		}

		.header{
			min-height: 160px;
			position: fixed;
			margin:0;
			width: 80%;
			background: red url(img/title.png) fixed repeat-y;
		}
		.header h1{
			text-align: center;
		}
		
		.content{
			padding: 160px 0;
		}
	</style>
  </head>

  <body>
	<div class="wrap">
		<div class="header">
			<h1>Shift</h1>
		</div>
		<div class="content">
			safasdfsdfasdf<p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p><p>sjaf</p>
		</div>
	</div>
  </body>
</html>
```

Grüße,
Frezl


----------



## ping (22. März 2011)

Hey Frezl

Hat alles super funktioniert.

Mit dem Ersetzten durch diese Zeile:

```
background: red url(img/title.png) center repeat-y;
```
Ist jetzt sogar noch das Bild mittig.

Danke vielmals.
Grüsse Ping


----------

