WebSite X5Help Center

 
Kai-Uwe B.
Kai-Uwe B.
User

Anker auf der Seite in Verbindung mit der Stickybar  de

Autor: Kai-Uwe B.
Besucht 985, Followers 2, Geteilt 0  

Hallo zusammen,

ich möchte auf einer Seite 4 Anker setzten. Das ist auch alles nicht das Problem. Wenn ich dann zu einem Anker springen möchte, ist der Bereich oben durch die Stickybar verdeckt und der Besucher meiner Seite erkennt nicht sofort das er in dem gewählten Bereich ist. Wenn ich die StickyBar deaktivere passt alles. Ich möchte aber auch das meine Besuche immer Zugriff auf das Menü oben haben. Kann man das Menü (Header) vielleicht fixieren oder gibt es in Verbindung mit der Stickybar eine andere Lösung?

Hier mal der Link auf welcher Seite das auftritt. Je kleiner die Auflösung um so verschobener ist es.

https://www.buchmann-schortens.de/wilhelmshaven-leinwaende.php

Vielen Dank für die Hilfe

Kai

Gepostet am
19 ANTWORTEN
Franz-Josef H.
Franz-Josef H.
Moderator

Du kannst eventuell mit dem Simple Seperator Objekt in einer eigenen Zeile eine entsprechende Höhe einstellen und diese und die Zeile  mit dem betreffonen Inhalt über den Zeilenstil zusammenfassen und für diese Kombination den Anker setzen. 

Mehr lesen
Gepostet am von Franz-Josef H.
Kai-Uwe B.
Kai-Uwe B.
User
Autor

Eine gute Idee. Da mein Header bei den unterschiedlichen Auflösungen unterschiedliche Höhen haben, müsste ich da im Simple Separator 80px einstellen. Ich finde das schaut auf der ganzen Seite dann etwas löchrig aus, oder? Habe es jetzt mal so hochgeladen, dann kannst du dir da ein Bild von machen. Gibt es nicht die Möglichkeit den Header zu fixieren?

Mehr lesen
Gepostet am von Kai-Uwe B.
Franz-Josef H.
Franz-Josef H.
Moderator

Probier mal die größe des headers im layout auf 0 zu setzen dann  'beginnt' die seite mit der stickybar.

Oder versuche den Code 

<style> #imHeader {position: fixed; z-index: 1000;} </style>

Im codebereich  " vor dem </head>-tag" einzutragen.

Mehr lesen
Gepostet am von Franz-Josef H.
Kai-Uwe B.
Kai-Uwe B.
User
Autor

