DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sprungmarken brechen um statt zu scrollen, keine Silbentrennung in Ueberschriften

Browse Source 
Rueckmeldung 22.08.2026: "ich will nicht dass man die hin und her
schieben muss man soll die alle sehen aber nicht schieben muessen."

Richtig, und aus zwei Gruenden: Eine Wischleiste verbirgt, DASS es noch
mehr gibt -- was rechts aus dem Bild ragt, existiert fuer die meisten
Menschen schlicht nicht. Dazu kam ein haesslicher Scrollbalken quer ueber
die Seite. Jetzt brechen die Knoepfe um, alle fuenf sind auf einen Blick
da, auch bei 320px.

Der Text in den Knoepfen darf dabei mitbrechen (white-space: normal) --
ohne das sprengt ein langer Name wie "Buchhaltungs- &
Steuerverwaltungsseiten" auf schmalen Bildschirmen die Zeile und der
waagerechte Ueberlauf waere durch die Hintertuer zurueck.

Dabei mitgefunden: "hyphens: auto" auf Ueberschriften. Auf dem Handy
stand dadurch "Alles, was vorher ge-klaert sein sollte". Der Browser
trennt damit nach Silben, auch wenn ueberhaupt kein Platzproblem
besteht. In Fliesstext ist das ein Gewinn, in grossen Ueberschriften
sieht es billig aus -- und genau die sind das Erste, was jemand sieht.
overflow-wrap: break-word bleibt und faengt echte Ueberlaeufe weiterhin ab.

Pruefskript: die Sprungmarken-Leisten waren als "absichtlich scrollbar"
von der Ueberlaufpruefung ausgenommen. Diese Ausnahme ist raus -- sonst
wuerde ein zurueckkehrender Ueberlauf dort nie auffallen. 45/45 weiterhin
sauber.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-08-22 19:03:30 +02:00
co-authored by Claude Opus 5
parent de4a90362e
commit 9f74167f84
4 changed files with 60 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webdesign/leistungen.html
+20 -10
View File
@@ -16,19 +16,29 @@
<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd2" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd2" />
<style>
/* Sprungmarken-Leiste: auf schmalen Bildschirmen waagerecht wischbar
statt umbrechend — vier lange deutsche Paketnamen ergeben sonst vier
Zeilen, die den halben ersten Bildschirm fressen. */
/* Sprungmarken.
Frueher eine waagerecht wischbare Leiste. Rueckmeldung 22.08.2026:
"ich will nicht dass man die hin und her schieben muss man soll die
alle sehen aber nicht schieben muessen" -- voellig richtig. Eine
Wischleiste verbirgt, DASS es noch mehr gibt: was rechts aus dem Bild
ragt, existiert fuer die meisten Menschen nicht. Dazu kommt ein
haesslicher Balken quer ueber die Seite.
Jetzt bricht die Leiste einfach um. Der Text in den Knoepfen darf
dabei mitbrechen (white-space: normal) -- sonst sprengt ein langer
Name wie "Buchhaltungs- & Steuerverwaltungsseiten" auf 320px die
Zeile und der waagerechte Ueberlauf waere durch die Hintertuer
zurueck. */
.ls-sprung {
display: flex; gap: .5rem; overflow-x: auto; padding: .2rem .2rem 1rem;
scrollbar-width: thin; -webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
display: flex; flex-wrap: wrap; gap: .5rem;
padding: .2rem 0 1rem;
}
.ls-sprung a {
flex: 0 0 auto; scroll-snap-align: start;
padding: .6rem 1rem; min-height: 44px; display: inline-flex; align-items: center;
border-radius: 999px; border: 1px solid var(--wd-rand);
font-size: .92rem; font-weight: 600; color: var(--wd-text-mid); white-space: nowrap;
flex: 0 1 auto;
padding: .55rem 1rem; min-height: 44px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 12px; border: 1px solid var(--wd-rand);
font-size: .92rem; font-weight: 600; color: var(--wd-text-mid);
white-space: normal; text-align: center; line-height: 1.25;
}
.ls-sprung a:hover { color: var(--wd-text); border-color: var(--wd-rand-stark); background: rgba(127,208,232,.06); }