Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Footer am Seitenende positionieren“

gosunnycat

Nicht mehr ganz neu hier

Ich habe noch ein kleines Positionierungsproblem. Mein Footer muss immer am Ende der Seite sein. Das heißt bei wenig Text an der unteren Browserkante. Bei viel Text einfach nach dem Text.

Es geht konkret um folgende Webseite:

http://www.tauchschule-szagunn.de/

Bis jetzt habe ich es wie folgt gelöst

#footer {
width: 100%;
background-color: #212c33;
clear: both;
text-align:center;
padding: 10px 0 10px 0;
}

Den Content habe ich mit min-height: 100%; gemacht aber es funktioniert nicht! Der Content nimmt nicht den Raum ein den es bei wenig Text könnte sodass der Footer in der Luft schwebt.
 

stb_87

Web-Sheriff - ohne Bild

AW: Footer am Seitenende positionieren

Versuch es mal mit bottom: 0px;

Ggf. auch absolut positionieren. Der Nachteil ist halt dabei, wenn der Inhalt größer ist, dass sich dann die Ebenen überlappen.
 
S

serverhombre

Guest

AW: Footer am Seitenende positionieren

Hallo,
so ein kleines Beispiel vom mir (xhtml/css kein JS ;) ):


Im Quelltext stehen alle wichtigen angaben, bei Fragen bitte nochmal melden.

Ich hoffe das hilft weiter. :rolleyes:
 

gosunnycat

Nicht mehr ganz neu hier

AW: Footer am Seitenende positionieren

@stb_87 nein bottom: 0px ist keine Lösung. Der Footer würde beim Scrollen über den Content hängen und das geht ja mal gar nicht.
@sobi35 mit JavaScript kenn ich mich leider fast überhaupt nicht aus ich versuch mich mal in deine Antwort reinzufitzen
@serverhombre ah deine Antwort ist vielversprechend ich habe meinen Code mal wie folgt abgeändert:
Code:
html,body {																				
height:100%;
margin:0;
padding:0;
text-align:center;
}

* html #layout {
     height: 100%;
}
#footer {
	width: 100%;
	background-color: #212c33;
	clear: both;
    text-align:center;
	padding: 10px 0 10px 0;
}
Aber wenn ihr jetzt auf der Webseite schaut ist der Footer immer außerhalb des sichtbaren ??? wie muss ich es coden? Ich bin mir jetzt auch nicht sicher was ich mit dem folgenden Code bezwecke?
Code:
* html #layout {
     height: 100%;
}
html,body {																				
height:100%;
}
 
S

serverhombre

Guest

AW: Footer am Seitenende positionieren

So dann will ich das Rätsel mal auflösen ;).

so fangen wir mit dem (x)html Teil an:
HTML:
<div id="layout">

<h1>Inhalt</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas nibh quam, luctus.</p>

</div>

<div id="footer">Footer immer unten</div>

zuerst wird ein div mit der id="layout" definiert in diesem ist der Inhalt oder halt weitere divs,p,span, h1 was auch immer....

Nun kommt der Footer div id="footer" wichtig dabei ist das der footer sich unter dem layout div befindet also hinter </div> des layout-containers.


so nun zum css-Teil:
Code:
html,body {																				
height:100%;
margin:0;
padding:0;
font-size:100.01%;
text-align:center;
}

* html #layout {
     height: 100%;
}


#layout {
min-height:100%;
height:auto;
width:60em;
margin:0 auto;
text-align:left;
}

#layout h1,p {
padding:1.5em 0.5em;
width:45em;
margin:0 auto;
font-size:0.95em;
}


#footer {
margin:-20px auto;
padding:0;
line-height:20px;
font-size:0.95em;
background:#ccc;
}

zuerst wird dem html,body eine höhe von 100% verpasst, kurz damit der Browser weis was auf ihn zukommt, also eine höhe von 100%. margin/pedding:0; text-align:center; für IE 5 zentrierung usw.....

weil der IE 5/6 probleme mit min-heigth:100%; hat wird mit dieser angabe dem layout div ne höhe von 100% gegeben:

* html #layout {
height: 100%;
}

im #layout kommen dann noch min-height:100%; height:auto; hinein.
so nun hat fast jeder Browser mitbekommen das er 100% der Fenstergröße für den Layout- div nehmen muss. :hmpf:

