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

Beitrag lesen

problematische Seite

Hallo

Was heißt hier {:.language-html.bad}, bzw. {:.language-html.good}?

Damit kann man hier im Forum in einem Postingtext enthaltenen Code als gut oder schlecht markieren.

Hier übrigens noch mal der Code für meine index.html (denn die aktuelle Version ist ja nicht online, sondern nur lokal verfügbar:

<!DOCTYPE html>
<html lang="de">
  <!-- Dokumentkopf -->

  <body>
    <div class="center">
      <!-- Platzhalter für Seitenkopf und Navigation -->
      <main id="main"></main>
      <br />
      <div class="ueberschrift">
        <h1 class="ueberschrift">
          Herzlich willkommen auf der Startseite <br />des Sozialwerks
          <b>KONTAKT e.V.</b>, Villingen-Schwenningen!
        </h1>
      </div>
      <!-- mehr Inhalt -->
    </div>
  </body>
</html>

Ähhh, der Inhalt der Seite (bei dir die Seitenüberschrift und Textabsätze) sollten Inhalt des Elements <main> sein, nicht auf dieses folgen. Dann brauchst du auch das einsame <br> zwischen Navigation und Überschrift nicht mehr.

<!DOCTYPE html>
<html lang="de">
  <!-- Dokumentkopf -->

  <body>
    <div class="center">
      <!-- Platzhalter für Seitenkopf und Navigation -->
      <main id="main">
        <div class="ueberschrift">
          <h1 class="ueberschrift">
            Herzlich willkommen auf der Startseite <br />des Sozialwerks
            <b>KONTAKT e.V.</b>, Villingen-Schwenningen!
          </h1>
        </div>
        <!-- mehr Inhalt -->
      </main>
    </div>
  </body>
</html>

Ach ja, wie schon von verschiedenen Teilnehmern angemerkt, brauchst du im aktuellen Stand das <div class="ueberschrift"> um die <h1 class="ueberschrift"> nicht, wenn du damit nicht noch etwas anderes zu tun gedenkst, was uns im zugänglichen Code verborgen bleibt. Du kannst alle Formatierungen auch direkt und nur der Überschrift zuweisen. Zudem sollte es in einem Dokument nur eine <h1> geben (dazu gibt es allerdings verschiedene Meinungen. Wenn es nur eine <h1> gibt, ist diese im Dokument per CSS auch mit dem Elementtyp-Selektor auffindbar. Man braucht dann also auch die Klasse „ueberschrift“ nicht. Bleibt:

<!DOCTYPE html>
<html lang="de">
  <!-- Dokumentkopf -->

  <body>
    <div class="center">
      <!-- Platzhalter für Seitenkopf und Navigation -->
      <main id="main">
        <h1>
          Herzlich willkommen auf der Startseite <br />des Sozialwerks
          <b>KONTAKT e.V.</b>, Villingen-Schwenningen!
        </h1>
        <!-- mehr Inhalt -->
      </main>
    </div>
  </body>
</html>

Übrigens, nur als Anmerkung, deine Fettformatierung des Vereinsnamens in der Überschrift geht in der von den Browsern standardmäßig vorgegebenen Fettformatierung der Überschrift selbst verloren.

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
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