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

Beitrag lesen

problematische Seite

Hallo

Also: ich hätte gerne, dass der aktiv ausgewählte Navigationsbereich (z. B. https://www.kontakt-vs.de/kinderarbeit.html in der gleichen (türkisgrünen) Farbe hinterlegt bleibt, bis der Navigationsbereich gewechselt wird. Derzeit geschieht dies ja nur, solange die Maus in der Navigationsposition schwebt; das dürfte wohl in diesem Bereich (ungefähr) der "standard.css"

.topnav a:hover {
   background-color: #169f94;
   color: black;
}

.topnav a.active {
   background-color: #04AA6D;
   color: white;
}

zu ändern sein?

Fangen wir vorne an. Die Pseudoklassen, die du zu benutzen gedenkst, sind (unter anderem) auch für Links gedacht. Allerdings können sie nicht die von dir definierte Aufgabe erfüllen. Wo der Einsatzzweck für :hover, :focus [1] oder :visited klar sein dürfte, ist das bei :active oft nicht so klar.

Mit :active formatiert man einen Link in dem Zustand des angeklickt seins, also z.B. bei gedrückt gehaltener linker Maustaste. Dieses :activehat absolut nichts damit zu tun, dass genau das Dokument geladen wurde, dass das Linkziel des letzten Kicks auf der zuletzt geladenen Seite war. Von soetwas weiß CSS üblicherweise nichts. Ausnahme davon ist eine ID (ein „Fragment“) als Linkziel (zum Beispiel <a href="#top">).

Wenn du also in der Navigation zu zur Zeit geladene Seite kennzeichnen willst, musst du sie im HTML-Quelltext kenntlich machen. Du kannst dazu im Link zur aktuellen Seite eine ID setzen oder das Attribut href weglassen. In beiden Fällen musst du dazu entweder bei statischen Seiten den HTML-Quelltext anpassen oder mit einer Programmiersprache die nötigen Änderungen einfügen. Auf dem Server kämen dazu zum Beispiel PHP, Python oder Perl infrage, im Browser selbst natürlich JavaScript. Die Endung .html lässt mich statische Seiten vermuten. Ist diese Annahme korrekt?

Im CSS kannst du einen Link mit einer ID als a#deineID {} ansprechen. Bei weggelassenem Atttribut hrefist das etwas aufwendiger. Du kannst diese Konstruktion auf verschiedene Arten ansprechen.

  1. du kannst mit … a:not([href]) {} die expliziten Formatierungen für die aktuell geladene Seite notieren, die Formatierungen für „echte“ Links sollten vorher notiert sein
  2. du kannst aber auch erst einmal die für die aktive Seite nötigen Formatierungen mit … a {} festlegen und für alle Links mit href hernach, soweit nötig, diese mit … a:link {}, a:visited {}, a:focus,a:hover {} und a:active {} überschreiben

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

  1. Da wo man die Regeln für :hover definiert, muss man das auch für :focus tun. Man kann dabei für :focus die gleichen Regeln wie für :hover anwenden, um für Tastaturbedienung das gleiche Verhalten wie für Maus- oder Touchbedienung zu erreichen. ↩︎

0 117

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

HTML_go
  • javascript
  1. 0
    Rolf B
    1. 0
      HTML_go
  2. 0
    Auge
    • css
    • html
    1. 0
      Rolf B
      1. 0
        Auge
        1. 0
          Gunnar Bittersmann
          • html
      2. 0

        Navigations-Tutorial im SELF-Wiki

        Matthias Scharwies
        1. 0
          Gunnar Bittersmann
          • aria
          • html
          • ux
        2. 0
          HTML_go
          1. 0
            Auge
      3. 0
        Gunnar Bittersmann
        • begriff
        • html
    2. 0
      Gunnar Bittersmann
      • css
    3. 0
      HTML_go
      1. 0
        Auge
        1. 0
          Gunnar Bittersmann
          • html
  3. 0
    Gunnar Bittersmann
    • css
    • html
    1. 0
      HTML_go
      1. 0
        Gunnar Bittersmann
        1. 0
          Matthias Scharwies
        2. 0
          HTML_go
          1. 0
            Gunnar Bittersmann
            • grafik
            • suchmaschinen
            • typografie
            1. 0
              Rolf B
              1. 0
                Gunnar Bittersmann
                • grafik
            2. 0
              HTML_go
            3. 0
              HTML_go
              1. 0
                Gunnar Bittersmann
                • css
                • grafik
                • typografie
                1. 0
                  HTML_go
                  1. 0

                    Logo als SVG

                    Matthias Scharwies
                    1. 0
                      HTML_go
                      1. 0
                        HTML_go
                  2. 0
                    Gunnar Bittersmann
                    • grafik
                    1. 0
                      Rolf B
                      1. 0
                        HTML_go
                      2. 0
                        Gunnar Bittersmann
                        • menschelei
                        1. 0
                          MudGuard
                    2. 0
                      HTML_go
                      1. 0
                        Gunnar Bittersmann
                        1. 0
                          HTML_go
              2. 0
                HTML_go
                1. 0

                  ein Projekt nach Prioritäten sortieren

                  Matthias Scharwies
                  1. 0
                    HTML_go
                    1. 0
                      Auge
                      1. 0
                        HTML_go
                        1. 0
                          Auge
            4. 0
              HTML_go
              1. 0
                HTML_go
                1. 0
                  HTML_go
                  1. 0
                    Gunnar Bittersmann
                    • css
                    1. 0
                      HTML_go
                2. 0
                  Gunnar Bittersmann
                  • css
                  • font
                  • typografie
                  1. 0
                    HTML_go
                    1. 0
                      HTML_go
                      1. 0

                        Begriffe lokal, google-Fonts

                        Matthias Scharwies
                        1. 0
                          HTML_go
                          1. 0
                            Matthias Scharwies
                            1. 0
                              Rolf B
                              1. 0
                                Matthias Scharwies
                            2. 0
                              HTML_go
                        2. 0
                          Gunnar Bittersmann
                          • css
                          • font
                          1. 0
                            Gunnar Bittersmann
      2. 0
        Rolf B
      3. 0
        Auge
        1. 0
          HTML_go
          1. 0
            Auge
            1. 0
              Gunnar Bittersmann
              • css
            2. 0
              HTML_go
              1. 0
                Gunnar Bittersmann
                • css
                • font
                • html
                1. 0
                  HTML_go
  4. 0
    Rolf B
    1. 0
      HTML_go
      1. 0
        Gunnar Bittersmann
        • css
        1. 0
          HTML_go
        2. 0
          HTML_go
          • browser
          • css
    2. 1
      Gunnar Bittersmann
      • css
      1. 0
        Rolf B
        1. 0
          HTML_go
      2. 0
        Auge
      3. 0
        Gunnar Bittersmann
      4. 0
        HTML_go
        1. 0
          Auge
          • browser
          • css
          1. 0
            Gunnar Bittersmann
            1. 0
              Auge
              1. 0
                Gunnar Bittersmann
        2. 0
          Gunnar Bittersmann
          1. 0
            HTML_go
            1. 0
              Gunnar Bittersmann
              1. 0
                HTML_go
  5. 0
    Gunnar Bittersmann
    • barrierefreiheit
    • html
    • performance
    1. 0
      HTML_go
    2. 0
      HTML_go
      1. 0
        HTML_go
        1. 0
          Rolf B
          1. 0
            HTML_go
            1. 0
              Gunnar Bittersmann
              • markdown
              • zu diesem forum
              1. 0
                HTML_go
      2. 0
        HTML_go
      3. 0
        Gunnar Bittersmann
        • html
        • performance
        • typografie
        1. 0
          HTML_go
          1. 0
            Gunnar Bittersmann
            • css
            • html
            • typografie
            1. 0
              HTML_go
              1. 0
                Rolf B
                1. 0
                  HTML_go
                  1. 0
                    Rolf B
                    1. 0
                      Gunnar Bittersmann
                      • css
                  2. 0
                    Tabellenkalk
                    1. 0
                      Gunnar Bittersmann
                      • css
                      1. 0

                        Fehler im verlinkten Adventkalenderartikel

                        Auge
                        • adventskalender
                        • php
                        1. 0
                          Rolf B
                          1. 0
                            Matthias Scharwies
                            • adventskalender
                            • php
                            • sonstiges
                            1. 0
                              Rolf B
                              1. 0
                                Matthias Scharwies
                    2. 0
                      HTML_go
                2. 0
                  Gunnar Bittersmann
                  • inclusive design
                  1. 0
                    Gunnar Bittersmann
    3. 0
      Gunnar Bittersmann
      • star trek
      • typografie
      1. 0
        Gunnar Bittersmann