Problem bei der "Footer Fixierung" über #footer_wrapper

[Daste]

Hallo zusammen,
ich bin neu in Sachen JTL-Tempalte und habe ein Problem bei der Fixierung des Footers.

Ich habe jetzt hinbekommen den Footer auf allen Seiten am unteren Bildschirmrand zu fixieren, per CSS:

#footer_wrapper {

    bottom: 0px;
    width: 100%;
    text-align: center;
    background-color: #fbfbfb;
    clear: both;
    height: 280px;
    background: url("images/footer.jpg") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
}

Das ganze funktioniert und der Footer wird auf jeder Seite ganz unten am Bildschirmrand fixiert.

Das Problem:
Jetzt werden die Sachen aus der mittleren Ebene, da wo die Produktanzeige ist etc., Teilweise im Footer angezeigt, weil dieser sich nicht mit nach unten scrollt.

Habt ihr einen Tipp, wie ich das lösen kann?

 

[martinwolf]

AW: Problem bei der "Footer Fixierung" über #footer_wrapper

Dem mittleren Bereich ein padding-bottom in mindestens der Höhe des Footers geben.

 

[reddwarf]

AW: Problem bei der "Footer Fixierung" über #footer_wrapper

Nein, das kann nicht klappen. Spätestens bei einer Produktliste ist diese ja länger als der Monitor hoch ist.
Das greift kein Padding.
Du willst sicher, dass die Liste dann hinter dem Footer gescrollt wird. Das machst du über den z-Index.

Gruss Mario

 

[martinwolf]

AW: Problem bei der "Footer Fixierung" über #footer_wrapper

Nein, das kann nicht klappen. Spätestens bei einer Produktliste ist diese ja länger als der Monitor hoch ist.
Das greift kein Padding.
Du willst sicher, dass die Liste dann hinter dem Footer gescrollt wird. Das machst du über den z-Index.

Gruss Mario

Die Aussage dieses Postings habe ich jetzt nicht verstanden, aber natürlich kann das klappen.

Beispiel Aufbau Tiny Template:

<div id="outer_wrapper">
   <div id="page_wrapper">...</div>
</div>
<div id="footer_wrapper">...</div>

#page_wrapper {
    padding-bottom: 300px;
}

#footer_wrapper {
    background: #FFFFFF;
    bottom: 0;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 1;
}

 

[reddwarf]

AW: Problem bei der "Footer Fixierung" über #footer_wrapper

Na da haben wir ja den z-Index.
Ein Padding ist der Innenabstand vom Inhalt zum Div-Rand.
Das alleine löst das Problem nicht, weil der Inhalt ja schon länger sein kann, als der Monitor hoch ist.
Deshalb muss man den Footer mittels z-Index noch in den Vordergrund rücken.

Jetzt verstanden?

Gruss Mario

 

[martinwolf]

AW: Problem bei der "Footer Fixierung" über #footer_wrapper

Ja, aber mit nur dem Z-Index würde der Inhalt vom Footer überdeckt, daher muss ein Padding mit angegeben werden um den Inhalt in seiner Höhe soweit auszudehnen, dass dieser komplett angezeigt wird.

 

[reddwarf]

AW: Problem bei der "Footer Fixierung" über #footer_wrapper

Richtig! z-Index und Padding. Die Aussage war ja "im Footer sichtbar". Das klang eher nach fehlendem z-Index.

 

[Daste]

AW: Problem bei der "Footer Fixierung" über #footer_wrapper

Vielen Dank euch beiden. Das mit dem Z-Index hat geklappt, der "mittelere Inhalt" wird jetzt hinter dem Footer gescrollt.

Vielleicht hab ich mich ein bisschen blöd ausgedrück, aber ich habe es anderes gemeint.

Und zwar:
Der Footer soll immer ganz unten am Bildschirmrand sein. Die Daten sollen aber nicht hinter dem Footer gescrollt werden sondern der Footer soll mit runter gehen.

Ist-Zustand:
Wenn der mittlere Bereich jetzt nicht "so stark befüllt" ist, zieht es mir den Footer immer nach oben und unten sieht man dann weiße Fläche, da wo die Footer-Grafik zu ende ist.
Wenn der mittlere Bereich aber "stärker befüllt ist" so das mehr angezeigt wird, dann ist der Footer automatisch ganz unten und man sieht nichts weißes.

Soll-Zustand:
Der Footer soll aber auch wenn der mittlere Bereich "nicht so stark" befüllt ist ganz unten sein.


Ich hoffe ich konnte es einigermaßen beschreiben was ich meine und es ist verständlich.

 

[martinwolf]

AW: Problem bei der "Footer Fixierung" über #footer_wrapper

Dann musst du für den mittleren Bereich eine min-height setzen.

 

[casim]

AW: Problem bei der "Footer Fixierung" über #footer_wrapper

eine min-height setzen.

wobei sich dann die Frage stellt, woran willst du die min-height fest machen

es gibt x Auflösungen mit unterschiedlicher Höhe

 

[Daste]

AW: Problem bei der "Footer Fixierung" über #footer_wrapper

Ich habe gerade noch ein wenig rumprobiert und habe es hinbekommen und zwar mit "position: relative;"

Jetzt sieht der Code wie folgt aus:

#footer_wrapper {
    position: relative;
    bottom: 0px;
    width: 100%;
    text-align: center;
    background-color: #fbfbfb;
    clear: both;
    height: 280px;
    background: url("images/footer.jpg") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
}

 

[martinwolf]

AW: Problem bei der "Footer Fixierung" über #footer_wrapper

