Antwort an „Auge“ verfassen

SELF-Forum

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

Auge 20.12.2023 20:58

css
html

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