Footer will nicht so wie ich will -.-

Funj0y

Mitglied
Mahlzeit alle zusammen,

Ich versuche mich mal wieder an einem Design für mein Verein, aber wie ich feststellen musste bin wohl doch schon zu lange raus aus HTML & CSS nun habe ich das Design so gut wie fertig bekommen und wollte den Content füllen und sehe das der Footer zwar unten steht aber sobald der Inhalt vom Content kommt wird der Footer mehr oder weniger ignoriert (siehe Bilder).

Hier erstmal mein HTML Grundgerüst:
HTML:
<!DOCTYPE html>
<html>
<head>
	<title>SC Eintracht Berlin e.V. - Abteilung Tischtennis</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta name="author" content="tpl::SystemHomepageAuthor" />
	<meta name="robots" content="noindex" />
	<meta name="description" content="tpl::$strShortDescription" />
	<link rel="stylesheet" href="design/scebtt2014/src/style.css" type="text/css" />
</head>
<body>
<div id="Wrapper">
 <div id="Navigation">
	 <ul>
	 	<li id="FirstElement"><a href="#">Startseite</a></li>
	 	<li><a href="#">Hallenplan</a></li>
	 	<li><a href="#">Mannschaften</a></li>
	 	<li><a href="#">G&auml;stebuch</a></li>
	 	<li><a href="#">Forum</a></li>
	 	<li><a href="#">Anmelden</a></li>
	 </ul>
 </div>
 <div id="Header">
 <p>Spielort: Hermsdorfer Stra&szlig;e 27&nbsp;&bull;&nbsp;12627 Berlin-Hellersdorf</p>

 <img src="design/scebtt2014/player/__hendrik.jpg" name="(C) Eintracht Berlin 2014" title="(C) Eintracht Berlin 2014"/>
 </div>

	<div id="Content">
		<img src="galerie/index/Vereinsmitlgieder.jpg" title="Vereinsmitlgieder" alt="Vereinsmitlgieder" />
		<div>
		<h1>1. Leitungssitzung 2014</h1>
		<p>Am 18.02.2014 findet um 19:00 Uhr unsere 1.&nbsp;Leitungssitzung 2014 im Versammlungsraum unserer Sporthalle statt.</p>
		</div><!-- usw...... -->
	</div>
</div>
<div id="Footer"><!-- Footer -->(c) 2014 </div>
</body>
</html>

So dazu die style.css Datei:
CSS:
@font-face {
	font-family:Calibri;
	src: url(../fonts/Calibri.eot);
	src: local('Calibri'), url('../fonts/Calibri.woff') format('woff'), url('../fonts/Calibri.ttf') format('truetype');

}

@font-face {
	font-family:SansationBold;
	src: url(../fonts/SansationBold.eot);
	src: local('SansationBold'), url('../fonts/SansationBold.woff') format('woff'), url('../fonts/SansationBold.ttf') format('truetype');

}

html {
	height:100%;
}
body {
	background-color: #ffffff;
	background: url(../BackgroundHeader.jpg) repeat-x;
	font-size: 100%;
	height:100%;
}

div#Wrapper {
	width: 900px;
	position: absolute;
	left: 50%;
	top: 0px;
	margin-left: -450px;
}

div#Navigation {
	width: 100%;
	height: 98px;
	background: url(../logo.jpg) no-repeat;
	background-position: 25px center;

}

div#Navigation ul {
	float: right;
	margin: 0px;
}

div#Navigation ul li {
	float: left;
	background: url(../NavigationSeparator.jpg) no-repeat;
	background-position: left center;
	list-style-type: none;
	line-height: 98px;
	padding: 0px 10px 0px 10px;
}

div#Navigation ul li#FirstElement {
	background:none;
}

div#Navigation ul li a {
	color:#5c5c5c;
	font-variant:small-caps;
	font-family: 'SansationBold';
	font-size: 1.1em;
	text-decoration:none;
}

div#Navigation ul li a:hover {
	padding-bottom:3px;
	border-bottom: 3px solid #89bfff;
}

#Header {
	width: 100%;
	height: 204px;
	position: absolute;
	top: 98px;
	background-image: url(../Header.jpg);
	background-repeat: no-repeat;
}

#Header img {
	float: right;
	width: 490px;
	height: 204px;
}

#Header p {
	float: left;
	margin-left:25px;
	margin-top:105px;
	color: #a8a8a8;
	font-family: 'Calibri';
	font-size: 0.9em;
}


div#Content {
	position: absolute;
	border: solid 1px #CCC;
	top: 315px;
	left: 25px;
	padding-bottom: 100px;
}

div#Content div {
	width: 250px;

	padding-right:100px;
}

div#Content div h1 {
	color: #3a5c86;
	font-family: 'Calibri';
	font-size: 1.2em;
}

div#Content div p {
	color: #464646;
	font-family: 'Calibri';
	font-size: 0.9em;
}

