2017-09-14 11 views
0

Auf meiner Website https://www.hcldesign.co.uk/ können Sie sehen, dass ich ein Top-Banner habe. Dieses Banner hat eine Schaltfläche mit der Aufschrift 'Website-Beispiel'. Wenn Sie diese Taste drücken, wird das Folienbild geändert. Jetzt verursacht dies auch einen seltsamen Bildschirmpositionsfehler mit meiner Navigationsleiste und Inhalt/Körperabschnitt.CSS Seitenposition Ausgabe

Wenn Sie auf die Schaltfläche klicken, wird eine Lücke auf der linken Seite des Körpers angezeigt und einige Inhalte werden um ein paar Pixel nach rechts verschoben und dann zurückgespult. Die Position der Navigationsleiste funktioniert auch, wenn die Schaltfläche auf dem Schieberegler/Banner angeklickt wird.

Ich habe versucht, mit dem Positionscode für einige der Elemente zu verwirren, aber kann nicht scheinen, dies zu beheben.

Ich muss den Seiteninhalt in der gleichen Position halten, wenn auf die Schaltfläche geklickt wird.

+1

Fragen Code Hilfe suchen müssen den kürzesten Code enthalten notwendig, es zu reproduzieren ** in der Frage selbst ** vorzugsweise in einem ** Stapel Snippet **. Obwohl Sie einen Link bereitgestellt haben, würde Ihre Frage für andere zukünftige SO-Benutzer mit demselben Problem keinen Wert haben, wenn sie ungültig werden sollte. Siehe [** Etwas in meiner Website funktioniert nicht, kann ich nur einen Link einfügen **] (http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project- doesnt-work-kann-ich-nur-einfügen-a-link-to-it). –

+0

@Paulie_D ist richtig. Trotzdem habe ich eine Lösung für Ihr Problem gefunden. – andreas

+0

Hallo, ich entschuldige mich für das Frageformat, ich habe wirklich nicht gesehen, welchen Code ich in die Frage einfügen könnte, die nützlich wäre, von der ich wusste. Aber danke deine Lösung funktioniert super! – Harvey

Antwort

1

Der durch diese CSS-Regel verursacht:

.ls-overflow-hidden { 
    overflow: hidden; 
} 

Diese Klasse zu Ihrem <body> Elemente hinzugefügt, wenn "Website Beispiel" klicken. Ändern Sie den Wert in d. H. overflow: auto; und der Fehler sollte weg sein.

+0

Warum der Downvote? – andreas

-1

Beim Klicken auf den Button des Schiebereglers .ls-overflow-hidden class wird dem Body hinzugefügt. Sie können es durch die CSS-Regel beheben

body.ls-overflow-hidden { 
    overflow: auto; 
} 
+1

Wie unterscheidet sich diese Antwort von meiner? – andreas

+0

Ich habe nicht gesagt, dass deine Antwort überhaupt falsch ist. Die einzige Sache ist, dass ls-overflow-hidden eine generische Klasse sein kann, die an anderer Stelle verwendet werden könnte, wenn sie ohne das body-Tag verwendet wird, kann sie auch anderswo verwendet werden. – Sayan

+0

Ok sicher. Aber das wäre ein Kommentar gewesen, keine kopierte Antwort ... Danke für den Hinweis. – andreas