WebSite X5Help Center

 
Kai-Uwe B.
Kai-Uwe B.
User

Anker auf der Seite in Verbindung mit der Stickybar  de

Autore: Kai-Uwe B.
Visite 1024, Followers 2, Condiviso 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

Postato il
19 RISPOSTE
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. 

Leggi di più
Postato il da Franz-Josef H.
Kai-Uwe B.
Kai-Uwe B.
User
Autore

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?

Leggi di più
Postato il da 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.

Leggi di più
Postato il da Franz-Josef H.
Kai-Uwe B.
Kai-Uwe B.
User
Autore

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

Leggi di più
Postato il da Kai-Uwe B.
Kai-Uwe B.
Kai-Uwe B.
User
Autore

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.....

Leggi di più
Postato il da Kai-Uwe B.
Kai-Uwe B.
Kai-Uwe B.
User
Autore

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?

Leggi di più
Postato il da 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.

Leggi di più
Postato il da Franz-Josef H.
Kai-Uwe B.
Kai-Uwe B.
User
Autore

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.

Leggi di più
Postato il da 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. 

Leggi di più
Postato il da Franz-Josef H.
Kai-Uwe B.
Kai-Uwe B.
User
Autore

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:

Leggi di più
Postato il da Kai-Uwe B.
Andreas S.
Andreas S.
Moderator
Utente del mese 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>

Leggi di più
Postato il da 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. 

Leggi di più
Postato il da Franz-Josef H.
Kai-Uwe B.
Kai-Uwe B.
User
Autore
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?

Leggi di più
Postato il da Kai-Uwe B.
Kai-Uwe B.
Kai-Uwe B.
User
Autore
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?

Leggi di più
Postato il da Kai-Uwe B.
Franz-Josef H.
Franz-Josef H.
Moderator

Welche Seite meinst Du jetzt genau? 

Leggi di più
Postato il da Franz-Josef H.
Andreas S.
Andreas S.
Moderator
Utente del mese 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.

Leggi di più
Postato il da Andreas S.
Kai-Uwe B.
Kai-Uwe B.
User
Autore
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? 

Leggi di più
Postato il da Kai-Uwe B.
Andreas S.
Andreas S.
Moderator
Utente del mese 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.

Leggi di più
Postato il da Andreas S.