Floating Fussnote mit Navi-Elementen

[Juegen]

Hallo,

ich kriegs einfach nicht hin eine Fusszeile als DIV container immer am unteren Ende der Seite darzustellen!

Wenn ich:
#footer {
 BACKGROUND: #e4d879 url(../Images/line.gif) no-repeat;
 position: absolute;
 left: 50%;
 width: 100%;
 height: 25px;
 bottom:0px;
 margin-left: -50%;
 text-align:right;
 }
verwende, dann stimmt alles solange, wie ich das Browserfenster neu dimensioniere.
Habe ich allerdings eine Seite mit viel Inhalt und Scrollbar, und ich scrolle, dann bleibt der Footer an der absoluten y-Position kleben und erscheint mitten im Text.
Da ich ja nicht immer im Voraus wissen kann wie viel Inhalt die Seite hat, kann ich auch keine absoluten Positionsangaben mitgeben.

Hat jemand eine Idee?

Gruesse
Juergen

[wahsaga]

hi,

ich kriegs einfach nicht hin eine Fusszeile als DIV container immer am unteren Ende der Seite darzustellen!

http://www.alistapart.com/articles/footers

gruß,
wahsaga

[Juegen]

hi,
danke für den link
http://www.alistapart.com/articles/footers

mit dem erläuterten java-script habe ich es gelöst. Aber jetzt habe ich den teufel mit dem belzebub ausgetriebgen: ich baue meine site von frames auf css um, und nun muss ich für dimensionsberechungen java-script bemühen. wenn jemand scripting wegen aktiven inhalten deaktiviert hat, sieht es nicht so gut aus.

wie lösen sowas wohl die gurus in zen-garden, wo man den inhalt des HTML nicht verändern darf, nur das css-sheet??

dann muss ich wohl ein ganz anderes design ins auge fassen

gruesse
juergen

[Ingo Turski]

Hi,

wie lösen sowas wohl die gurus in zen-garden, wo man den inhalt des HTML nicht verändern darf, nur das css-sheet??

die verzichten meist auf so unnötige Features wie einen fixierten Footer.

freundliche Grüße
Ingo

[wahsaga]

hi,

die verzichten meist auf so unnötige Features wie einen fixierten Footer.

es geht nicht um einen fixierten footer, sondern um einen, der immer unter dem inhalt zu stehen kommt, und wenn dieser "zu kurz" ist, am unteren ende des viewports.

gruß,
wahsaga

[wahsaga]

hi,

mit dem erläuterten java-script habe ich es gelöst.

ich löse es lieber ohne javascript, aufbauend auf dem ala-artikel.

html und body bekommen 100% höhe.
alle seiteninhalte kommen in einen container mit mindesthöhe 100%, für den IE höhe 100%, der dann position:relative bekommt.
der footer liegt ebenfalls in diesem container, und wird absolute mit bottom:0; positioniert.
der (letzte) inhalt im containers bekommt ein padding-bottom (nicht der container selber, sonst wird die höhe bei korrekter box model interpretation ja wieder zu hoch), um ihn auf abstand vom footer zu halten, um überlagerungen zu vermeiden.

damit erwische ich die geckos, opera und Win-IE 5 und 6. (ohne rücksicht auf IE 5 könnte man sogar auf den container verzichten, in dem man body das position:relative verpasst, und den footer daran absolute ausrichtet.)

was der IE Mac macht, weiß ich nicht, ist mir im zweifelsfalle schnurz.
safari kennt (noch) kein min-height, interpretiert height aber im gegensatz zum IE richtig - dort hängt der footer also im zweifelsfalle bei "zu wenig" wenig inhalt unter diesem, sitzt nicht ganz unten am viewport. bei inhalt > viewporthöhe ist auch dort das ergebnis das gewünschte.

gruß,
wahsaga