CSS-Footer, hier: absolut in relativ positionierter Box

[Elya]

Hallo Forum,
ich habe das zweifelhafte aber lehrreiche Vergnügen, ein abenteuerliches Frames-Layout zu modernisieren, ohne das Design großartig verändern zu dürfen. Klappt auch bisher ganz gut, bis auf eine Kleinigkeit: ein fest am unteren Bildschirmrand verankerter Footer, der sich jedoch bei kleinerem Bildschirmausschnitt nicht über den Inhalt schieben, sondern aus dem sichtbaren Bereich verschwinden soll.

Bei alistapart glaubte ich eine Lösung zu finden (reine CSS ohne JS):

http://www.alistapart.com/articles/footers
mit dem Beispiel:
http://www.alistapart.com/d/footers/footer_css3.html

und habe es auf meine Bedürfnisse anzupassen versucht:

http://visuelya.arcsite.de/self/index_test2.html
CSS-Datei dazu:
http://visuelya.arcsite.de/self/css/styles_modern_screen_test2.css

Wie Ihr beim Verändern der Fenstergröße unschwer erkennen könnt, "funktioniert" der Umsetzungsversuch aber bei mir nicht, weder im IE5.5/6 noch Mozilla. Der footer wird gnadenlos in die Navi (die von Seite zu Seite unterschiedlich lang ist) reingedrückt.

Ich vermute einen Denk- oder Sehfehler bei mir, komme aber nicht drauf. Das ganze ist unabhängig davon, ob in der umgebenden grauen Box 2 oder 3 Elemente stehen, und unabhängig von float und dem Inhalt rechts.

Wer von Euch "anti-table zealots" (Diskussionsbeitrag bei ALA :-)) kann mir auf die Sprünge helfen?

Gruß aus Köln-Ehrenfeld,

Elya

[Thomas J.]

Tag auch

Wer von Euch "anti-table zealots" (Diskussionsbeitrag bei ALA :-)) kann mir auf die Sprünge helfen?

Soweit ich das sehe, ist es nur ein Tippfehler

html>body #test steht da.
html>body #testcontainer müßte es heißen.

Thomas J.

[Elya]

Hallo Thomas,

Soweit ich das sehe, ist es nur ein Tippfehler

html>body #test steht da.
html>body #testcontainer müßte es heißen.

ups, das wäre ziemlich peinlich...hing noch von meiner alten Testseite da rum. Ich hab das geändert, ändert aber nicht viel am Problem. Interessant ist, daß beim Zusammenschieben irgendwann, etwa in der Mitte des Navi-Blocks, der Footer stehenbleibt. Ich sehe den Zusammenhang nicht.

Tipps?

Gruß aus Köln-Ehrenfeld,

Elya

[Thomas J.]

Hallo Elya

Interessant ist, daß beim Zusammenschieben irgendwann, etwa in der Mitte des Navi-Blocks, der Footer stehenbleibt. Ich sehe den Zusammenhang nicht.

Ohne es jetzt getestet zu haben ... das wird mit der Größe von padding-bottom geregelt.
Deine Bannerbox ist schätzungsweise 80 ... 100 px hoch. Trage diesen Wert mal bei #testcontainer unter padding-bottom ein. Damit erreichst Du, daß unten immer genug Platz für die Bannerbox ist.
Falls dort später nur Grafiken stehen sollen, kannst Du den Wert ja genau bestimmen. Ist es Text, solltest Du für die Schriftgröße/Zeilenhöhe/padding etc. em verwenden. Da kannst Du dann auch gleich den Wert von padding-bottom in em angeben.

Thomas J.

[Elya]

Hallo Thomas,

Danke für's Anschauen erstmal (manchmal glaube ich, ich schreibe chinesisch oder sonstwie konfus, so wenig Antworten wie ich bekomme ;-))

Ohne es jetzt getestet zu haben ... das wird mit der Größe von padding-bottom geregelt.
Deine Bannerbox ist schätzungsweise 80 ... 100 px hoch. Trage diesen Wert mal bei #testcontainer unter padding-bottom ein. Damit erreichst Du, daß unten immer genug Platz für die Bannerbox ist.

nur leider vergrößert sich, ziemlich boxmodellkonform, der #testcontainer um den padding-bottom Wert. Damit zerhaut es mir wieder die min-height und der #bannerbox steht genau unterhalb des sichtbaren Bereichs. Außer 100% ergibt bei #testcontainer jedoch kein anderer Höhen-Wert einen Sinn.

Gruß aus Köln-Ehrenfeld,

Elya

[Thomas J.]

Hallo Elya,

nur leider vergrößert sich, ziemlich boxmodellkonform, der #testcontainer um den padding-bottom Wert.

Sorry mein Fehler, padding-bottom gehört in die Navigation.
Das Ergebnis sieht dann so aus:
+---------------------+
|     Navigation      |
|                     |
|                     |
+---------+           |
| Footer  |           |  Diese Höhe + etwas zusätzlichen Abstand
+---------+-----------+  bekommt die Navi als padding-bottom.

Thomas J.

[Elya]

Hallo Thomas,

Sorry mein Fehler, padding-bottom gehört in die Navigation.
Das Ergebnis sieht dann so aus:
+---------------------+
|     Navigation      |
|                     |
|                     |
+---------+           |
| Footer  |           |  Diese Höhe + etwas zusätzlichen Abstand
+---------+-----------+  bekommt die Navi als padding-bottom.

Klappt! Du bist mein Held heute, ich habe den Wald vor lauter Bäumen nicht mehr gesehen. Es steht auch noch in dem Artikel drin... "Because you dont want your footer to overlap your content, you can add some padding to the bottom of the content block to compensate the footers height." Nur hatte ich den Beispielabstand gewählt und nicht den, den ich für meinen Footer brauche.

Danke nochmal.

Gruß aus Köln-Ehrenfeld,

Elya