CSS: Brauche Hilfe beim Footer

junky · 23. Juni 2012 um 19:26

Hi,

ich versuche einen Footer in CSS zu erstellen, der ganz am Ende der Seite ist. Er soll nicht mitscrollen sondern soll einfach nur am Ende der Seite sein. Wenn wir jetzt z.B. nen Bildschirm mit ner Höhe von 1080px haben, wird der Footer nicht am Ende der Seite angezeigt, sondern nach dem Wrapper. Gibt es dafür eine Möglichkeit? Ich habe bis jetzt noch keine Lösung gefunden…

#footer { float: bottom; text-align: center; color: #F5F5F5; padding: 15px 0 15px 0; position:relative; background: #6E6E6E url(images/img04-2.png) top left repeat; width: 100%; }

hummer · 23. Juni 2012 um 19:37

Für float gibt es keinen Wert ‘bottom’.
Du suchst position: fixed.
Beispiel:

#footer {
 /* fixed to bottom */
 position: fixed;
 bottom: 0;
 left: 0;

 text-align: center;
 color: #F5F5F5;
 padding: 15px 0;
 position:relative;
 background: #6E6E6E url(images/img04-2.png) top left repeat;
 width: 100%;
}

Evtl. musst du dem „Content-Bereich“ noch einen unteren Außenabstand der Höhe des Footers geben, damit er nicht durch ihn verdeckt wird.

Mohyra · 23. Juni 2012 um 19:45

Grundsätzlich ist es immer hilfreich, das ganze im Kontext zu sehen, sprich ein Link zu der entsprechenden Seite mit dem Problem wäre angebracht.
Dann gibt es für float keine Anweisung bottom, sondern nur left, right und both. Da wäre es sicher angebracht, sich nochmal schlau zu machen: css4you.de/

Was genau meinst du damit, daß der Footer immer am Ende der Seite angezeigt werden soll und nicht mitscrollen soll? Daß er immer sichtbar ist und am unteren Ende des Browserfensters klebt und der Inhaltsbereich nur gescrollt werden kann? Dann mußt du den Footer über den Wrapper legen. Wenn nicht, solltest du deine Problembeschreibung verbessern

junky · 23. Juni 2012 um 19:59

Das mit dem “float: bottom;” ist mir jetzt peinlich^^ Ich hatte vorhin einfach alles probiert was ich so aus anderen Sprachen ableiten konnte

Ich beschreibe das ganze nochmal ausführlicher:
Der Wrapper hat “margin-bottom: 40px” sodass der footer darunter eben 40px weiter unten liegt. Der Footer soll auch am Ende der Seite sein, jedoch nicht umbedingt am Ende der Seite. WENN die Seite scrollbar ist, soll der Footer 40px weiter unten sein. Aber wenn die Seite NICHT scrollbar ist, soll sich der Footer ganz unten an den Rand (also über der taskleiste praktisch) anzeigen. In beiden Fällen liegt der Footer direkt “über” der Taskleiste. Im zweiten fall ist dann natürlich der abstand zwischen dem wrapper und dem footer >=40px.

Ich hoffe ich habs ein wenig verständlicher formuliert. habe die seite leider nicht hochgeladen und kann euch deswegen keinen link schicken. hab noch probleme mit meiner domain…

chrisb · 23. Juni 2012 um 20:16

Nöö, für float gibt’s nur left oder right. Was du meinst, ist clear …

junky · 23. Juni 2012 um 20:42

Dass ihr seht was ich meine hab ich mal 3 Screenshots mit Beschreibung gemacht: dennisgallery.bplaced.net/footer.html

Der Beitrag vor mir hat mir auch nicht wirklich geholfen…

Vielleicht hilft dass noch: Der footer soll mindestens x>=40px vom wrapper entfernt sein. Größer nur dann, wenn die seite nicht scrollbar ist.

Camou · 23. Juni 2012 um 21:16

Hallo junky

Google mal nach sticky footer?
Das sollte das sein was du suchst!

Gruß
Camou

junky · 24. Juni 2012 um 10:18

Jop, das ists. Leider hab ich das mit meiner seite noch nicht gebacken gekriegt… irgendwann klappts. danke

Mohyra · 24. Juni 2012 um 11:38

@chrisb: stümmt. hab ich durcheinander gebracht.

@junky: soweit ich mich erinnere, war da was mit negativem margin. aber wie genau das war, kann ich nicht mehr sagen, weil ichs dann bei meiner seite aufgegeben hatte, weiter zu probieren. ich glaube, das hier könnte es sein: tutorials.de/webmaster-faq/3 … chten.html

chrisb · 24. Juni 2012 um 12:33

Hier mal ein minimales Beispiel:

[code]

Footer am Seitenende html, body { margin:0; padding:0; /* wichtig, sonst ergeben (min-)height von 100% mehr als Bildschirmhöhe */ } html { height:100%; } body { position:relative; min-height:100%; /* position:relative, damit #footer absolut daran ausgerichtet werden kann */ } #container { padding-bottom:75px; width:700px; margin:auto; /* zusätzliches container-Element erforderlich, weil padding-bottom nicht dem body gegeben werden kann, s.o. */ } #content { border:1px solid red; } #footer { position:absolute; bottom:0; left:0; width:100%; background:red; /* footer wird absolut unten am body positioniert */ }

Lorem ipsum, dolor sit …

Ich bin der Footer.

[/code]

Das funktioniert nur, wenn die Höhe des Footers nicht zu groß wird – sonst wird es, wegen der absoluten Positionierung, zu Überlagerungen mit dem Content kommen. Deshalb das padding-bottom des Container-Elements auf geschätzte Footer-Höhe plus großzügiges X setzen. Wenn die Anzahl der Textzeilen im Footer absehbar ist und damit seine Höhe abhängig von der Schriftgröße sein wird, empfiehlt es sich ggf. auch, das padding-bottom in em anzugeben.