WebSite X5Help Center

 
Kai-Uwe B.
Kai-Uwe B.
User

Anker auf der Seite in Verbindung mit der Stickybar  de

Автор: Kai-Uwe B.
Просмотрено 704, Подписчики 2, Размещенный 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

Размещено
19 Ответы
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. 

Читать больше
Размещено От Franz-Josef H.
Kai-Uwe B.
Kai-Uwe B.
User
Автор

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?

Читать больше
Размещено От 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.

Читать больше
Размещено От Franz-Josef H.
Kai-Uwe B.
Kai-Uwe B.
User
Автор

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

Читать больше
Размещено От Kai-Uwe B.
Kai-Uwe B.
Kai-Uwe B.
User
Автор

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

Читать больше
Размещено От Kai-Uwe B.
Kai-Uwe B.
Kai-Uwe B.
User
Автор

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?

Читать больше
Размещено От 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.

Читать больше
Размещено От Franz-Josef H.
Kai-Uwe B.
Kai-Uwe B.
User
Автор

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.

Читать больше
Размещено От 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. 

Читать больше
Размещено От Franz-Josef H.
Kai-Uwe B.
Kai-Uwe B.
User
Автор

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:

Читать больше
Размещено От Kai-Uwe B.
Andreas S.
Andreas S.
Moderator

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>

Читать больше
Размещено От 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. 

Читать больше
Размещено От Franz-Josef H.
Kai-Uwe B.
Kai-Uwe B.
User
Автор
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?

Читать больше
Размещено От Kai-Uwe B.
Kai-Uwe B.
Kai-Uwe B.
User
Автор
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?

Читать больше
Размещено От Kai-Uwe B.
Franz-Josef H.
Franz-Josef H.
Moderator

Welche Seite meinst Du jetzt genau? 

Читать больше
Размещено От Franz-Josef H.
Andreas S.
Andreas S.
Moderator

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.

Читать больше
Размещено От Andreas S.
Kai-Uwe B.
Kai-Uwe B.
User
Автор
Franz-Josef H.
Welche Seite meinst Du jetzt genau? 

Zum Beispiel diese:

https://www.buchmann-schortens.de/maritime-deko.html

Schaut auf dem 10 Zoll Tablet im Hochformat nicht so schön aus. Der Footer muss weiter nach unten.

Читать больше
Размещено От Kai-Uwe B.
Kai-Uwe B.
Kai-Uwe B.
User
Автор
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? 

Читать больше
Размещено От Kai-Uwe B.
Andreas S.
Andreas S.
Moderator

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.

Читать больше
Размещено От Andreas S.