wobei sich dann die Frage stellt, woran willst du die min-height fest machen

es gibt x Auflösungen mit unterschiedlicher Höhe

Naja, X-Auflösungen ist vielleicht übertrieben, es würde reichen die wesentlichen Viewports zu berücksichtigen. Das sind nicht mal eine Hand voll.

 

[martinwolf]

AW: Problem bei der "Footer Fixierung" über #footer_wrapper

Ich habe gerade noch ein wenig rumprobiert und habe es hinbekommen und zwar mit "position: relative;"

Jetzt sieht der Code wie folgt aus:

#footer_wrapper {
    position: relative;
    bottom: 0px;
    width: 100%;
    text-align: center;
    background-color: #fbfbfb;
    clear: both;
    height: 280px;
    background: url("http://forum.jtl-software.de/images/footer.jpg") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
}

Und bleibt dann der Footer beim Scrollen noch unten, egal wieviel Content zu sehen ist?

 

[Daste]

AW: Problem bei der "Footer Fixierung" über #footer_wrapper

Guten morgen,
ich weiß nicht was ich da gestern abend noch gesehen habe, aber heute früh hab ich auf der Arbeit noch mal schnell auf die Seite geschaut,
und der Footer hängt doch wieder in der Luft.

Das Problem besteht also immernoch.

Das mit der min-height und den vielen verschiedenen Auflösungen, sehe ich genauso.

Gibt es doch noch eine andere Möglichkeit, Idee?

 

[martinwolf]

AW: Problem bei der "Footer Fixierung" über #footer_wrapper

Guten morgen,
ich weiß nicht was ich da gestern abend noch gesehen habe, aber heute früh hab ich auf der Arbeit noch mal schnell auf die Seite geschaut,
und der Footer hängt doch wieder in der Luft.

Das Problem besteht also immernoch.

Das mit der min-height und den vielen verschiedenen Auflösungen, sehe ich genauso.

Gibt es doch noch eine andere Möglichkeit, Idee?

Das Problem ist dein Position relativ. Arbeite mit fixed dann sitzt der Footer immer unten, egal welche Auflösung der Bildschirm bietet!
Am besten gibst du uns mal einen Link zum SHop, sofern der online zu sehen ist, da ich befürchte dass wir aneinander vorbeireden.

PS: "Ist-Zustand:
Wenn der mittlere Bereich jetzt nicht "so stark befüllt" ist, zieht es mir den Footer immer nach oben und unten sieht man dann weiße Fläche, da wo die Footer-Grafik zu ende ist.
Wenn der mittlere Bereich aber "stärker befüllt ist" so das mehr angezeigt wird, dann ist der Footer automatisch ganz unten und man sieht nichts weißes."

Dieses Verhalten darf unter Verwendung von position: fixed garnicht auftreten! Da muss deine Deklaration fehlerhaft sein.

 

[Daste]

AW: Problem bei der "Footer Fixierung" über #footer_wrapper

@martinwolf: Wenn "position:fixed" eingestellt ist, dann ist der Footer auch fest am unteren Bildschirmrand angeordnet. Im Moment ist noch "position:relative" eingestellt.

Die Adresse zum Onlineshop ist:
schreinerladen-stegmann.de/start

Im Moment noch auf relative, heute Abend kann ich es dann auf fixed umändern.

 

[martinwolf]

AW: Problem bei der "Footer Fixierung" über #footer_wrapper

#page_wrapper {
    [COLOR=#ff0000][B]padding-bottom: 300px;[/B][/COLOR]
}
#footer_wrapper {
    background: url("http://forum.jtl-software.de/images/footer.jpg") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
[COLOR=#ff0000][B]    bottom: 0;[/B][/COLOR]
    clear: both;
    height: 280px;
[COLOR=#ff0000][B]    left: 0;
    position: fixed;[/B][/COLOR]
    text-align: center;
    width: 100%;
[COLOR=#ff0000][B]    z-index: 1;[/B][/COLOR]
}

 

[Daste]

AW: Problem bei der "Footer Fixierung" über #footer_wrapper

So bleibt der Footer jetz fest und der Inhalt verschwindet wieder dahinert.

Nich das wir aneinander vorbeidenken, ich würde es gerne wie auf dieser Seite haben:
Shop für E-Zigaretten - Ego-T, Ego-C, 510-T, e-liquid, Joyetech

Ich würde den Footer immer ganz unten haben auf der anezeigten Seite, nicht auf dem Bildschirm.

Da ist der Footer immer ganz unten auf der Seite, man muss scrollen.

Wenn ich auf meiner Seite mehr Inhalt im mittleren Bereich habe, ist der Footer auch ganz unten, aber sobald ich nicht mehr soviel Inhalt im mittleren Bereich
habe, dann schwebt der Footer unten in der Luft bzw. unter dem Footer ist noch "weißer Platz".

 

[reddwarf]

AW: Problem bei der "Footer Fixierung" über #footer_wrapper

Da haben wir offenbar wirklich komplett aneinander vorbei geredet.
Was passiert denn ohne das ganze Positioniere, wenn du einfach die height vom content auf 100% oder auf 1000px setzt?
Dann sollte sich die Seite anpassen, bzw. sollte der Content immer lange genug sein, dass der Footer nicht hoch rutscht.

 

[Daste]

AW: Problem bei der "Footer Fixierung" über #footer_wrapper

Wenn ich height vom content auf 100% setzte, dann zieht es mir den Footer noch weiter hoch.

Wenn ich ihn auf 1000px setzte dann ist der Footer ganz unten, allerdings habe ich in der mitte dann gezwungen immer diese 1000px frei.