Scroll-Bereich eines Buttons innerhalb einer Grid-Area

[einsiedler]

Hallo Matthias,

Felix und Gunnar haben dir genau diese Ansätze gegeben, Gunnar sogar ein Beispiel.

Hmmm... nochmehr JS-Kram, ich wollte mich eigentlich davon befreien und das was ich schon habe, entsorgen. Und durch: html {scroll-behavior: smooth;} ersetzen.

@media screen and (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

Ich muss darüber nachdenken.

Was mir auf den ersten Blick auffällt:

1. Die vertikale Überschrift ragt in meinem Surface (12''-Monitor) aus dem Viewport raus. Mach das weg! Less is more!

Das werde ich noch anpassen. Ist mir jetzt , der mit einem 32'' 4K Monitor arbeitet nicht aufgefallen ; O )

Nein, im Ernst, ich bin ja noch mitten drin und noch lange nicht fertig. Solche Anpassungen mach ich zum Schluss.

2. Navigation würde ich links positionieren (→ Lesefluss)
   • Das details ist ok, aber auf dem großen Monitor (40'') wäre Platz für alle Links der Navigationen

Stimmt schon, ist eine Überlegung wert. Das wollte ich ebenfalls so anpassen das sich die Haupt-Navigation bei einem bestimmten Querie, also (schmalen) Bildschirmfensterbreite zusammenzieht und erst dann ausgeklappt werden müsste. Das mit dem "details" wollte ich für die Hauptnavigation eigentlich noch ändern aber ich gewöhne mich gerade daran und lass es vielleicht. Es ist so einfach.

3. Site-Navigation wäre für mich als Laie ein Inhalt(sverzeichnis)

Klaro, hab schon nach passenden Begriffen gesucht.

So lieber Felix. soviel zu Deinem Einzeiler, jetzt trete mal in Aktion.

Ist er doch schon. Du hast seinen Rat ignoriert.

Sag ich nichts zu.

Aufgabe an SELFHTML:

In diesem Bereich soll ein Scroll-Up Button welcher erst nach ein wenig herunter-scrollen erscheinen soll (im sichtbaren Bereich wäre er ja unsinnig), dann schließend mit auf- oder abscrollt sodass er immer angeklickt werden könnte.

1. Eine Seite hat so viel Inhalt, dass dieser erst durch Scrollen sichtbar wird.
   • HTML-Struktur (So einfach wie möglich)
     Du baust da im header Schachtelstrukturen mit div's und auch der top-Link besteht aus div,h2, ul, li, a WTF?

Du meinst den Sub-Header, ich habe Zustände bekommen das so hinzubekommen und war letzlich so froh. Hier bestand die gleiche Probleblematik wie jetzt beim Top-Link. Dann zeig mir bitte wie es einfacher geht, mit nur wenigen Zeilen. Bei allem Respekt Deiner Könnerschaft die Du sicherlich hast, setz Dich mal daran und erkenne die Problematik mit der fehlenden Höhe der Grits. Dumm rum schwafeln kann ich auch. </Bei allem Respekt>

2. Sobald die Navigation unsichtbar wird, soll ein Top-Link erscheinen, der nach oben zielt.
   • Solche Berechnungen erfordern JS → siehe Gunnars Tip mit IntersectionOberserver

Richtig. Wenn es unbedingt sein muss. Ich muss darüber nachdenken.

3. Der Top-Link (Pfeil nach oben) soll mittig am unteren Viewportrand positioniert werden
   • CSS Elemente zentrieren

Nicht so einfach das zu finden was innerhalb eines Grit auch funtioniert. Beim Meisten davon passiert einfach schlichtweg NICHTS.

Du baust da eine Vielzahl von Grids auf, die man weder braucht noch versteht.

Sicher?

→ Imho ist die gewünschte Position nicht in einem Grid, sondern als Kind des body, den du ja auf Sichtbarkeit testest.

Definiert aber IST, wie gesagt das Grid-Raster mit :

.top-link {		
      	grid-area: main-content / main-nav;}

Und dann soll es sich auch bitteschön so verhalten und NICHT zum body.

Das ist bei uns im Wiki noch eine Baustelle, die ich aber bis Ende des Monats schließen möchte.

Muss ich mir anschauen, wenn es wirklich nicht anders geht.

Herzliche Grüße

Matthias Scharwies

Herzliche Grüße T.

Nachtrag: Wegen meiner Langsamkeit beim fortschreiten bin ich leicht angenervt. Das drückt sich leider bei meinem Posting aus.