REDAXO Forum

Hallo Leute!

Ich habe auf der frischen Seite für eine Naturheilpraxis einen spannenden Anzeigefehler.

Die Seite "Naturheilverfahren" enthält viele Überschriften (mit IDs). Ein Submenü (mit entsprechender #Anker-Navigation) soll die Navigation erleichtern.

Voraussetzung zur Sichtbarkeit des Problems ist, dass der Bildschirminhalt nach dem Klick auf einen Anker-Link recht weit ans untere Seitenende vorstoßt und der Footer sichtbar ist. Scrollt der Benutzer nun nach oben, dann wird der Inhalt des Containers unten abgeschnitten (s. Grafik).

Der Fehler scheint unabhängig vom Browser aufzutreten.
Die Seite ist CSS und HTML valide.

Vielleicht könnt ihr mir einen Tipp geben, die Container anders anzuordnen oder zu definieren. Da ich meine Kenntnisse Learning-by-Doing erworben habe, fehlt mir vielleicht die richtige Herangehensweise?

Beste Grüße aus Bayern und lieben Dank für die Unterstützung!

Moin!

Nimm mal den 'overflow:hidden' aus dem <body>, dann kannst du nachvollziehen, woran es liegt. Bei der Ankernavigation wird der <body> gescrollt, nicht dein #realbody.
Mein ansatz wäre, das Hintergrundbild zu fixieren und den Rest normal scrollen zu lassen. Mit Firebug oder den Entwicklertools der Borwser kannst du die Browser-Reaktionen auf CSS-Änderungen leicht testen.

Viele Grüße,
Daniel

Hi,

vorschlag:

das hier rausschmeissen:
- realBody Div
- dein img mit der id=bgImg
- overflow: hidden aus deinem echten body

und das hier rein in deinen echten body tag:

Code: Alles auswählen

background: #fff url("hg-2.jpg") no-repeat center center fixed;
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;

background-size wird zwar erst ab neuren browser unterstützt, ist aber der eleganteste weg. sonst mal googlen. es gibt auch per js workarounds für ältere browser.

@runstop64: da waren wir wohl zeitgleich dran

RexDude hat geschrieben:@runstop64: da waren wir wohl zeitgleich dran

Doppelt hält besser

REDAXO Forum

Containerfehler mit Anker-Navigation

Containerfehler mit Anker-Navigation

Re: Containerfehler mit Anker-Navigation

Re: Containerfehler mit Anker-Navigation

Re: Containerfehler mit Anker-Navigation

Re: Containerfehler mit Anker-Navigation