nicht angemeldet
vertikale Seitenleiste springt in Header
0 
Matthias Scharwies
0 
Der Martin
0 
Gunnar Bittersmann
vertikale Seitenleiste springt in Header
JürgenB
Rolf BHallo Zusammen,
ich freue mich, dieses Forum gefunden zu haben und hoffe auf eure Unterstützung. Leider kenne ich mich mit HTML noch zu wenig aus, um ein Problem zu lösen, dass mir schon seit Tagen zunehmend graue Haare bereitet.
Es geht um einen selbst erstellten Header (Logo und horizontales Navigationsmenü) unter https://artwalks-shop.fineartprint.de/.
Soweit sieht eigentlich alles ganz okay aus. Scrolle ich jedoch ein wenig nach unten, springt allerdings das vertikale Menü in der linken Seitenleiste in den Header und überdeckt diesen sowie auch die horizontale Navigation.
Bei der rechten Seitenleiste habe ich das Problem durch "position: static" irgendwie hinbekommen. Doch bei der rechten will mir das partout nicht gelingen.
Hat vielleicht jemand von euch einen Tipp? Vielen Dank schon mal im Voraus
Liebe Grüße, Ralph
-
Herzlich willkommen bei SELFHTML!
Soweit sieht eigentlich alles ganz okay aus.
Ja, aber …
Schau Dir mal die Fehlermeldungen im Validator an:
https://validator.w3.org/nu/?doc=https%3A%2F%2Fartwalks-shop.fineartprint.de%2F
Scrolle ich jedoch ein wenig nach unten, springt allerdings das vertikale Menü in der linken Seitenleiste in den Header und überdeckt diesen sowie auch die horizontale Navigation.
Bei der rechten Seitenleiste habe ich das Problem durch "position: static" irgendwie hinbekommen.
Schau Dir mal Fehler 53 und 54 an. Liegt es evtl. daran?
War grad Beifahrer und habe Deine Seite auf dem Handy angeschaut. Du skalierst ein bisschen, aber linke und rechte Sidebar sind viel zu klein. Da solltest Du noch mal am Seitenaufbau hirnen.
Zur Lektüre: HTML/Tutorials/responsive_Webdesign
Herzliche Grüße
Matthias Scharwies
--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“-
Hallo,
https://validator.w3.org/nu/?doc=https%3A%2F%2Fartwalks-shop.fineartprint.de%2F
schon die erste Meldung des Validators ist zwar technisch nicht dramatisch, zeigt aber Unsinn. Denn auch wenn der Inhalt der Website ein eigenartiges Deutsch-Englisch-Mischmasch ist (was ich persönlich nicht mag), so ist die vorherrschende Sprache doch Deutsch. Also lang="de".
Und für andere Fälle, wo es tatsächlich Englisch sein soll: Es gibt "en-GB" für britisches und "en-US" für amerikanisches Englisch (und noch ein paar Varianten für Australien, Neuseeland, Kanada, und anscheinend gibt es sogar in Dänemark eine englischsprechende Minderheit). Falls einem diese Nuancen egal sind, sollte man nicht allzu spezifisch sein und stattdessen nur lang="en" angeben. Aber "en-EN" gibt es nicht.
Schau Dir mal Fehler 53 und 54 an. Liegt es evtl. daran?
Glaube ich eher nicht. Sowohl ein fehlendes Leerzeichen zwischen den Attributen, als auch ein unbekanntes Attribut (hier das Semikolon) sollte die Fehlerkorrektur von HTML 5 bewältigen.
Immer eine Handbreit Wasser unterm Kiel
Martin--
Wenn ich den See seh, brauch ich kein Meer mehr.-
@@Der Martin
Glaube ich eher nicht. Sowohl ein fehlendes Leerzeichen zwischen den Attributen, als auch ein unbekanntes Attribut (hier das Semikolon) sollte die Fehlerkorrektur von HTML 5 bewältigen.
Ja. Hab beides in der CSSBattle angewandt:
-
<body style='…'bgcolor=…>(Im Wert vonstylekommt ein Leerzeichen vor, das ich nicht wegkriege. Ansonsten wäre es ohne Anführungszeichen noch ein Zeichen weniger.) -
<p a><p>gestylt mitp{…}[a]{…}(viel kürzer als<p class=a><p>mitp{…}.a{…})
😷 LLAP
--
„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
— Joachim Gauck über Impfgegner-
Hallo zusammen,
vielen Dank schon mal für eure Antworten. Ich konnte den Fehler leider noch nicht finden. An den Fehlern 53 und 54 lag es leider nicht. Im Validator habe ich auch viele weitere Unstimmigkeiten gefunden. Das Problem dabei ist aber, dass ich bei dieser Seite nur den Header (Logo und waagerechtes Navigationsmenü) mit HTML individuell gestalten kann, ansonsten aber keinen Zugriff z.B. aufs CSS habe. Ich habe die Vermutung, dass es an der Navigation in der linken Seitenleiste liegen könnte. So konnte ich z.B. den "Searchfilter in der rechten Navigationsleiste durch <div id="searchfilter" style="position: static"></div> am "Springen" hindern. Bei der linken <div class="navi_beginn"> will mir das nicht gelingen. Die Position steht auf "fixed" und lässt sich nicht überschreiben. Für weiterführende Tipps wäre ich sehr dankbar. Liebe Grüße, Ralph
-
Hallo,
das
<div class="navi_beginn" …>bekommt beim Scrollen einposition: fixed;. Da das div bei mir eine Höhe von 1035px hat, also deutlich mehr als mein Laptop her gibt, sehe ich nur einen Teil. Für mich ist dieser Teil der Seite, z.B. das Login, unerreichbar. Wenn du am css und am Javascript nichts ändern kannst, solltest du denjenigen kontaktieren, der das verbrochen hat.Gruß
Jürgen -
Hallo RalphK,
versuche es doch einmal damit:
.navi_beginn { position: static !important; }Nicht schön, liefert aber - zumindest im Edge - das gewünschte Ergebnis; es hüpft nix mehr.
Grüße, Martl
-
Hallo Martl,
versuche es doch einmal damit:
.navi_beginn { position: static !important; }in meinem FF(78.10.0esr) wird das durch
position: fixed;überschrieben.Gruß
Jürgen-
Hallo zusammen, mit der Holzhammermethode (!important) habe ich es auch schon vergeblich versucht. Bei Opera wird die Änderung ebenfalls stets durch "position: fixed;" überschrieben. Bin mit meinem Latein langsam am Ende. Hat von euch vielleicht noch jemand eine Idee? Auf jeden Fall schon einmal vielen Dank an alle für die bisherigen Hinweise und Vorschläge! Liebe Grüße, Ralph
-
Hallo,
für mich sieht das so aus, dass „irgendein“ Javascript die Positionsangabe beim Scrollen überschreibt. Da hilft dann auch kein Important. Setz dich mit dem Autor des Scripts in Verbindung. Zumal das ja auch nicht auf allen Seiten passiert.
Gruß
Jürgen-
Hallo Jürgen,
vielen Dank für deine Antwort. Das scheint mit auch so zu sein, wie du sagst.
Natürlich ist der Autor des Scripts nicht mehr erreichbar und ein neuer Programmierer hat sich noch nicht gefunden, bzw. noch nicht eingearbeitet.
Schade. Aber wenigstens bin ich so auf SELFHTML gestoßen und habe auf diesem Wege einige hilfsbereite Experten getroffen. 😀
Viele Grüße, Ralph
-
Hallo RalphK,
grundsätzlich ist es so, dass in diesem Monsterscript, dass ihr aus dem Temp-Ordner einbindet, ein scroll-Eventhandler sitzt. Der scheint zum Inifiniscroll beizutragen, und er fügt dem div.navi_beginn die Eigenschaften position:fixed und top:5px hinzu.
Ein
position:static !important;in der.navi_beginnRegel sollte das auch im Firefox überschreiben,!importanthat Vorrang vor style-Angaben. Aber man kann natürlich auch serverseitig die Style-Änderung im JS auskommentieren. Ich habe das bei mir in aktuellen Chrome und FF (Windows) probiert, es hat die position:fixed Zuweisung zuverlässig überschrieben.Dieses Script ist aber aus meiner Sicht der totale Architekturunfall, denn darin befinden sich 15000 Zeilen mit Bildinformationen. Weil das Script im temp-Ordner steht und auch jedesmal anders heißt, würde ich mutmaßen, dass diese Info-Tabelle bei jedem Seitenabruf neu generiert wird. Das würde dann auch die 3,5s erklären, die die "search" Seite zum Abrufen braucht. Wenn ihr jedesmal über die Datenbank rennt, um die Kataloginformationen zu extrahieren, auch für Bilder, die gar nicht auf der Seite sind, ist das schon heftig.
Dieser Index sollte nach dem Einstellen neuer Bilder einmalig generiert werden und dann für alle User gleichbleibend seinen Namen behalten, damit der Client sie cachen kann. Die Frage, ob man tatsächlich immer den vollen Bildkatalog ausliefern muss, würde ich auch aufwerfen wollen. 15000 Zeilen JavaScript wollen vom Browser auch erstmal geparsed und umgesetzt werden.
Der Infiniscroll ist etwas über-enthusiastisch. Lädt man die Seite, hat man erstmal ca 4,2MB Datenvolumen. Das ist schon satt, aber okay, es sind Bilder. Aber wenn der Infiniscroll einsetzt, wird ein Infiniload daraus, er holt den kompletten Rest und schluckt nochmal 20MB weg.
Ggf. müsstet ihr eure Thumbnails stärker komprimieren, die New York Skyline (12525684) hat über 300K, während dieser "Mujer" Akt mit 32K auskommt. Den Vogel schießt diese Windmühlenszene ab, ein halbes MB für einen Preview? Weia. Da müsst ihr ran - ein Mobilfunknutzer, der keine Flatrat hat, bekommt einen Herzinfarkt. Abgesehen von der Übertragungsdauer in einem prä-LTE Netz.
Schaut euch auch mal im Netzwerktrace des Browsers den Wasserfall an, die Zeiten, die der Client wartet, sind viel zu hoch. D.h. euer Server tut zu viel. Solltet ihr zufällig viele Nutzer haben, bricht alles zusammen.
Rolf
--
sumpsi - posui - obstruxi-
Hallo Rolf,
vielen Dank für deine ausführliche und nachvollziehbare Antwort.
Wie weiter oben schon geschrieben, habe ich dieses Monsterscript nicht "verbrochen". Ich kann lediglich den Header (Bild und horizontales Menü) in HTML gestalten (ohne JS verwenden zu dürfen) und muss mit dem Rest leben.
Interessant fand ich aber, dass du das Problem irgendwie lösen konntest:
Ein position:static !important; in der .navi_beginn Regel sollte das auch im Firefox überschreiben, !important hat Vorrang vor style-Angaben. Aber man kann natürlich auch serverseitig die Style-Änderung im JS auskommentieren. Ich habe das bei mir in aktuellen Chrome und FF (Windows) probiert, es hat die position:fixed Zuweisung zuverlässig überschrieben.
Sag mir doch mal bitte, wie du das genau gemacht hast.
Auf jeden Fall danke ich dir schon mal für die m. E. sehr hilfreichen Antworten, die ich gern dem neuen Entwickler der Seite mit auf den Weg geben werde. Ich jedenfalls wäre an seiner Stelle sehr dankbar für so wertvolle Hinweise und Tipps.
Vielen Dank vorab und freundliche Grüße
Ralph
-
@@RalphK
Wie weiter oben schon geschrieben, habe ich dieses Monsterscript nicht "verbrochen". Ich kann lediglich den Header (Bild und horizontales Menü) in HTML gestalten (ohne JS verwenden zu dürfen) und muss mit dem Rest leben.
Nein. Deine Aufage ist es nun, den Verantwortlichen klarzumachen, dass man mit dem „Rest“ nicht leben kann. Der gehört aufgeräumt, neu durchdacht, Unnötiges weggeschmissen.
Zum Beispiel das JavaScript, das fürs Festhalten des Menüs zuständig ist. Oder sein sollte – es funktioniert ja nicht richtig. Weg damit! Das löst man mit CSS:
position: sticky.Fürs Zusammenspiel siehe Using Position Sticky With CSS Grid
😷 LLAP
--
„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
— Joachim Gauck über Impfgegner-
@@Gunnar Bittersmann
Fürs Zusammenspiel siehe Using Position Sticky With CSS Grid
… und die Ergänzung von CSS-Tricks dazu.
position: stickynicht aufs Grid- bzw. Flexitem selbst angewandt, sondern auf ein Nachfahrenelement davon, sieht dann ohnealign-self: startso aus:😷 LLAP
--
„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
— Joachim Gauck über Impfgegner -
Hallo Gunnar,
kannst Du mir erklären, warum position:sticky auf der fineartprint Seite nicht funktioniert? Der Navigationsbalken scrollt einfach mit.
Ich habe die Grundstruktur - schlecht wie sie ist - in einem Fiddle nachgebaut und da funktioniert das sticky. Aber nicht, wenn ich es per Entwicklertools in die Style Regel für .navi_beginn eintrage.
Am float liegt es nicht, das habe ich ins Fiddle übernommen.
Und am Javascript der Seite auch nicht, der gestern noch vorhandene Scroll-Handler wurde offenbar entfernt.
Was ich im Fiddle bemerkt habe - position:sticky reicht allein nicht, man muss auch noch was tun, um bei "zu niedrigen" Viewports an den unteren Teil dieser Navigation heranzukommen.
Das ist keine ganz triviale Designentscheidung, welchen Weg man dafür gehen möchte, und vermutlich ist dieser Weg mit Kröten gepflastert, die alle "Schluck mich!" schreien...
Rolf
--
sumpsi - posui - obstruxi-
Hallo zusammen,
noch einmal vielen Dank für die richtig guten Hinweise, Tipps und Tricks. Das hat offensichtlich nicht nur mir viel gebracht, sondern auch der IT-Abteilung von Fineartprint.
Dank eurer Anmerkungen und diesem Thread (den ich weitergeleitet habe) konnte zumindest das Hauptproblem entschärft werden. Jetzt bleibt nur noch zu hoffen, dass sukzessiv das Skript auch noch verbessert, verschlankt und von allem Ballast befreit wird.
Doch diesbezüglich bin ich auch guter Hoffnung, Schließlich lag zwischen meiner Email von heute morgen bis zur Beseitigung des Problems nur wenige Stunden. Schau'n wir mal ...
Vielen Dank jedenfalls nochmal an alle!
Frohe Weihnachten & einen guten Rutsch!
Ralph
-
@@Rolf B
Was ich im Fiddle bemerkt habe - position:sticky reicht allein nicht, man muss auch noch was tun, um bei "zu niedrigen" Viewports an den unteren Teil dieser Navigation heranzukommen.
Man kommt ran – nachdem man den ganzen Hauptinhalt nach unten gescrollt hat.
Das ist freilich nicht die beste Lösung. Man sollte Navigation und Hauptinhalt unabhängig voneinander scrollen können. Da wäre dann
max-height: 100vh; overflow: autozu ergänzen (und ggfs. weitere Änderungen).Auf Systemen, die nicht permanent eine Scrollbar zeigen, ist nicht ersichtlich, dass es weiter unten noch mehr Navigationspunkte gibt (wenn nicht gerade der letzte angeschnitten ist). Da sollte man vielleicht noch einen Pfeil o.ä. hinzufügen.
Auf den anderen System sieht die permanente Scrollbar da mittendrin hässlich aus. Aber form follows function.
😷 LLAP
--
„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
— Joachim Gauck über Impfgegner
-
-
-
-
-
-
-
-
-
-
-
-
-