Unverständnis von CSS-Eigenschaften; Hintergrund der aktiven Navigationsauswahl ändern

[HTML_go]

Hallo Gunnar,

das war wohl nichts bei mir mit "aus dem Kopf" ...

Du meinstest mit

Auf jeden Fall ist in allen Browsern die Default-Zeilenhöhe zu gering. Die solltest du (je nach Schriftart) auf das 1.4- bis 1.5-fache der Schriftgröße setzen:

also, dass ich das im standard.css so eintragen soll?

html {
  line-heigt: 1.5
}

Und im html habe ich das wieder auf "1.0" zurück gesetzt; danke!

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0"
/>

Was aber ist mit dem sichtbaren "zum Hauptinhalt"-Link auf der derzeit aktuellen index.html? Da habe ich doch was falsch gemacht, denn nach dem Artikel hier https://blog.selfhtml.org/2018/jul/15/skipper-ahoj sollte dieser Link bei Nicht-Nutzung der Tastatur oder Nicht-Nutzung eines Screenreaders nicht zu sehen sein, oder verstehe ich den Artikel falsch?

Habe das (mit Hinzufügung von

<main id="main" tabindex="-1">

hinter dem geschlossenen Header-Tag) nun so gemacht:

<header>
      <a id="skip-link" href="#main">zum Hauptinhalt</a><!--für die Tastatur-Navigation oder per Screenreader-->
      <a href="./index.html"><!--führt per Klick auf das Banner-Bild zurück auf die Startseite-->
        <img
          src="https://kontakt-vs.de/kontakt.png"
          alt="Startseite | Sozialwerk KONTAKT e.V. Villingen-Schwenningen"
        />
      </a>
    </header>
    <main id="main" tabindex="-1">

Ist aber noch nicht online.

Dennoch sehe ich den Link (lokal) noch über dem Banner ... Und übrigens ist seitdem die Navigationsleiste "kürzer" geworden (an den äußeren Rändern wurde etwas abgeschnitten. Und in der schmalen "Smartphone-Ansicht" ist die Navigationsleiste auch nicht mehr zentriert. Siehe Screenshots:

Fragen über Fragen ... 😉