div#Content img {
	padding: 5px;
	border: solid 1px #CCC;
	-moz-box-shadow: 1px 1px 5px #999;
	-webkit-box-shadow: 1px 1px 5px #999;
	box-shadow: 1px 1px 5px #999;
}


#Footer {
	width: 100%;
	height: 100px;
	position: absolute;
	bottom:0px;
	left: 0px;
	background: url(../BackgroundFooter.jpg) repeat-x;
}

So kann natürlich sein das im CSS Teil einige unnütze Formatierungen drinn sind habe schon einiges ausprobiert via Google.

Hoffe Ihr habt noch paar Ideen wie ich den Footer ganz unten Positioniere mir fällt derzeit keine Lösung mehr ein darum Poste ich ja auch hier :D

Gruß Funj0y
 

Anhänge

  • scebtt01.JPG
    scebtt01.JPG
    126,1 KB · Aufrufe: 16
  • scebtt02.JPG
    scebtt02.JPG
    64,7 KB · Aufrufe: 13
Zuletzt bearbeitet:
So nach einer kleinen Pause und einem vollen Magen habe ich mir das alles nochmal in Ruhe angeschaut und nach und nach den CSS Code Optimiert bzw. unnütziges Entfernt.

Mit Hilfe von Google und der Demo Seite habe ich es endlich geschafft das mein Design wie gewünscht dargestellt wird.

Für die Leute die ähnliche Probleme haben schaut euch meine CSS Datei an:
CSS:
@font-face {
	font-family:Calibri;
	src: url(../fonts/Calibri.eot);
	src: local('Calibri'), url('../fonts/Calibri.woff') format('woff'), url('../fonts/Calibri.ttf') format('truetype');

}

@font-face {
	font-family:SansationBold;
	src: url(../fonts/SansationBold.eot);
	src: local('SansationBold'), url('../fonts/SansationBold.woff') format('woff'), url('../fonts/SansationBold.ttf') format('truetype');

}

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


body {
	background-color: #ffffff;
	background: url(../BackgroundHeader.jpg) repeat-x;
	font-size: 100%;
}

div#Wrapper {
	position: relative;
	margin: 0 auto;
	
	width: 900px;
	min-height: 100%;
	
	background: url(../Header.jpg) no-repeat;
	background-position: left 98px;
}

* html #Wrapper {
		height: 100%;
}

div#Navigation {
	width: 100%;
	height: 98px;
	
	background: url(../logo.jpg) no-repeat;
	background-position: 25px center;
}

div#Navigation ul {
	float: right;
	margin: 0px;
}

div#Navigation ul li {
	float: left;
	background: url(../NavigationSeparator.jpg) no-repeat;
	background-position: left center;
	list-style-type: none;
	line-height: 98px;
	padding: 0px 10px 0px 10px;
}

div#Navigation ul li#FirstElement {
	background:none;
}

div#Navigation ul li a {
	color:#5c5c5c;
	font-variant:small-caps;
	font-family: 'SansationBold';
	font-size: 1.1em;
	text-decoration:none;
}

div#Navigation ul li a:hover {
	padding-bottom:3px;
	border-bottom: 3px solid #89bfff;
}

#Header {
	width: 900px;
	height: 204px;
}

#Header p {
	float: left;
	margin-left:25px;
	margin-top:105px;
	color: #a8a8a8;
	font-family: 'Calibri';
	font-size: 0.9em;
}


div#Content {
	margin-left:25px;
	margin-top:25px;
	padding-bottom: 5px;
}

div#Content div {
	width: 250px;
	padding-right:100px;
}

div#Content div h1 {
	color: #3a5c86;
	font-family: 'Calibri';
	font-size: 1.2em;
}

div#Content div p {
	color: #464646;
	font-family: 'Calibri';
	font-size: 0.9em;
}

div#Content img {
	padding: 5px;
	border: solid 1px #CCC;
	-moz-box-shadow: 1px 1px 5px #999;
	-webkit-box-shadow: 1px 1px 5px #999;
	box-shadow: 1px 1px 5px #999;
}


#Footer {
	position: static;
	width: 100%;
	line-height: 100px;
	background: url(../BackgroundFooter.jpg) repeat-x;
}

Vom Prinzip habe ich den Wrapper auf "position: relative;" umgestellt und eine andere Methode zum Zentrieren genommen, und den Footer habe ich auf "position: static;" gesetzt und siehe da der Footer hängt jetzt wie gewünscht unten ;-)

Gruß Funj0y
 
Hallo,

der WRAPPER-Block hat (oder hatte?) in deinem (ersten) gepostetem HTML-Quelltext kein End-Tag.
Am besten zeigst du das mal einem Validator.
 
Zuletzt bearbeitet:
Moin, Danke doch hat er, aber wo ich den HTML Code geposted hatte, hatte ich den größten Content rausgelöscht das die HTML Datei übersichtlich bleibt für euch ;)

Und dabei hatte ich ausversehen "</div>" mit entfernt.

Edit: Habs oben angepasst

Gruß Funj0y
 
Zuletzt bearbeitet:
Zurück