nicht angemeldet
sticky footer ohne wrapper?
0 0 0 
suit
0
sticky footer ohne wrapper?
Ich mag in meinem markup keine sementisch überflüssigen Elemente und deshalb auch keine "wrapper".
Leider erfordern alle mir bekannten Lösungen um einen "sticky footer" zu verwenden einen wrapper.
Diese 3 Lösungen sind mir bekannt: Der Klassiker, die Alternative und selbst How to Centre and Layout Pages Without a Wrapper kommen ohne eine Art wrapper nicht aus.
Mein Layout besteht aus 2 Spalten: die Navigation links und der Inhalt rechts, darunter soll der Footer ohne dass ich die Navigation und den Inhalt in einen wrapper packen muss. Ist das möglich?
Hier mein Quelltext:
<body>
<div id="navigation">
<!-- ... -->
</div>
<div id="content">
<!-- ... -->
</div>
<div id="footer">
<!-- ... -->
</div>
</body>
und die CSS:
#navigation {
float: left;
width: 210px;
}
#content {
margin-left: 230px;
padding-bottom: 30px;
width: 700px;
overflow: auto;
}
footer {
color: #CCC;
clear: both;
background-color: #333;
height: 90px;
padding-top: 10px;
}
Jemand eine Idee?
-
Hi,
Ich mag in meinem markup keine sementisch überflüssigen Elemente und deshalb auch keine "wrapper".
Nanu – so hohe Ansprüche ans Markup, aber nicht die entsprechenden CSS-Kenntnisse, um das Gewünschte auch umsetzen zu können? :-)
Leider erfordern alle mir bekannten Lösungen um einen "sticky footer" zu verwenden einen wrapper.
Nur um sicher zu gehen: Unter einem „Sticky Footer“ verstehen wir hier einen Footer mit bekannter Höhe, der bei kürzerem Inhalt am unteren Ende des Viewports positioniert sein soll, und bei längerem Inhalt dann unterhalb dieses Inhalts durch Scrollen zu erreichen sein soll?
Mein Layout besteht aus 2 Spalten: die Navigation links und der Inhalt rechts, darunter soll der Footer ohne dass ich die Navigation und den Inhalt in einen wrapper packen muss.
Sie sind doch schon in einem Wrapper.
Ist das möglich?
Ja. (Ggf. mit Einschränkungen – je nachdem, wie wichtig dir Kompabilität zu Uralt-Browsern ist.)
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Nanu – so hohe Ansprüche ans Markup, aber nicht die entsprechenden CSS-Kenntnisse, um das Gewünschte auch umsetzen zu können? :-)
Schlimm ich weiß... bisher halt wrapper aber irgendwann muss man ja auch mal Prioritäten setzen :-)
Nur um sicher zu gehen: Unter einem „Sticky Footer“ verstehen wir hier einen Footer mit bekannter Höhe, der bei kürzerem Inhalt am unteren Ende des Viewports positioniert sein soll, und bei längerem Inhalt dann unterhalb dieses Inhalts durch Scrollen zu erreichen sein soll?
Ja genau das. Nur soll der footer in meinem Fall auch über die komplette Breite gehen. Das habe ich vergessen zu erwähnen. Ansonten wäre <body> natürlich super geeignet.
Ja. (Ggf. mit Einschränkungen – je nachdem, wie wichtig dir Kompabilität zu Uralt-Browsern ist.)
Meiner Meinung nach sollte kein Web-Entwickler, oder jeder der sich so schimpft und ähnliches betreibt, den IE6 berücksichtigen. Ich denke, dass man heutzutage sehr nahe am Stand der aktuellen Technik arbeiten kann. Mich interessieren also nur "aktuelle" Browser :-)
-
Ja genau das. Nur soll der footer in meinem Fall auch über die komplette Breite gehen. Das habe ich vergessen zu erwähnen. Ansonten wäre <body> natürlich super geeignet.
Das versteh' ich nicht ganz - was hindert dich daran, den Inhalt im body auf eine entsprechende breite zu beschränken?
Meiner Meinung nach sollte kein Web-Entwickler, oder jeder der sich so schimpft und ähnliches betreibt, den IE6 berücksichtigen.
Sagt jemand, der Websites verfasst, die keien 1000 Besucher im Monat anlocken :)
Ich denke, dass man heutzutage sehr nahe am Stand der aktuellen Technik arbeiten kann.
Nein, nichtmal im entferntesten - Internet Explorer 7 und 8 nehmen einen signifikanten Teil in den meisten Statistiken ein.
Mich interessieren also nur "aktuelle" Browser :-)
Das kann man sich leisten, wenn man einen eingeschränkten Personenkreis bedient - aber nicht bei Websites mit kommerziellem Hintergrund.
-
Ja genau das. Nur soll der footer in meinem Fall auch über die komplette Breite gehen. Das habe ich vergessen zu erwähnen. Ansonten wäre <body> natürlich super geeignet.
Das versteh' ich nicht ganz - was hindert dich daran, den Inhalt im body auf eine entsprechende breite zu beschränken?
Dann wäre der footer doch genauso beschränkt oder versteh ich dich grad falsch?
Wie gesagt, der footer möchte gern 100% Breite einnehmen. Also 100% vom viewport.Meiner Meinung nach sollte kein Web-Entwickler, oder jeder der sich so schimpft und ähnliches betreibt, den IE6 berücksichtigen.
Sagt jemand, der Websites verfasst, die keien 1000 Besucher im Monat anlocken :)Google? :P
Nein, nichtmal im entferntesten - Internet Explorer 7 und 8 nehmen einen signifikanten Teil in den meisten Statistiken ein.
Den beiden muss man aber auch anrechnen, dass sie ziemlich gut zu gebrauchen sind. Vom Firefox sage ich auch nicht 5 oder 6 waren schlecht.
Mich interessieren also nur "aktuelle" Browser :-)
Das kann man sich leisten, wenn man einen eingeschränkten Personenkreis bedient - aber nicht bei Websites mit kommerziellem Hintergrund.Es kommt wohl vor allem darauf an wie man es definiert. Mit "aktuelle" habe ich mich wohl falsch ausgedrückt. Ich sag mal eher das gern benutzte "moderne".
Aber Google, Facebook & Co setzen mehr und mehr auf "moderne" Technik und teilweise schon auf HTML5. Deren kommerziellen Hintergrund kann man wohl kaum verleugnen. Ich denke wer heut noch sowas wie "Browser-Hacks" für den IE6 produktiv einsetzt hat die Zeichen der Zeit verpasst.
Das ist aber auch ein ganz anderes Thema :-)-
Hi,
Wie gesagt, der footer möchte gern 100% Breite einnehmen. Also 100% vom viewport.
Und was soll davon abweichend nicht 100% Breite einnehmen …?
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
-
-
-
Hi,
Nur soll der footer in meinem Fall auch über die komplette Breite gehen. Das habe ich vergessen zu erwähnen. Ansonten wäre <body> natürlich super geeignet.
Ich sah in deinem CSS keinerlei Einschränkung der Breite von body – was dann doch wohl die „komplette Breite“ wäre – oder …?
Ich denke, dass man heutzutage sehr nahe am Stand der aktuellen Technik arbeiten kann.
Na dann bring dich in Punkto CSS mal auf diesen :-)
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Ich sah in deinem CSS keinerlei Einschränkung der Breite von body – was dann doch wohl die „komplette Breite“ wäre – oder …?
Ja nur wie krieg ich den footer da runter? Bzw. sollten Navi und Content nur so hoch wie ihr Inhalt sein, ich will sie also nicht einfach beide auf 100% Höhe strecken und mit margin versehen. Dann bräuchte ich wieder ein extra Element wegen einer Hintergrundgrafik :/
Na dann bring dich in Punkto CSS mal auf diesen :-)
Ja na hallo... xD
Deshalb bin ich doch hier^^-
Hi,
Ich sah in deinem CSS keinerlei Einschränkung der Breite von body – was dann doch wohl die „komplette Breite“ wäre – oder …?
Ja nur
Warum führst du dann die Breite als Argument an?
wie krieg ich den footer da runter?
So, wie es in den gängigen Ansätzen, von denen du ein paar bereits verlinkt hast, auch gemacht wird.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Ja nur
Warum führst du dann die Breite als Argument an?Ähm.. schieb es bitte auf die Uhrzeit!
wie krieg ich den footer da runter?
So, wie es in den gängigen Ansätzen, von denen du ein paar bereits verlinkt hast, auch gemacht wird.Dann schaff ich es wohl nicht es umzusetzen.
In allen Beispiel wird auch ein wrapper benutzt der ausserhalb des footers liegt. Den footer ausserhalb von body zu platzieren wäre wohl eine schlechte Idee. Vergessen wir das mal wieder.-
Hi,
Dann schaff ich es wohl nicht es umzusetzen.
In allen Beispiel wird auch ein wrapper benutzt der ausserhalb des footers liegt.Und wofür wird der benutzt?
Ist er erforderlich?MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Und wofür wird der benutzt?
Ist er erforderlich?Meines Verständnisses nach hat er überall die Höhe 100% um den fotter nach unten zu "drücken". Also scheint er mir schon erforderlich.
-
Hi,
Und wofür wird der benutzt?
Ist er erforderlich?Meines Verständnisses nach hat er überall die Höhe 100% um den fotter nach unten zu "drücken".
Den Footer kann er gar nicht „drücken“, weil dieser absolut positioniert und damit aus dem Fluss genommen ist.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Den Footer kann er gar nicht „drücken“, weil dieser absolut positioniert und damit aus dem Fluss genommen ist.
In welchem meiner verlinkten Beispiele ist der footer denn absolut positioniert?
-
Hi,
Den Footer kann er gar nicht „drücken“, weil dieser absolut positioniert und damit aus dem Fluss genommen ist.
In welchem meiner verlinkten Beispiele ist der footer denn absolut positioniert?
So genau hatte ich mir die gar nicht angeschaut … aber gut, ohne absolute Positionierung und dafür mit negativem margin sollte es ja noch simpler sein, das auch ohne zusätzlichen „Wrapper“ umzusetzen.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
So genau hatte ich mir die gar nicht angeschaut …
Ist ja nicht schlimm, so hatten wir wenigstens einen small-talk...
aber gut, ohne absolute Positionierung und dafür mit negativem margin sollte es ja noch simpler sein, das auch ohne zusätzlichen „Wrapper“ umzusetzen.
Mag sein, ich habe allerdings bereits eine Lösung mit absoluter Positionierung gefunden und auf Rätsel raten mit dir spielen habe ich gerade keine Lust. Oder wolltest du mir noch etwas hilfreiches mitteilen?
-
-
-
-
-
-
-
-
Ja nur wie krieg ich den footer da runter? Bzw. sollten Navi und Content nur so hoch wie ihr Inhalt sein, ich will sie also nicht einfach beide auf 100% Höhe strecken und mit margin versehen.
Falls es Dir nicht unbedingt wichtig ist, dass der Footer am u. Rand klebt, sondern auch genügen würde, dass er einfach weiter unten ist freundest Du Dich viell. mit min-height:900px auf eine der oberen divs an? Das würe zumindest wenig markup und würde etwas besser aussehen als das.
LG,
LSpreee-
Falls es Dir nicht unbedingt wichtig ist, dass der Footer am u. Rand klebt, sondern auch genügen würde, dass er einfach weiter unten ist freundest Du Dich viell. mit min-height:900px auf eine der oberen divs an? Das würe zumindest wenig markup und würde etwas besser aussehen als das.
"sticky footer" bedeutet eigentlich, dass er unten kleben soll ;)
Ich habe jetzt folgende Lösung
body { position: absolute; height: auto; width: 100%; min-height: 100%; padding-bottom: -100px; /* footer-Höhe */ } #navigation { float: left; margin-bottom: 100px; /* footer-Höhe */ width: 210px; } #content{ margin-left: 230px; margin-bottom: 100px; /* footer-Höhe */ padding-bottom: 30px; width: 700px; overflow: auto; } #footer { color: #CCC; clear: both; position: absolute; bottom: 0; background-color: #333; height: 90px; width: 100%; padding-top: 10px; }Soweit ich das sehen konnte funktioniert es im aktuellen FF und Opera. Andere Browser/-Versionen muss ich noch testen. Und ich seh gerade, dass ich das clear:both vom footer wohl entfernen kann.
-
-
-
-
-