Hallo > So sieht meine index.html **nun** aus: > > ~~~html > <nav> > <ul> > <li><a aria-current="page">Startseite</a></li> > <li><a href="./vorstellung.html">Über uns</a></li> > <li><a href="./kinder.html">Arbeit mit Kindern</a></li> > <li><a href="./jugend.html">Arbeit mit Jugendlichen</a></li> > <li><a href="./kontaktaufnahme.html">Kontakt</a></li> > <li><a href="./impressum.html">Impressum</a></li> > </ul> > </nav> > ~~~ Besser, aber weiterhin verbesserungsfähig. Schaue dir bitte [Rolfs Codevorschlag](https://jsfiddle.net/Rolf_b/fc7dnbrw/) an. Er lässt dem `<nav>` einen Container `<main>` folgen, der den eigentlichen Inhalt der Seite umfasst. Dieser hat zudem eine ID, die man in der Navigation dem Link zur gegenwärtig gelandenen Seite als Linkziel zuweisen kann. Damit hat dieser Link ein Linkziel und verschwindet bei der Tastaturbedienung somit nicht aus der Linkliste der Navigation [^1]. [^1]: Aus einem von Gunnars Beiträgen: [„Wenn es kein interaktives Element ist, taucht die aktuelle Seite nicht in der Tab-Reihenfolge auf. Das könnte Nutzer verwirren, dass sich das Hauptmenü von Seite zu Seite ändert. …“](https://forum.selfhtml.org/self/2023/dec/19/unverstandnis-von-css-eigenschaften-hintergrund-der-aktiven-navigationsauswahl-andern/1812249#m1812249) Für den Navigationsblock hat Gunnar auch gleich [ein vollständiges Codebeispiel](https://forum.selfhtml.org/self/2023/dec/19/unverstandnis-von-css-eigenschaften-hintergrund-der-aktiven-navigationsauswahl-andern/1812234#m1812234) geliefert (*ganz unten* in seinem Posting). Das entspricht im Wesentlichen dem entsprechenden Abschnitt in Rolfs Beispielcode, außer, dass das Attribut `aria-current="page"` korrekterweise dem Link selbst verpasst wurde, anstatt, wie bei Rolf, dem Container des Links (dem `li`). Hier noch einmal Gunnars letztgültiger Codevorschlag. ~~~html <nav class="topnav"> <a href="./vorstellung.html">Über uns</a> <a href="./index.html">Startseite</a> <a href="#main" aria-current="page">Arbeit mit Kindern</a> <a href="./jugendarbeit.html">Arbeit mit Jugendlichen</a> <a href="./kontaktaufnahme.html">Kontakt</a> <a href="./impressum.html">Impressum</a> </nav> <main id="main"> ⋮ ~~~ Im CSS selektierst du den Link zur aktuell geladenen Seite dann mit Gunnars CSS-Code. ~~~css .topnav a[aria-current="page"] { background-color: #04AA6D; color: white; } ~~~ Ich würde vermuten, dass als Selektor auch `nav a[aria-current="page"]` reichen dürfte, denn mehr als ein `nav`-Block ist recht unüblich (auch wenn das dennoch möglich ist). **[edit]:** > Ich bin richtig erkältet und schlafe unter Tags viel. Gute Besserung. Tschö, Auge -- „Habe ich mir das nur eingebildet, oder kann der kleine Hund wirklich sprechen?“ fragte Schnapper. „Er behauptet, nicht dazu imstande zu sein“ erwiderte Victor. Schnapper zögerte (…) „Nun …“ sagte er schließlich, „ich schätze, er muss es am besten wissen.“ Terry Prattchett, Voll im Bilde

Hallo > So sieht meine index.html **nun** aus: > > ~~~html > <nav> > <ul> > <li><a aria-current="page">Startseite</a></li> > <li><a href="./vorstellung.html">Über uns</a></li> > <li><a href="./kinder.html">Arbeit mit Kindern</a></li> > <li><a href="./jugend.html">Arbeit mit Jugendlichen</a></li> > <li><a href="./kontaktaufnahme.html">Kontakt</a></li> > <li><a href="./impressum.html">Impressum</a></li> > </ul> > </nav> > ~~~ Besser, aber weiterhin verbesserungsfähig. Schaue dir bitte [Rolfs Codevorschlag](https://jsfiddle.net/Rolf_b/fc7dnbrw/) an. Er lässt dem `<nav>` einen Container `<main>` folgen, der den eigentlichen Inhalt der Seite umfasst. Dieser hat zudem eine ID, die man in der Navigation dem Link zur gegenwärtig gelandenen Seite als Linkziel zuweisen kann. Damit hat dieser Link ein Linkziel und verschwindet bei der Tastaturbedienung somit nicht aus der Linkliste der Navigation [^1]. [^1]: Aus einem von Gunnars Beiträgen: [„Wenn es kein interaktives Element ist, taucht die aktuelle Seite nicht in der Tab-Reihenfolge auf. Das könnte Nutzer verwirren, dass sich das Hauptmenü von Seite zu Seite ändert. …“](https://forum.selfhtml.org/self/2023/dec/19/unverstandnis-von-css-eigenschaften-hintergrund-der-aktiven-navigationsauswahl-andern/1812249#m1812249) Für den Navigationsblock hat Gunnar auch gleich [ein vollständiges Codebeispiel](https://forum.selfhtml.org/self/2023/dec/19/unverstandnis-von-css-eigenschaften-hintergrund-der-aktiven-navigationsauswahl-andern/1812234#m1812234) geliefert (*ganz unten* in seinem Posting). Das entspricht im Wesentlichen dem entsprechenden Abschnitt in Rolfs Beispielcode, außer, dass das Attribut `aria-current="page"` korrekterweise dem Link selbst verpasst wurde, anstatt, wie bei Rolf, dem Container des Links (dem `li`). Hier noch einmal Gunnars letztgültiger Codevorschlag. ~~~html <nav class="topnav"> <a href="./vorstellung.html">Über uns</a> <a href="./index.html">Startseite</a> <a href="#main" aria-current="page">Arbeit mit Kindern</a> <a href="./jugendarbeit.html">Arbeit mit Jugendlichen</a> <a href="./kontaktaufnahme.html">Kontakt</a> <a href="./impressum.html">Impressum</a> </nav> <main id="main"> ⋮ ~~~ Im CSS selektierst du den Link zur aktuell geladenen Seite dann mit Gunnars CSS-Code. ~~~css .topnav a[aria-current="page"] { background-color: #04AA6D; color: white; } ~~~ Ich würde vermuten, dass als Selektor auch `nav a[aria-current="page"]` reichen dürfte, denn mehr als ein `nav`-Block ist recht unüblich (auch wenn das dennoch möglich ist). Tschö, Auge -- „Habe ich mir das nur eingebildet, oder kann der kleine Hund wirklich sprechen?“ fragte Schnapper. „Er behauptet, nicht dazu imstande zu sein“ erwiderte Victor. Schnapper zögerte (…) „Nun …“ sagte er schließlich, „ich schätze, er muss es am besten wissen.“ Terry Prattchett, Voll im Bilde