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:
So dazu die style.css Datei:
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
Gruß Funj0y
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ästebuch</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Anmelden</a></li>
</ul>
</div>
<div id="Header">
<p>Spielort: Hermsdorfer Straße 27 • 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. 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
Gruß Funj0y
Anhänge
Zuletzt bearbeitet:
