Footer am Boden fixieren with CSS

Computer: Software & Programmierung HTML & CSS
#1

Hallo,
ich habe gerade angefangen meine Website umzugestalten und google mir gerade die Finger wund! Mein Problem ist nehmlich…ich wollte denn Footer Container am unteren Rand fixieren so dass die eigentlich Website hinter diesem Container verschwindet wenn man scrolt! Aber iwi klappt das nicht mit den Befehlen die ich benutze bzw. die mir bekannt sind. Nun wollte ich euch fragen ob ihr mir helfen könnt?!
Würde mich freuen!
Hier die Website: http://bastid.renfud.eu

Mit freundlichen Grüßen,
Bastian D.

#2

Versuche mal den footer mit position:fixed; bottom:-50px; zu formatieren, wobei die Zahl 50 von mir willkürlich gewählt wurde.

#3

So könnte es funktionieren. Wäre eine Möglichkeit:

#footer_path {
width: 100%;
height: 100px;
background: none repeat scroll 0% 0% rgb(128, 128, 128);
position: fixed;
left: 0px;
top: 600px;
opacity: 0.6;
}

#4

versuch es mal mit display block.
andere möglichkeit wäre iframe.
auf alle fälle würde ich mal den quellcode aufräumen, soll ja auch schon helfen.

gruß lo

#5

Hallo Bastian,

wenn ich es richtig heraus lese, dann ist der Footer bereits ein DIV-Container. Dem gibst Du dann z.B. folgende CSS-Eigenschaften mit:

div#footer {
 position: fixed;
 bottom: 0px;
 /\* usw. \*/
 }

Aber achte auf die HTML-Struktur; es kommt darauf an, in welchem Block und dort in welcher Reihenfolge das div#footer vorkommt. –

Sehr gute, detailierte Beschreibung bei: http://jendryschik.de/wsdev/einfuehrung/eigenschafte… (siehe v.a. die Abschnitte Absolute Positionierung: absolut und Feste Positionierung: fixed.)

HTH
CU, DF

#6

Hallo Bastian,

position: fixed
ist richtig, aber du musst dem div mit der ID „footer_path“, der in der Webseite ja schon drinsteckt zu Testzwecken, noch sagen, wo er denn nun fixiert sein soll. Dafür kann man Abstands-Angaben zu top, left, rght, bottom machen. Um den Footer ganz unten zu fixieren:
bottom: 0;

Gruß
Thomas

#7

Hallo Bastian,

ich verwende div und folgendes CSS:

#footer
{
 margin: 0px 0px 0px 0px; /\*Aussenabstand\*/
 padding: 5px 5px 5px 5px; /\*Innenabstand\*/
 border: 0px; /\*Rahmen =\> keiner, da 0px\*/
 position: fixed; /\*Position immer gleich\*/
 top: auto; /\* von oben automatisch weit weg \*/ 
 left: 2px;
 right: 2px;
 bottom: 1px; /\* 1px abstand zum Rand unten \*/


 background-color: black;
 height: 20px;
 z-index: 20; /\* je größer die Zahl, desto höher liegt es\*/
}

#page
{
 margin: 50px 10px 10px 10px;
 margin: 50px 10px 10px 10px;
 padding: 5px 5px 5px 5px;
 border: 0px;
 position: absolute;
 top: 100px;
 left: 315px;
 right: 0px;
 bottom: 10px;
 z-index: 1;

}

Viele Grüße
Kai

#8

Hallo,

hier ist eine gute Beschreibung für einen Sticky Footer. Den benutze ich immer. http://www.html-seminar.de/sticky-footer-fussleiste-…

Ich hoffe, ich konnte helfen.

Gruß, Renate

#9

ein Artikel wie es geht…
http://filamentgroup.com/lab/a_different_approach_to…

Gruß
Timo

#10

Danke :smile: Du hast mir sehr weiter geholfen

#11

Hallo Bastian,

war eben auf deinem link und so wie es ausschaut, ist dein Problem bereits gelöst !

Info:

  1. html div das fixiert werden soll als letztes im html Quellcode einfügen

  2. css position:fixed http://de.selfhtml.org/css/eigenschaften/positionier…

  3. css z-index http://de.selfhtml.org/css/eigenschaften/positionier…

Cu Stefan

#12

So wie ich das sehe, ist der Footer bereits so, dass die Webseite beim Scrollen dahinter verschwindet. Zumindest mit Firefox, Internet Explorer, Chrome und Opera.

#13

Scheint ja bereits zu klappen oder wolltest du es noch anders haben?

#14

scheinbar hast du es doch geschafft! Bravo! :smile: