Layout Probleme: Div verschiebt sich + Sticky Footer bleibt nicht unten

[julieann]

Hallo!

Ich wende mich nochmal mit 2 Problemen beim Layout an euch:

1) Ich habe ein DIV mit einer 2nd Level Navigation, die wie bei einer Sitemap anzeigt, wo man sich gerade befindet
Auf dem ersten Bild seht ihr, wie es im "Normalzustand" aussieht. Wenn man jetzt jedoch mit der Mouse über ein Menüelement fährt und sich per Hover das Menü ausklappt, rutscht diese "Pfadangabe" nach rechts. Damit man das besser sieht, habe ich es mal eine Ebene oberhalb des Menüs angeordnet. Siehe Bild 2. Ich hoffe, das ist verständlich.
Woran liegt das? Hat sicher etwas mit der Positionierung zu tun, aber wie kann ich das korrigieren?

2)
Ich hätte gern den Footer als sog. "sticky footer", der immer am unteren Bildschirmrand bleibt, auch wenn der Inhalt nicht den ganzen Bildschirm füllt. Irgendwie rutscht er aber immer nach oben.
Wisst ihr, wieso?

Hier könnt ihr die Seite aufrufen:
http://www.oecocolor.de/LEG/index.html

 

[Jan-Frederik Stieler]

Hi,
das nennt man im Fachjargon „Breadcrumbs“ .

Das padding-top bei #menu li:hover macht das Problem. Füge bei der ID #secondNavigation ein padding-top: 4px; ein.

Viele Grüße

PS: bei .imgbottom hast du auch noch ein Problem mit der Positionierung.

 

[julieann]

Vielen Dank! Das war ja im Prinzip doch ganz einfach
Auch danke für den "Breadcrumbs"-Tipp. Jetzt weiß ich endlich, wie man das nennt

Weiß noch jemand etwas zum sticky footer Problem?

 

[Jan-Frederik Stieler]

Hi,
zum Thema Sticky-Footer ist hier ein ganz gutes Beispiel: http://www.cssstickyfooter.com/de/

Grüße

 

[julieann]

Hey!

Ich habe mir die Seite angesehen.
Mein Problem ist, dass ich schon ein recht komplexes Layout habe und ich bekomme das einfach nicht eingebaut
Ich habe die ganze Zeit rumprobiert und musste nun meine alte Version aus dem BackUp holen, da alles zerschossen wurde und ich nicht mehr viel damit anfangen konnte.
Ich habe bei mir auf jeden Fall ein <div> wrap, das auch den Footer umschließt. Das unterscheidet schonmal vom verlinkten Beispiel bzw. muss aufgefangen werden.

Kann mir jemand weiterhelfen und sagen, wie ich das in mein Layout eingebaut bekomme?