Hallo,
erstmal danke ja sieht so aus als ob dies das problem lösen würde.
Jedoch immer noch unverständlich für mich da im Tutorial von "Html - Semniar" ebenso "position: absolute;" verwendet wird.
Link dazu:
https://www.html-seminar.de/sticky-footer-…-ganz-unten.htm
Greetz
shy
Hi Leute,
ich habe ein Problem und zwar folgendes, ich habe versucht die Seite "1 Spalten Layout" von hier nach zu bauen
und dabei probiert die Aufgabe mit dem "Footer" selbst lösen probiert.
Soweit lief alles gut jedoch wird mit der Footer nicht am Ende der Seite angezeigt sondern noch weiter unten.
Sprich ich musst erst hinunter scrollen bevor ich den Footer sehe anstatt ihn am ende des Bildschirms.
Hier mein Quellcode:
<!DOCTYPE html><html lang="de">
<head>
<title>Page</title>
<meta charset="UTF-8">
<style type="text/css"><!--
html, body { height: 100%; font: 100% Arial, helvetica, sans-serif;}
#kopf {background:url(logo.jpg) no-repeat top left; height: 150px;}
#kopf p { color: white; text-align: right; font-size: 15pt; padding: 0.4em 0.4em 0 0;}
#navi { background-color: #B5DAF9; padding-left: 1em;}
#schatten { background:url(schatten.png) repeat-x; height: 12px;}
#schatten1 { background:url(schatten.png) repeat-x; height: 12px;}
#inhalt { padding-left: 2em; padding-bottom: 2em;}
* { margin: 0; padding: 0;}
#inhalt h1, h2, h3, p, ul { padding-bottom:.7em;}
#inhalt ul { padding-left:2em;}
#footer { background-color: #B5DAF9; padding-left: 1em; position:absolute; bottom: 0px; width: 100%; height: 2em; line-height: 2em;}
#seite { position: relative; min-height: 100%; width: 100%; margin: 0 auto;}
--></style></head>
<body>
<div id="kopf"><p>Dies wird mein Kopfbereich</p></div>
<div id="navi">Hier kommt die Navigation hin</div>
<div id="schatten"></div>
<div id="seite"> <div id="inhalt"> <h1>Willkommen zur Beispielwebsite</h1>
<p>Diese Website gliedert sich in 4 Bereich</p>
<ul> <li>Kopfzeile: <a href="../bilder/hg-saeulen-img-9599.jpg">Hintergrundbild-Download</a></li> <li>Zeile Steuerung: Hintergrundfarbe ist #ceb98e</li> <li>Übergang mit Schattenwurf: <a href="../bilder/schattenwurf-grau-v.png">Download Schattenwurf</a></li> <li>Inhaltsbereich</li> </ul>
<p>Um die verschiedenen Bereich beim Entwickeln am besten Rahmen ziehen, damit sofort erkennbar ist, wo welcher DIV sitzt :)</p>
<p>zurück zum <a href="http://www.html-seminar.de/pro_css.htm">HTML-Seminar</a></p></div>
<div id="footer">copyright by shycane</div></div><div id="schatten1"></div>
</body>
</html>Ich hoffe ihr könnt mir helfen und mir meinen Fehler aufzeigen.
LG
shycane