Bringt leider auch keine Besserung. Da bleibt wohl nur die nicht so charmante Lösung mit dem Simple Seperator. :(

Mehr lesen
Gepostet am von Kai-Uwe B.
Kai-Uwe B.
Kai-Uwe B.
User
Autor

Oder ich lasse die StickyBar weg. Oder in der entsprechenden Auflösung gibt es nur ein Hamburger Menü. Ich weiß jetzt echt nicht was ich machen soll.....

Mehr lesen
Gepostet am von Kai-Uwe B.
Kai-Uwe B.
Kai-Uwe B.
User
Autor

Ich habe jetzt mal mein 10 Zoll Tablet rausgeholt und die Seite geöffnet. Die entsprechende Auflösung die mir in WSX5 diesen "Fehler" anzeigt, ist bei meinem 10 Zoll Tablet die Hochkant Auflösung. Dort wird alles ordentlich angezeigt. Ist das richtig so? Und wer schaut auf einem Tablet im Hochkantformat?

Mehr lesen
Gepostet am von Kai-Uwe B.
Franz-Josef H.
Franz-Josef H.
Moderator

Nachdem ich mir das auf Smartphone und tablet jeweils hoch und quer angesehen habe,  finde ich die Darstellung mit dem Simple Seperator nicht schlecht und würde diese verwenden.

Noch ein Hinweis: Du solltest Standart in die richtige Schreibweise  Standard ändern.

Mehr lesen
Gepostet am von Franz-Josef H.
Kai-Uwe B.
Kai-Uwe B.
User
Autor

Danke für den Hinweis mit Standard. Ich glaube wir lassen das mit der StickyBar. Die meinsten Seiten haben beim Scrollen auch keine Menü am oberen Rand. Was sagst du als Experte? Die großen Zwischenräume schrecken uns gerade in der Handyansicht doch eher ab.

Mehr lesen
Gepostet am von Kai-Uwe B.
Franz-Josef H.
Franz-Josef H.
Moderator

So wie Du es jetzt hast - ohne Stickybar - ist es schon sinnvoller. Durch den Top-Button ist man ja auch schnell wieder oben und hat Header mit Menü wieder im Zugriff. 

Mehr lesen
Gepostet am von Franz-Josef H.
Kai-Uwe B.
Kai-Uwe B.
User
Autor

Das sehen wir auch so. Ich habe mit den Auflösungen nicht so die Ahnung, meinst du ich sollte die Auflösung für das Tablet hochkant drin lassen. Folgende Aufteilungen haben wir jetzt:

Mehr lesen
Gepostet am von Kai-Uwe B.
Andreas S.
Andreas S.
Moderator
Nutzer des Monats DE

Aktiviere wieder die Stickybar!  Wenn diese die Höhe von 80 px hat dann füge diesen Code in die Eigenschaften (Reiter Erweitert) bei der Seite wilhelmshaven-leinwaende unter "vor dem </head> Tag" ein.

<style>

#XXL, #Tript, #Standart, #Panorama {top:-80px!important;}

</style>

Mehr lesen
Gepostet am von Andreas S.
Franz-Josef H.
Franz-Josef H.
Moderator

Wenn ich von meinem Verhalten ausgehe, solltest Du es drin lassen. Ich benutze das Tablet hauptsächlich im Hochformat - und bin da bestimmt nicht der Einzige. 

Mehr lesen
Gepostet am von Franz-Josef H.
Kai-Uwe B.
Kai-Uwe B.
User
Autor
Andreas S.
Aktiviere wieder die Stickybar!  Wenn diese die Höhe von 80 px hat dann füge diesen Code in die Eigenschaften (Reiter Erweitert) bei der Seite wilhelmshaven-leinwaende unter "vor dem </head> Tag" ein. <style> #XXL, #Tript, #Standart, #Panorama {top:-80px!important;} </style>

Die Stickybar hat aber in jeder Auflösung eine andere Höhe. Wie gehe ich dann vor?

Mehr lesen
Gepostet am von Kai-Uwe B.
Kai-Uwe B.
Kai-Uwe B.
User
Autor
Franz-Josef H.
Wenn ich von meinem Verhalten ausgehe, solltest Du es drin lassen. Ich benutze das Tablet hauptsächlich im Hochformat - und bin da bestimmt nicht der Einzige. 

Dann sollte ich aber die Übersichtsseite mit etwas mehr Platz nach unten erweitern, oder?

Mehr lesen
Gepostet am von Kai-Uwe B.
Franz-Josef H.
Franz-Josef H.
Moderator

Welche Seite meinst Du jetzt genau? 

Mehr lesen
Gepostet am von Franz-Josef H.
Andreas S.
Andreas S.
Moderator
Nutzer des Monats DE

Ich sehe du hast es auf 130px ausgebessert. Hast du alle Auflösungen gleich angepasst? So kann man es auch machen wenn Platz ist.  Ansonsten müsste man für jeden Breakpoint einen eigenen Code einfügen.

Mehr lesen
Gepostet am von Andreas S.
Kai-Uwe B.
Kai-Uwe B.
User
Autor
Andreas S.
Ich sehe du hast es auf 130px ausgebessert. Hast du alle Auflösungen gleich angepasst? So kann man es auch machen wenn Platz ist.  Ansonsten müsste man für jeden Breakpoint einen eigenen Code einfügen.

Könntest du mir den Code auch mit den verschiedenen Breakpoints erstellen? 

Mehr lesen
Gepostet am von Kai-Uwe B.
Andreas S.
Andreas S.
Moderator
Nutzer des Monats DE

Für das Handyformat wäre das dieser Code...

<style> @media(max-width:409.9px) {#XXL, #Tript, #Standart, #Panorama {top:-100px!important;}}</style>

Für die anderen Breakpoints muss man die Pixelzahlen ausbessern. Natürlich muss man wissen wie hoch der Header ist bei den einzelnen Breakpoints.

Mehr lesen
Gepostet am von Andreas S.