✔ Typo3 verschiebt Footer

B

Bionicman

Mitglied
Hallo zusammen!

Ich bin neu im Umgang mit Typo3 und habe ein komisches Problem, und zwar verschiebt mir Typo3 den Footer meiner Webseite um ca.10-20 Pixel nach unten.
Ich benutze als Vorlage eine HTML sowie eine CSS Datei und habe diese ins Template mit eingebunden. Öffne ich nur die HTML Datei im Browser wird der Footer korrekt eingebunden. Aber sobald ich die mit Typo3 eingebundene Seite betrachte wird der Footer verschoben.

Hier die Ansicht der HTML Vorlage im Browser
Hier die Ansicht eingebunden mit Typo3
Mich stört quasi in der Typo3 Ansicht der weiße Balken zwischen Content und Footer :)

Hier der Code der HTML Vorlage:

HTML: 
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <title>Sportsportal24</title>
</head>

<body>
###DOKUMENT###
   <div class="site">
      <div class="header">
	      ###LOGO###
      </div>
      <div class="topmenu">
			<!--###MENU###Beginn-->
	      <!--<div class="menu_item">
				  <div class="menu_item_active">
					  <a href="#">Home</a>
					</div>
				</div>
				<div class="menu_item">
				  <div class="menu_item2">
					  <a href="#">Fussball</a>
					</div>
				</div>
				<div class="menu_item">
				  <div class="menu_item2">
					  <a href="#">Formel1</a>
					</div>
				</div>
				<div class="menu_item">
				  <div class="menu_item2">
					  <a href="#">Boxen</a>
					</div>
				</div>
				<div class="menu_item">
				  <div class="menu_item2">
					  <a href="#">Impressum</a>
					</div>
				</div> -->
			<!--###MENU###Ende-->
      </div>
      <div class="content">
         <div class="content2">
					 ###INHALT###
	 </div>
      </div>
      <div class="footer">
			&copy; blablabla
      </div>
</div>
			###DOKUMENT###	
</body>
</html>

Und hier ein Auszug aus der CSS Datei:

HTML: 
body{
		 background:rgb(240,240,240);
		 font-family:Helvetica;
		 font-size:small;
		 margin:0;
		 padding:0;
		 width:100%;
		 height:100%;}
		 
.site{
			width:802px; 
			margin:0 0;
			background:rgb(255,255,255);}
			
.header{
				width:800px;
				height:110px;
				background:rgb(10,10,10);
				color:rgb(255,255,255);
				font-size:xx-large;
				font-weight:700;
				display:table-cell;
				vertical-align:middle}
				
.topmenu{
				 width:800px;
				 height:5px;
				 background:rgb(200,200,200);
				 overflow:visible;}

.content{
				 width:790px;
				 background:rgb(100,100,100);
				 padding-top:10px;
				 padding-left:10px;
				 overflow:visible;}
.content2{
					width:770px;
					background:rgb(200,200,200);
					padding-left: 5px;
					padding-right: 5px;
}
					
.footer{
				background:rgb(100,100,100);
				color:rgb(255,255,255);
				width:800px;
				height:20px;
				display:table-cell;
				vertical-align:middle;
				text-align:center;
				font-size:x-small;
				overflow:visible;}									
} 
}

Ich hoffe mir kann jemand helfen!

Noch eine Anmerkung: Dies scheint ein Probelm des Firefox zu sein, im Internet Explorer wird die Seite korrekt angezeigt!
 
Hi,

als erstes solltest du im Anschluß dieses Deklarationblockes die zwei rotmarkierten geschweiften Klammern entfernen, die in dem Stylesheet einen Syntax-Fehler produzieren, der in standardkonformen Browsern zu schwerwiegenden Darstellungsproblemen führen kann.

Code: 
.footer{
				background:rgb(100,100,100);
				color:rgb(255,255,255);
				width:800px;
				height:20px;
				display:table-cell;
				vertical-align:middle;
				text-align:center;
				font-size:x-small;
				overflow:visible;}									
} 
}


Die Lücke zwischen Content und Footer kann ich neben Firefox auch in Opera, Safari & Co. reproduzieren, wenn ich im DIV .content2 beispielsweise ein <p>-Element einfüge, das einen Textabsatz auszeichnet, und in diesen Browsern als Voreinstellung einen Initialwert für den vertikalen Außenabstand besitzt, der für den entstandenen Abstand zum Footer verantwortlich ist.

Um solche und ähnliche Darstellungsfehler in dem einen oder anderen Browser zu vermeiden, empfiehlt es sich, zu Beginn des Stylesheets folgende Regel zu notieren, die mit dem Universalselektor * zunächst bei allen im HTML-Dokument enthaltenden Elementen, die die Eigenschaft des Außen- u. Innenabstandes besitzen, den voreingestellten Wert auf null zurücksetzt.

CSS: 
* {
margin:0;
padding:0;
}

Dort, wo im Textfluß des Dokuments ein solcher Abstand erwünscht ist, wird er dann für das entsprechende Element spezifisch festgelegt.

mfg Maik
 
Vielen Dank Maik, die Lösung mit dem Universalselektor hat perfekt funktioniert!
Die zwei schließenden geschweiften Klammern im CSS sind nur ein Copy & Paste Überbleibsel ausm Stylesheet und kommen so im Code nicht vor. Ich wollt euch nur den überflüssigen Rest der Datei der Übersichtlichkeit halber ersparen ;)
Nochmals vielen Dank!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück