Positionierung des Footers
LiAn
- css
Guten Morgen allerseits,
Ich habe ein kleines Problem mit der Positionierung des Footers auf meiner Website. Leider wird er vom darüberliegenden DIV nicht nach unten gedrückt, wenn der Inhalt des darüberliegenden DIVs länger wird, sondern bleibt immer am selben Platz.
Ich habe eine Seite erstellt mit den von mir aus gesehen relevanten Codebestandteilen. Die CSS Definitionen habe ich ausnahmsweise auch mal direkt reingeschrieben.
linzproductions.ch/footerproblem.html
Meine Frage ist nun, wie kriege ich den Footer unter den Inhalt der Seite?
Ich wäre extrem froh, wenn jemand den Quellcode "schnell" anschauen könnte, und mir auf die Sprünge helfen könnte.
Vielen Dank schon im Voraus.
Hallo LiAn
Ich habe Deine Frage nicht richtig verstanden, ist es Möglich das der Text Links nebe den Bilder sein Soll, und nicht Links darüber?
MFG Manuell
Hallo Manuel,
»»ist es Möglich das der Text Links nebe den Bilder sein Soll, und nicht Links darüber?
Sorry, falls ich mich unklar ausgedrückt habe. Ich versuch's nochmals:
Das ganze <div id="bottom"></div> soll unterhalb des Inhalts des <div id="upper"></div> sein. In diesem Fall also eigentlich unterhalb der Bilder. Hätte ich Text innerhalb des <div class="upper-text-2"></div> der länger wäre als die Höhe aller Bilder in <div class="images-right"></div>, müsste das <div id="bottom"></div> unterhalb des Textes sein.
Danke.
Moin!
Ich habe Deine Frage nicht richtig verstanden, ist es Möglich das der Text Links nebe den Bilder sein Soll, und nicht Links darüber?
Nein. Wenn man das wirre Markup, das man wohl schon getrost als Divsuppe bezeichnen kann, anschaut, koennte man auf den ersten Blick aber schon denken, dass er floaten will.
Sollte ich mal ne freie Minute haben, kann ich es mir mal naeher anschauen. Spontan geht da jedenfalls nix.
Hallo Steel,
Nein. Wenn man das wirre Markup, das man wohl schon getrost als Divsuppe bezeichnen kann, anschaut, koennte man auf den ersten Blick aber schon denken, dass er floaten will.
Dachte mir schon, dass dieser Hinweis, wegen der vielen Divs kommt. Aber da ich mit verschiedenen Hintergrundsbildern arbeiten musste (halbtransparente PNGs), die sich überlappen, ging's leider nicht anders.
Ich habe das Gefühl, dass der Footer immer am unteren Ende des <div id="upper"></div> klebt.
Die Frage ist, wieso wächst die height des <div id="upper"></div> nicht mit dem Inhalt der Divs, die sich innerhalb des <div id="upper"></div> befinden?
Hi LiAn,
zunächst mal hast du das Entscheidende vergessen:
html, body {
height:100%;
}
Außerdem solltest du nicht vergessen, dass ein div, das nur floatende Elemente enthält, von diesen nicht "aufgespannt" wird, solange du nicht am Ende, innerhalb dieses divs clearst oder ihm ein overflow:hidden gibst.
Wenn du dann mal ein bißchen "Dickes" aus deiner div-Suppe holst und den Rest vernünftig benennst, könnte es ca. so aussehen:
CSS:
html, body {
height:100%;
}
div#wrapper {
min-height:100%;
position:relative;
overflow:hidden;
}
/* IE 6 kennt kein min-height, braucht es aber auch nicht */
* html div#wrapper {
height:100%;
}
div#footer {
height:20px;
margin-top:-20px;
position:relative;
}
HTML:
<html>
<body>
<div id="wrapper">
Inhalte oben
</div>
<div id="footer">
Inhalte Footer
</div>
</body>
</html>
Fragen? Fragen...
cheers
Antipitch
Hab's geschafft. hatte was mit der relative und absoluten position der divs zu tun.