so nun kommt der footer der sich ja unter dem layout div befindet,und ein höhe z.B. 100px hat, dadurch entsteht ein Scrollbalken bzw. der Footer wird nicht im sichtbereich angezeigt. Das ist aber gewollt denn der Layout-div hat ja schon ne höhe von 100% bekommen also von der darstellung ist alles ok.

so nun bekommt der Footer einfach einen margin: - höhe des footers; durch diesen Negativen margin wird der footer von unten nach oben gezogen also z.B. margin:-100px 0; um die 100px die er hoch ist, nun klebt er am unteren Ende der Seite und der Scrollbalken ist dank des -margin auch weg. :p

so ich hoffe das ist verständlich genug.
 

dusticelli

Noch nicht viel geschrieben

Hallo Community,

ich würde gerne diesen Thread nochmal nach oben schieben, weil ich das gleiche Problem mit diesem Ansatz lösen wollte, aber es noch nicht zufriedenstellend gelöst ist.

Die hier beschriebene Methode entspricht ja in etwa der Methode "Footer stick alt" die hier dank der Erklärungen von serverhombre auch für mich (da im Original englisch) vollumfänglich verstanden ist.

Ich habe es also so nach Anleitung gemacht, und mein Layout in einen Wrap namens #layout gepackt und den Footer nun darunter.

Das Problem ist nun, dass der IE Explorer (8) bei mir alles wie gewünscht anzeigt, aber die Kollegen FF, Chrome oder Opera machen etwas was noch nicht nach Vorstellung läuft.

In allen 3 Browsern wird bei Seiten die länger sind als die Browserfenster-Höhe der Footer direkt an den untersten Inhalt des #layout divs gepappt.

Egal was ich auch probiere (Margin, Padding extra druntergepacktes Div mit entsprechender Höhe), es klappt nicht. Entweder der Seiteninhalt verschiebt sich irgendwie oder Footer und Layout bleiben aneinander gepappt.

Kann vielleicht irgendjemand eine Hilfestellung geben?

Zu sehen ist das ganze hier:

Bitte zunächst mit diesem Link das entsprechende Layout aufrufen:

Willkommen &bull; SENANA
(dient auch als Beispiel für Lange Seite)

und dann vielleicht dieses Beispiel für kürzere Seiten


Ich möchte gerne zwischen der Box #contact-wrapper
und dem #footer einen Abstand von 20px haben.

Kann jemand helfen?
Nachtrag: Der IE pappt die beiden auch zusammen. Hatte wohl im Cache festgehangen..
 
Zuletzt bearbeitet von einem Moderator:

dusticelli

Noch nicht viel geschrieben

AW: Footer am Seitenende positionieren

Hallo Manfred,

Vielen Dank für die schnelle Hilfe. Cool! :)

Bei diesen Lösungen dürfen imho keine vertikalen margins verwendet werden

Das wäre ja für mich der Supergau. Müsste ja den ganzen Code überarbeiten. Zumindest aber hat dein Verweis auf die sticky footer Seite mich auf einen anderen Fehler aufmerksam gemacht. mir fehlte in dem Main-Bereich ( bei mir #layout) noch das entsprechende padding-bottom mit Höhenanagbe des Footers.

Jetzt siehts schon besser aus, aber der in den known issues erwähnte Effekt tritt tatsächlich auf. Die Seiten mit wenig Inhalt sind länger als das Browserfenster.

hm, gibt es noch eine andere Möglichkeit als Margins durch Paddings u ersetzen?

thx

Gruß aus Köln

Dusticelli
 

Manfred62

Nicht mehr ganz neu hier

AW: Footer am Seitenende positionieren

Das wäre ja für mich der Supergau. Müsste ja den ganzen Code überarbeiten......
hm, gibt es noch eine andere Möglichkeit als Margins durch Paddings u ersetzen?
Nein, man kann nur padding und/oder border nehmen. StickyFooter Varianten kann man i.d.R. nicht einfach per copy+paste in ein fertiges Layout packen, sondern plant dies bereits beim Aufbau mit ein.
BTW: wozu brauchst das? Selbst die "kurze" Seite hatte doch beinahe schon 1000px? Verteil einfach den Inhalt etwas grosszügiger.

Manfred
 

jackprince

xHTML & CSS Junkie

AW: Footer am Seitenende positionieren

Ich hatte da vor Ewigkeiten mal was in meinem "verwaisten" block gepostet.
Vielleicht hilft das ja auch (hab den Thread nur kurz überflogen).
 

dusticelli

Noch nicht viel geschrieben

AW: Footer am Seitenende positionieren

Moin,

StickyFooter Varianten kann man i.d.R. nicht einfach per copy+paste in ein fertiges Layout packen, sondern plant dies bereits beim Aufbau mit ein.

Das sehe ich nun auch ein. Ich bin natürlich kein Webdesigner oder so, sondern habe mir alles aus Interesse selbst beigebracht. Autodidakt, sozusagen. Für mein nächstes Projekt werde ich diesen Umstand also berücksichtigen ;)

