WebSite X5Help Center

 
Günter B.
Günter B.
User

Fussleiste  de

Auteur : Günter B.
Visité 129, Followers 1, Partagé 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

Posté le
5 RéPONSES
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.

Lire plus
Posté le de Andreas S.
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois DEMeilleur utilisateur du mois 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>

Lire plus
Posté le de Daniel W.
Günter B.
Günter B.
User
Auteur

Hallo, hier meine bisherige lösung

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

Lire plus
Posté le de Günter B.
Daniel W.
Daniel W.
User
Meilleur utilisateur du mois DEMeilleur utilisateur du mois EN

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

Lire plus
Posté le de Daniel W.
Günter B.
Günter B.
User
Auteur

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>

Lire plus
Posté le de Günter B.