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

Beitrag lesen

problematische Seite

Hallo Auge, auch Dir: danke! 😀

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?

Jawohl. Es handelt sich nicht um eine dynamische, damit also um eine statische Seite

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

Entschuldige Auge, Du hast offensichtlich verstanden, was zu tun ist, aber ich kann Dir noch nicht folgen.

Ich versuche mal mit meinen Worten wiederzugeben, was ich (glaube) verstanden zu haben.

  1. CSS ist eigentlich nicht das Mittel der Wahl (für meinen Fall), aber in Verbindung mit Änderungen bei den Links im HTML und Erweiterungen im CSS würde es funktionieren.

  2. Da ich eine statische Seite betreibe, nehme ich Änderungen im HTML vor.

Aber folgendes ist mir unklar:

  1. Was sind "echte Seiten" und wie notiere ich deren Formatierungen?

  2. Ich muss vermutlich im CSS neue "Klassen" definieren? Wie das korrekt geht, weiß ich aber ehrlich gesagt, nicht. Ich definiere eine CSS-Klasse als so etwas:

.center { max-width: 840px; margin: auto; }

Da habe ich mich korrekt ausgedrückt?

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