Das die kurze Seite bereits jetzt so hoch ist, verdanke ich wohl dem Umstand, dass die Margins im Content den Footer weiter nach unten drücken. Ausserdem ist die Seite ja ein Shop/Content Managament System, und ich weiss noch nicht was da so alles noch an Inhalt kommt.

Verteil einfach den Inhalt etwas grosszügiger.

Letztendlich wäre das dann der Wörgaround. Aber gestern Abend habe ich noch bemerkt, dass in den Known Issues nur von horizontalen Margins die Rede war. du hattest aber von verttikalen Margins geschrieben.

Sollte es tatsächlich nur um horizintale Margins gehen, könnte ich es doch mit einer Überarbeitung mal versuchen. Denn ich glaube da habe ich nicht soo viele Baustellen, sondern nur ein paar Container.

Kann es sein dass Du Dich nur vertippt/vertan hattest oder weißt Du sicher, dass die vertikalen Margins auch Probleme machen?

Danke noch mal für Deine Mithilfe.

Gruß
dusticelli
 

dusticelli

Noch nicht viel geschrieben

AW: Footer am Seitenende positionieren

@jackprince

Danke für den Tip. Die Variante mit dem .push div (Ryan Fait) habe ich gestern auch noch irgendwo gefunden. Man könnte man versuchen, ob da die Margins auch stören.

Grundsätzlich vermute ich mal, dass das Problem das selbe bleiben wird, weil der Lösungsansatz ja wie Du auch schreibst, der gleiche ist.

Mache jetzt mal einen Versuch, bei einer Seite mit wenig Content, ob es sich verändert, wenn ich die horizontalen Margins rausnehme...
 

dusticelli

Noch nicht viel geschrieben

AW: Footer am Seitenende positionieren

Es scheint zu klappen. Wenn man die horizontalen Margins rausnimmt, dann sieht es so aus, wie gewünscht.

Zu sehen hier:




Auf dieser Seite habe ich dann alle horizontalen Margins entfernt.
Allerdings, spielen Opera und Chrome nicht ganz mit. Beide liefern noch ein kleines bisschen Übergröße der Seite, es erscheint also ein Scrollbalken.

Hat jemand eine Idee, woran das nun wieder liegen könnte?

Vielen Dank schonmal.
 

Manfred62

Nicht mehr ganz neu hier

AW: Footer am Seitenende positionieren

Letztendlich wäre das dann der Wörgaround. Aber gestern Abend habe ich noch bemerkt, dass in den Known Issues nur von horizontalen Margins die Rede war. du hattest aber von verttikalen Margins geschrieben.
Gemeint sind margin-top und margin-bottom.
In den "Known Issues" steht dies auch so, nicht horizontal.
Erklärung für vertikal

Gruß Manfred
 
Zuletzt bearbeitet:

dusticelli

Noch nicht viel geschrieben

AW: Footer am Seitenende positionieren

@all,

so, habs jetzt laufen. Die horizontalen Margins habe ich raus genommen. Zudem fehlte mir wohl noch ein wrapper, dem man per "padding-bottom" die Höhe des Footers zuweist.

Für alle die mit selben Problem hier landen, hier nochmal der Link zu der von Manfred erwähnten sehr guten Erklärung, aber in deutsch:

CSS Sticky Footer

Vielen Dank an alle!
 
B

Bleccer

Guest

AW: Footer am Seitenende positionieren

Die größe vom content auf 100% setzen so passt sich die Box dem Inhalt nach an
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.158
Beiträge
2.581.880
Mitglieder
67.226
Neuestes Mitglied
Alec168
Oben