position: fixed; und in Bildschirmmitte

P

ping

Grünschnabel
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.

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">
  <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
 
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:
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">
  <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
 
Hey Frezl

Hat alles super funktioniert.

Mit dem Ersetzten durch diese Zeile:
Code: 
background: red url(img/title.png) center repeat-y;
Ist jetzt sogar noch das Bild mittig.

Danke vielmals.
Grüsse Ping
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück