WebSite X5Help Center

 
Günter B.
Günter B.
User

Fussleiste  de

Author: Günter B.
Visited 120, Followers 1, Shared 0  

Hallo,

ich habe den header jetzt mit html code fixiert. Nun möchte ich es auch mit der Fussleiste machen, so dass bei scrollen der Seite Header und Footer immer sichtbar bleiben und nur der Inhalt dazwischen gescrollt wird.

Kann mit bitte jemand ein Snipped geben wie das geht und wo das dann eingrtragen wird?

Vielen Dank

Günter

Posted on the
5 ANSWERS
Andreas S.
Andreas S.
Moderator

Wenn du uns zeigen könntest wie du es mit HTML geschafft hast, den HEader zu fixieren, dann könnte man schauen ob es auch für den Footer geht.

Read more
Posted on the from Andreas S.
Daniel W.
Daniel W.
User
Best User of the month DEBest User of the month EN

Bei meiner Testseite habe ich Header und Footer fixiert, siehe

>> https://findelinks.de/123test-aufklappmenue-2/

Ich habe in WebSite X5 unter ...

   >> 1 Einstellungen > Statistiken und Code / Code

... bei ...

    Benutzerdefinierter Code:

       Vor dem </HEAD> Tag

... diesen CSS-Code genutzt (als Anhaltspunkt verwenden) - siehe

<style>
#imHeaderObjects {
position: fixed;
display: block;
background-color: pink;
width: 100%;
z-index: 1000000;
}
#imHeaderBg {
position: fixed;
background-color: pink;
z-index: 1000000;
}
#imFooterObjects {
position: fixed;
bottom: 0;
display: block;
background-color: pink;
z-index: 1200000;
}
#imFooterBg {
position: fixed;
background-color: pink;
z-index: 1000000;
}
</style>

Read more
Posted on the from Daniel W.
Günter B.
Günter B.
User
Author

Hallo, hier meine bisherige lösung

<style>
header {
position: sticky;
top: 0;
z-index: 1000000;
}
</style>

Read more
Posted on the from Günter B.
Daniel W.
Daniel W.
User
Best User of the month DEBest User of the month EN

Ich bin jetzt kein CSS-Experte und ich kenne die Webseite nicht, um zu testen.

Read more
Posted on the from Daniel W.
Günter B.
Günter B.
User
Author

Ok,

ein wenig trial and error und hier ist die einfache Lösung:

<style>
header {
position: sticky;
top: 0;
z-index: 1000000; /* Ensures the header stays above other content */
}
footer {
position: sticky;
bottom: 0;
z-index: 1000000;
}
</style>

Read more
Posted on the from Günter B.