Fußzeilenproblem

[Stefan]

Hallo,

ich habe ein CSS-Problem, bei dem ich nicht weiter komme:

Hier mal die Datei (Version 1), um die es geht:
http://home.arcor.de/webelz/test/index2.htm

Kurze Erklärung:
Ich habe bewußt viel mit relativen Größen gearbeitet, weil ich möglichst viel skalierbar halten möchte, Liquid Design eben. Der Problemfall der Lösung ist die Fußzeile, die Wiese (im Quellcode Footer): Wird der Mitteltext zu lang oder verkleinert man das Fenster, läuft der Text hinter den Footer.

Warum er das tut, ist mir schleierhaft: Das Elternelement ist doch laut Quelltext das Body-Tag und ich habe über bottom:0px eine Ausrichtung am Fensterende erwirkt. Der Logik nach müßte doch die Fußzeile bei längeren Texten automatisch tiefer sitzen und der Text als solches über eine längere Bahn scrollbar sein, ohne daß sich beide in die Quere kommen, oder?

Bei den Lösungsversuchen habe ich auch eine andere Version geprüft, die ebenfalls interessant wäre für mich:
http://home.arcor.de/webelz/test/index3.htm
(=hier habe ich die Wiese durch einen roten Rahmen ersetzt)

Hier habe ich versucht, die Fußzeile unter die Navigations- und Content-Box zu setzen. Aber egal, was ich durchgetestet habe, es ging alles nicht:

ich habe eine bottom:0px-Ausrichtung in Relation zum "Block"-DIV probiert, hat irgendwie nicht geklappt.

Desweiteren kam ich auf die Idee, daß das Fußzeilen-DIV doch gemäß des natürlichen Textflusses unter den beiden Navi- und Content-DIVs landen müßte, auch Fehlanzeige. Selbst über display:inline habe ich es nicht hingekriegt.

Hat jemand eine Idee?

Ziel ist es, daß die linke Navigation und der mittlere Inhalt variabel bleiben von der Länge her und das Stück Wiese als Fuß am Ende steht.

Danke für eure Hilfe!

Stefan

[David]

Hey Stefan =)

Also, eigentlich ist das Problem ganz leicht gelöst ;) Du musst nur die Eigenschaft z-index anwenden.

Dein verbesserter Quelltext sieht dann so aus (ich habe nur die Stylesheets verändert).
Einmal das hier:

#navi1, #header
 {
 height:1.7em;
 position:absolute;
 top:0px;
 z-index:1;
 }
#navi2, #content
 {
 position:absolute;
 top:2.2em;
 border: 1px dotted #aaa;
 background-image:url(ht.gif);
 z-index:1;
 }

Da ist die Eigenschaft z-index nun enthalten, und das hier musst du auch verändern:

#footer {
 height:70px;
 width:100%;
 background-image:url(bg-gras2.jpg);
 background-repeat:repeat-x;
 position:absolute;
 bottom:0px;
 left:0px;
 z-index:0;
 }

Voila, Content und so weiter ist über dem Footer ;-)

Liebe Grüße
David

[Stefan]

Hallo David,

zunächst einmal danke für die schnelle Hilfe.

Mit dem z-index habe ich ebenfalls rumprobiert, aber auch ohne Erfolg.

Das Problem besteht jedoch weiterhin. Um es transparenter zu machen, habe ich mal den Blindtext etwas in die Länge gezogen, dabei sieht man es direkt (=den z-index habe ich mal entsprechend eingefügt):

http://home.arcor.de/webelz/test/index2.htm
http://home.arcor.de/webelz/test/index3.htm

Zu index2: Der Rasen unten braucht nicht permanent fix zu sein (=die fixed position klappt ja im IE nur mit Workaround), sie soll einfach nur am Ende stehen.

Die index3 entspricht von der Idee dem, was man sonst als Tabelle gelöst hat: 3 Zeilen, Mittlere Zeile Content und je nach deren Länge schließt sich die Fußzeile an.

Viele Grüße,

Stefan

[Lukas Böhm]

Hi!
Ist es auch möglich alles als Hintergrundbild darzustellen? Geht das, oder nicht?
szia, Lukas

[Stefan]

Hi!
Ist es auch möglich alles als Hintergrundbild darzustellen? Geht das, oder nicht?
szia, Lukas

Hallo Lukas,

Ziel ist es ja, daß die Content-Länge variabel bleibt. Würde ich den ganzen Textblock vom Rahmen her als eine Hintergrundgrafik fixieren, wäre die Länge ja nicht mehr variabel. Würde ich hingegen die Wiese direkt in den Hintergrund implementieren, wäre sie irgendwo bei Pixel #1250 oder so, so lang ist der Hintergrund nämlich angelegt. Bei dann vielleicht nur 400 Pixel hohen Seiten sähe das ja auch ziemlich doof aus bzw. man würde den Footer nur dann sehen, wenn die Seite die Mindestlänge von 1250 Pixeln erreicht hätte...

Viele Grüße,

Stefan

[Lukas Böhm]

Hi!
Und wenn du es so einstellst, dass der Hintergrund mitscrollt und sich nicht wiederholt? Dann kannst du mit padding-bottom einstellen, dass der Text nicht über das Gras geht. So würde ich es machen. Jedenfalls theoretisch. Ich habe keine Ahnung, ob das wirklich geht :-)
szia, Lukas

[Lukas Böhm]

Hi!

Dann kannst du mit padding-bottom einstellen, dass der Text nicht über das Gras geht.

Was natürlich Schwachsinn ist... :-)
ciao, Lukas