Anker auf der Seite in Verbindung mit der Stickybar
Author: Kai-Uwe B.
Visited 1023,
Followers 2,
Shared 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
Posted on the
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.
Author
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?
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.
Author
Bringt leider auch keine Besserung. Da bleibt wohl nur die nicht so charmante Lösung mit dem Simple Seperator. :(
Author
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.....
Author
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?
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.
Author
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.
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.
Author
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:
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>
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.
Author
Die Stickybar hat aber in jeder Auflösung eine andere Höhe. Wie gehe ich dann vor?
Author
Dann sollte ich aber die Übersichtsseite mit etwas mehr Platz nach unten erweitern, oder?
Welche Seite meinst Du jetzt genau?
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.
Author
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.
Author
Könntest du mir den Code auch mit den verschiedenen Breakpoints erstellen?
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.