lizana902: Footer verschiebt sich bei minimiertem Fenster

Hallo ihr Lieben,

brauche dringend eure Hilfe. Ich muss eine Website machen im Rahmen meines Studiums. Da ich leider wirklich nicht viel Ahnung von CSS habe brauch ich eure Hilfe. Bei meiner "Kontaktformularseite" verschiebt sich der Footer mitten in das Formular sobald ich das Fenster kleiner mach, wenns groß ist passt alles super. Da ich die Seite noch nicht im WWW hab kann ich euch hier nur meinen Quelltext schicken:

html, body { margin: 0; padding: 0; height:100 %;}
body { color: #000000; font: 12px Helvetica, Arial, sans-serif; line-height: 18px; }
h2 { color: #00FF80; }
a { color: #80FF80; }
p { margin: 0 0 18px; }
#wrapper { float: left; width: 100%; }

	/\* Header \*/  
	#header			{ background: #808080; border-bottom: 2px solid #C0C0C0; }  
	#header h1  	{ color: #00FF80; margin: 0 0 3px; padding: 24px 18px 0; }  
	#header p		{ color: #97FF2F; font-size: 11px; font-weight: bold; padding: 0 18px; }  
	  
	/\* Content Style \*/  
	#navigation		{ padding-left: 4em; }  
	#navigation ul	{ margin: 0em ; padding:0em;}  
	#extra			{ border-bottom: 1px solid #C0C0C0; padding-right: 18px; }  
	#extra small	{ font-size: 11px; line-height: 18px; }  
	#content p, #extra p { padding-right: 18px; }  
	  
	/\* Content Positioning & Size \*/  
	#navigation		{ float: left; width: 180px; margin-left: -100%; }  
	#content		{ margin: 0 225px 36px;  }  
	#extra			{ float: left; margin-left: -200px; width: 182px; }		/\* Footer \*/  
	#footer			{ position:absolute; bottom:0px;background: #808080; border-bottom: 2px solid #C0C0C0;  
						clear: 					left; width: 100% ; }  
	#footer a		{ color: #80FF80; }  
	#footer	p		{ color: #A80054; margin: 0; padding: 0 18px 10px; }  
	#footer ul		{ border-bottom: 1px solid ;color: #C0C0C0; list-style: none; margin: 0 18px ; padding: 10px 0 6px; }  
	#footer li		{ display: inline; font-size: 11px; font-weight: bold; padding-right: 5px; }  

Ich hoffe ihr könnt mir helfen!

Viele Grüße

lizana

  1. Hi,

    brauche dringend eure Hilfe. Ich muss eine Website machen im Rahmen meines Studiums. Da ich leider wirklich nicht viel Ahnung von CSS habe brauch ich eure Hilfe. Bei meiner "Kontaktformularseite" verschiebt sich der Footer mitten in das Formular sobald ich das Fenster kleiner mach, wenns groß ist passt alles super. Da ich die Seite noch nicht im WWW hab kann ich euch hier nur meinen Quelltext schicken:

    Wieso musst du etwas für dein Studium machen was du nicht gelernt hast? Aber egal....

    Ich hoffe ihr könnt mir helfen!

    Wenn du uns noch das HTML zeigst und diesmal den Quelltext entsprechend postest vielleicht.

    1. Hallo,

      oh sorry. mein Quelltext:

      <style type="text/css" media="screen">  
      	html, body 		{ margin: 0; padding: 0; height:100 %;}  
      		body 			{ color: #000000; font: 12px Helvetica, Arial, sans-serif; line-height: 18px; }  
      		h2				{ color: #00FF80; }  
      		a				{ color: #80FF80; }  
      		p				{ margin: 0 0 18px; }  
      		#wrapper		{ float: left; width: 100%; }  
      		  
      		/* Header */  
      		#header			{ background: #808080; border-bottom: 2px solid #C0C0C0; }  
      		#header h1  	{ color: #00FF80; margin: 0 0 3px; padding: 24px 18px 0; }  
      		#header p		{ color: #97FF2F; font-size: 11px; font-weight: bold; padding: 0 18px; }  
      		  
      		/* Content Style */  
      		#navigation		{ padding-left: 4em; }  
      		#navigation ul	{ margin: 0em ; padding:0em;}  
      		#extra			{ border-bottom: 1px solid #C0C0C0; padding-right: 18px; }  
      		#extra small	{ font-size: 11px; line-height: 18px; }  
      		#content p, #extra p { padding-right: 18px; }  
      		  
      		/* Content Positioning & Size */  
      		#navigation		{ float: left; width: 180px; margin-left: -100%; }  
      		#content		{ margin: 0 225px 36px;  }  
      		#extra			{ float: left; margin-left: -200px; width: 182px; }		/* Footer */  
      		#footer			{ position:absolute; bottom:0px;background: #808080; border-bottom: 2px solid #C0C0C0;  
      							clear: 					left; width: 100% ; }  
      		#footer a		{ color: #80FF80; }  
      		#footer	p		{ color: #A80054; margin: 0; padding: 0 18px 10px; }  
      		#footer ul		{ border-bottom: 1px solid ;color: #C0C0C0; list-style: none; margin: 0 18px ; padding: 10px 0 6px; }  
      		#footer li		{ display: inline; font-size: 11px; font-weight: bold; padding-right: 5px; }  
      	</style>  
      	<!--[if IE]>  
      	<style type="text/css">  
      	    #navigation, #content, #extra { margin-top: 20px; }  
      	</style>  
      	<![endif]-->  
      
      
      1. Hallo,

        oh sorry. mein Quelltext

        Und wo ist das HTML ??

        1. komisch..

            
          	<style type="text/css" media="screen">  
          	html, body 		{ margin: 0; padding: 0; height:100 %;}  
          		body 			{ color: #000000; font: 12px Helvetica, Arial, sans-serif; line-height: 18px; }  
          		h2				{ color: #00FF80; }  
          		a				{ color: #80FF80; }  
          		p				{ margin: 0 0 18px; }  
          		#wrapper		{ float: left; width: 100%; }  
          		  
          		/* Header */  
          		#header			{ background: #808080; border-bottom: 2px solid #C0C0C0; }  
          		#header h1  	{ color: #00FF80; margin: 0 0 3px; padding: 24px 18px 0; }  
          		#header p		{ color: #97FF2F; font-size: 11px; font-weight: bold; padding: 0 18px; }  
          		  
          		/* Content Style */  
          		#navigation		{ padding-left: 4em; }  
          		#navigation ul	{ margin: 0em ; padding:0em;}  
          		#extra			{ border-bottom: 1px solid #C0C0C0; padding-right: 18px; }  
          		#extra small	{ font-size: 11px; line-height: 18px; }  
          		#content p, #extra p { padding-right: 18px; }  
          		  
          		/* Content Positioning & Size */  
          		#navigation		{ float: left; width: 180px; margin-left: -100%; }  
          		#content		{ margin: 0 225px 36px;  }  
          		#extra			{ float: left; margin-left: -200px; width: 182px; }		/* Footer */  
          		#footer			{ position:absolute; bottom:0px;background: #808080; border-bottom: 2px solid #C0C0C0;  
          							clear: 					left; width: 100% ; }  
          		#footer a		{ color: #80FF80; }  
          		#footer	p		{ color: #A80054; margin: 0; padding: 0 18px 10px; }  
          		#footer ul		{ border-bottom: 1px solid ;color: #C0C0C0; list-style: none; margin: 0 18px ; padding: 10px 0 6px; }  
          		#footer li		{ display: inline; font-size: 11px; font-weight: bold; padding-right: 5px; }  
          	</style>  
          	<!--[if IE]>  
          	<style type="text/css">  
          	    #navigation, #content, #extra { margin-top: 20px; }  
          	</style>  
          	<![endif]-->
          
            
          	<style type="text/css" media="screen">  
          	html, body 		{ margin: 0; padding: 0; height:100 %;}  
          		body 			{ color: #000000; font: 12px Helvetica, Arial, sans-serif; line-height: 18px; }  
          		h2				{ color: #00FF80; }  
          		a				{ color: #80FF80; }  
          		p				{ margin: 0 0 18px; }  
          		#wrapper		{ float: left; width: 100%; }  
          		  
          		/* Header */  
          		#header			{ background: #808080; border-bottom: 2px solid #C0C0C0; }  
          		#header h1  	{ color: #00FF80; margin: 0 0 3px; padding: 24px 18px 0; }  
          		#header p		{ color: #97FF2F; font-size: 11px; font-weight: bold; padding: 0 18px; }  
          		  
          		/* Content Style */  
          		#navigation		{ padding-left: 4em; }  
          		#navigation ul	{ margin: 0em ; padding:0em;}  
          		#extra			{ border-bottom: 1px solid #C0C0C0; padding-right: 18px; }  
          		#extra small	{ font-size: 11px; line-height: 18px; }  
          		#content p, #extra p { padding-right: 18px; }  
          		  
          		/* Content Positioning & Size */  
          		#navigation		{ float: left; width: 180px; margin-left: -100%; }  
          		#content		{ margin: 0 225px 36px;  }  
          		#extra			{ float: left; margin-left: -200px; width: 182px; }		/* Footer */  
          		#footer			{ position:absolute; bottom:0px;background: #808080; border-bottom: 2px solid #C0C0C0;  
          							clear: 					left; width: 100% ; }  
          		#footer a		{ color: #80FF80; }  
          		#footer	p		{ color: #A80054; margin: 0; padding: 0 18px 10px; }  
          		#footer ul		{ border-bottom: 1px solid ;color: #C0C0C0; list-style: none; margin: 0 18px ; padding: 10px 0 6px; }  
          		#footer li		{ display: inline; font-size: 11px; font-weight: bold; padding-right: 5px; }  
          	</style>  
          	<!--[if IE]>  
          	<style type="text/css">  
          	    #navigation, #content, #extra { margin-top: 20px; }  
          	</style>  
          	<![endif]-->
          
            
          	<style type="text/css" media="screen">  
          	html, body 		{ margin: 0; padding: 0; height:100 %;}  
          		body 			{ color: #000000; font: 12px Helvetica, Arial, sans-serif; line-height: 18px; }  
          		h2				{ color: #00FF80; }  
          		a				{ color: #80FF80; }  
          		p				{ margin: 0 0 18px; }  
          		#wrapper		{ float: left; width: 100%; }  
          		  
          		/* Header */  
          		#header			{ background: #808080; border-bottom: 2px solid #C0C0C0; }  
          		#header h1  	{ color: #00FF80; margin: 0 0 3px; padding: 24px 18px 0; }  
          		#header p		{ color: #97FF2F; font-size: 11px; font-weight: bold; padding: 0 18px; }  
          		  
          		/* Content Style */  
          		#navigation		{ padding-left: 4em; }  
          		#navigation ul	{ margin: 0em ; padding:0em;}  
          		#extra			{ border-bottom: 1px solid #C0C0C0; padding-right: 18px; }  
          		#extra small	{ font-size: 11px; line-height: 18px; }  
          		#content p, #extra p { padding-right: 18px; }  
          		  
          		/* Content Positioning & Size */  
          		#navigation		{ float: left; width: 180px; margin-left: -100%; }  
          		#content		{ margin: 0 225px 36px;  }  
          		#extra			{ float: left; margin-left: -200px; width: 182px; }		/* Footer */  
          		#footer			{ position:absolute; bottom:0px;background: #808080; border-bottom: 2px solid #C0C0C0;  
          							clear: 					left; width: 100% ; }  
          		#footer a		{ color: #80FF80; }  
          		#footer	p		{ color: #A80054; margin: 0; padding: 0 18px 10px; }  
          		#footer ul		{ border-bottom: 1px solid ;color: #C0C0C0; list-style: none; margin: 0 18px ; padding: 10px 0 6px; }  
          		#footer li		{ display: inline; font-size: 11px; font-weight: bold; padding-right: 5px; }  
          	</style>  
          	<!--[if IE]>  
          	<style type="text/css">  
          	    #navigation, #content, #extra { margin-top: 20px; }  
          	</style>  
          	<![endif]-->
          
            
          	<style type="text/css" media="screen">  
          	html, body 		{ margin: 0; padding: 0; height:100 %;}  
          		body 			{ color: #000000; font: 12px Helvetica, Arial, sans-serif; line-height: 18px; }  
          		h2				{ color: #00FF80; }  
          		a				{ color: #80FF80; }  
          		p				{ margin: 0 0 18px; }  
          		#wrapper		{ float: left; width: 100%; }  
          		  
          		/* Header */  
          		#header			{ background: #808080; border-bottom: 2px solid #C0C0C0; }  
          		#header h1  	{ color: #00FF80; margin: 0 0 3px; padding: 24px 18px 0; }  
          		#header p		{ color: #97FF2F; font-size: 11px; font-weight: bold; padding: 0 18px; }  
          		  
          		/* Content Style */  
          		#navigation		{ padding-left: 4em; }  
          		#navigation ul	{ margin: 0em ; padding:0em;}  
          		#extra			{ border-bottom: 1px solid #C0C0C0; padding-right: 18px; }  
          		#extra small	{ font-size: 11px; line-height: 18px; }  
          		#content p, #extra p { padding-right: 18px; }  
          		  
          		/* Content Positioning & Size */  
          		#navigation		{ float: left; width: 180px; margin-left: -100%; }  
          		#content		{ margin: 0 225px 36px;  }  
          		#extra			{ float: left; margin-left: -200px; width: 182px; }		/* Footer */  
          		#footer			{ position:absolute; bottom:0px;background: #808080; border-bottom: 2px solid #C0C0C0;  
          							clear: 					left; width: 100% ; }  
          		#footer a		{ color: #80FF80; }  
          		#footer	p		{ color: #A80054; margin: 0; padding: 0 18px 10px; }  
          		#footer ul		{ border-bottom: 1px solid ;color: #C0C0C0; list-style: none; margin: 0 18px ; padding: 10px 0 6px; }  
          		#footer li		{ display: inline; font-size: 11px; font-weight: bold; padding-right: 5px; }  
          	</style>  
          	<!--[if IE]>  
          	<style type="text/css">  
          	    #navigation, #content, #extra { margin-top: 20px; }  
          	</style>  
          	<![endif]-->
          
          1. WTF ??

            Wieso jetzt das Ganze 4 Mal und wieder ohne HTML??

            MfG
            Simon