nicht angemeldet
Liquid Layout - mitwandernder Footer
Hallo allerseits,
ich habe ein (typisches Liquid-) Layout mit folgenden DIVs:
#Header (oben, Breite 100%)
#Navi (links, feste Breite: z.B. 200px)
#Content (rechts neben der Navi, Breite: restlich zur Verf. stehende Breite)
#Footer (unten, Breite 100%)
Ein Beispiel, das genauso aufgebaut ist, findet man hier.
Dieses Beispiel hat jedoch folgendes Problem:
Der Footer wird (wenn der Content-Bereich aufgrund wenigen Inhalts niedriger als die Navi ist) von der Navi überdeckt, da sich die Position des Footers nur an der Höhe des Content Bereichs orientiert. Die Navi hat dabei (da sie absolute positioniert ist) keinen Enfluss auf die Position des Footers.
Wünschenswert wäre nun, dass sich die Position des Footers an der Höhe des höheren Elemets (Navi ODER Content) orientiert, so dass der Footer z.B. immer 40px unter dem höheren Element bleibt und somit nie mit anderen Elementen "kollidiert".
Kann mir vielleicht jemand bei diesem Problem weiterhelfen?
Danke und Grüße!
-
Yerf!
Kann mir vielleicht jemand bei diesem Problem weiterhelfen?
http://de.selfhtml.org/css/layouts/mehrspaltige.htm#kopf_fuss@title=SelfHTML kann.
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->-
Super, danke Dir! Das ist schon mal eine gute Basis.
Ich habe das HTML+CSS an mein angestrebtes Layout angepasst und etwas vereinfacht, da ich ja nur 2 Spalten benötige.
Wenn man sich nun diese Version (v1) im IE 7 oder Firefox 3 anschaut, so sieht man das Ergebnis so wie ich es in allen Browsern erreichen will.
Für eine korrekte Darstellung der Inhalte innerhalb #Right musste ich hierfür dem #Right-DIV noch ein overflow:hidden geben. Sonst sieht es, sobald innerhalb des #Right floatende Elemente mit nachfolgend "clearendem" Element auftauchen, so aus (v2) (siehe z.B. wieder im IE 7 oder Firefox 3).
Gebe ich dem #Right dieses benötigte overflow:hidden, so wird in manchen Browsern allerdings die Breite dieses DIVs nicht mehr korrekt dargestellt. Siehe z.B. hier (v1) im Opera (v.9.27) oder auch im Safari (V 3.1.1 für windows). Und schaut man sich das im Firefox 2 an, entsteht sogar ein größerer Abstand zwischen #Left und #Right.
Hat jemand eine Idee wie man es schafft, dass der #Right-DIV mitsamt seinen Inhalten browserübergreifend korrekt dargestellt wird? ...also in jedem gängigen Browser so wie hier im IE 7 ?
Vielen Dank und Grüße,
roadrage-
Yerf!
Hat jemand eine Idee wie man es schafft, dass der #Right-DIV mitsamt seinen Inhalten browserübergreifend korrekt dargestellt wird? ...also in jedem gängigen Browser so wie hier im IE 7 ?
Eine Lösung hab ich nicht, aber einen Ansatzpunkt: die Probleme mit der Breite kommen durch das margin-left für die rechte Box. Wenn du das auf 1em setzt siehts im FF2 schon mal ganz gut aus, aber im IE6 fehlt dann der Abstand zur linken Box. Probier damit mal rum, evtl. findet sich eine Lösung für alle Browser, aber es kann auch sein, dass du den IE6 mit einer eigenen Angabe versorgen musst, damit der das richtig darstellt.
Gruß,
Harlequin
--
<!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->-
Danke! Genau das war's. Anstatt dem #Right ein margin-left zu geben hab ich dem #Left ein margin-right gegeben.
Dann sieht das gut aus!
Vielen Dank!
-
-
-