tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
2
ZUGRIFFE
558
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 21.03.11 15:26 #1
    ping ping ist offline Rookie
    Registriert seit
    Mar 2011
    Beiträge
    5
    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-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">
  <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
     
    Zitieren Zitieren
  2. 21.03.11 19:07 #2
    Avatar von Frezl
    Frezl Frezl ist offline Mitglied Brokat
    Registriert seit
    Oct 2003
    Beiträge
    473
    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-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">
  <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
     
    Wenn du das Gefühl hast "Cool, der Kerl konnte mir echt helfen!", dann teil es mir mit, indem du mich entsprechend bewertest!
    Zitieren Zitieren
  3. 22.03.11 09:38 #3
    ping ping ist offline Rookie
    Registriert seit
    Mar 2011
    Beiträge
    5
    Hey Frezl

    Hat alles super funktioniert.

    Mit dem Ersetzten durch diese Zeile:
    Code :
    1

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

    Danke vielmals.
    Grüsse Ping
     
    Zitieren Zitieren
« Bilder zuschneiden | Ausrichtung bei größerer Auflösung verschoben »

Ähnliche Themen

  1. Position: fixed im IE6 lösen
    Von ray2mi im Forum CSS
    Antworten: 3
    Letzter Beitrag: 04.12.09, 05:48
  2. position:fixed im IE6
    Von Sprint im Forum CSS
    Antworten: 3
    Letzter Beitrag: 28.04.09, 10:44
  3. position:relative wird im IE6 zu position:fixed
    Von German im Forum CSS
    Antworten: 5
    Letzter Beitrag: 09.04.09, 20:05
  4. position:fixed
    Von Crash123 im Forum CSS
    Antworten: 12
    Letzter Beitrag: 25.02.09, 14:31
  5. IE und fixed-position
    Von Fabian Frank im Forum CSS
    Antworten: 2
    Letzter Beitrag: 15.07.08, 11:13

Stichworte