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

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

problematische Seite

Guten Tag miteinander,

nach langen Jahren suche ich hier im Forum mal wieder Rat.

Es geht um die Navigationsleiste dieser "nur" in HTML und CSS erstellten Website: https://www.kontakt-vs.de.

Ach ja noch was: das CSS hat größtenteils ein Bekannter erstellt, ich kenne mich damit (noch) zu wenig aus. Und Manpower ist rar und ich sollte ja auch mal was dazulernen; also frage ich hier, nachdem ich in der Suche nicht erfolgreich war ...

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?

Vielen Dank für Hilfestellung!

Gruß

Holger

akzeptierte Antworten

  1. problematische Seite

    Hallo HTML_go,

    hinterlegt bleibt, bis der Navigationsbereich gewechselt wird.

    Was meinst du mit Wechseln des Navigationsbereichs? Möchtest Du, dass im Navigationsbereich diejenige Seite, die gerade angezeigt wird, türkis hervorgehoben ist und nur dann, wenn eine Navigation beginnt (mit Maus oder Tastatur selbstverständlich!), das ausgewählte Navigationsziel hervorgehoben wird?

    Rolf

    --
    sumpsi - posui - obstruxi
    1. problematische Seite

      Guten Tag Rolf, danke 😀

      hm, bin mir jetzt nicht sicher, ob ich Dich richtig verstehe. ;-) Vielleicht zeigt ein Bild das deutlicher?aktiver Bereich in der Navigationsleiste bleibt türkis, bis der Bereich (z.B. von "Arbeit mit Kindern" zu "Kontakt" geändert wird

      Das soll natürlich auch auf dem Smartphone / Tablett funktionieren; deswegen nicht nur mit

      Maus und Tastatur,

      sondern natürlich auch, wenn den Bereich mit den Fingern auswählt wird.

  2. 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. ↩︎

    1. problematische Seite

      Hallo Auge,

      die eigentliche Seite hatte ich noch gar nicht angeschaut (war bisher am Handy).

      Da steht vor allem .active (eine Klasse, die man explizit setzen muss) und nicht :active (eine vom Browser gesetzte Pseudoklasse), das ist ein Unterschied!

      Der Seitenautor könnte also auf den jeweiligen Seiten dem passenden Navigationspunkt ein class="active" zuweisen. Was aber, meine ich, suboptimal ist, denn eigentlich möchte man ja auf der Seite zur Kinderarbeit – äh – Arbeit mit Kinden ja gar keinen Link auf diese Seite haben. Statt einem <a class="active"> stünde da besser ein ähnlich gestylter span.

      Und das <div class="topnav"> kann bei der Gelegenheit dann gleich zu einem <nav> Element geändert werden. Es gibt ja eh nur eine Navigation auf der Seite. Im CSS ersetzt man dann den Klassenselektor .topnav einfach durch den Elementselektor nav.

      Für die Links dann bitte auch die :focus-Pseudoklasse nicht vergessen, damit die Tastaturbenutzer ebenfalls in den Genuss des Highlights kommen.

      Rolf

      --
      sumpsi - posui - obstruxi
      1. problematische Seite

        Hallo

        Da steht vor allem .active (eine Klasse, die man explizit setzen muss) und nicht :active (eine vom Browser gesetzte Pseudoklasse), das ist ein Unterschied!

        Das stimmt, das zuvor notierte a:hover ließ mich aber einen Typo (a.active statt a:active) vermuten.

        Der Seitenautor könnte also auf den jeweiligen Seiten dem passenden Navigationspunkt ein class="active" zuweisen.

        Das geht natürlich auch, hier wäre eine ID vermutlich besser, falls es nicht mehrere gleichartige Links zur aktuell geladenen Seite gibt.

        Was aber, meine ich, suboptimal ist, denn eigentlich möchte man ja auf der Seite zur Kinderarbeit – äh – Arbeit mit Kinden ja gar keinen Link auf diese Seite haben. Statt einem <a class="active"> stünde da besser ein ähnlich gestylter span.

        … oder ein Link ohne href, also <a>Arbeit mit Kindern</a>.

        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. problematische Seite

          @@Auge

          Der Seitenautor könnte also auf den jeweiligen Seiten dem passenden Navigationspunkt ein class="active" zuweisen.

          Das geht natürlich auch, hier wäre eine ID vermutlich besser

          Weder, noch.

          aria-current="page" ist das Mittel der Wahl.

          🖖 Живіть довго і процвітайте

          --
          Ad astra per aspera
      2. problematische Seite

        Servus!

        Hallo Auge,

        die eigentliche Seite hatte ich noch gar nicht angeschaut (war bisher am Handy).

        Da steht vor allem .active (eine Klasse, die man explizit setzen muss) und nicht :active (eine vom Browser gesetzte Pseudoklasse), das ist ein Unterschied!

        Der Seitenautor könnte also auf den jeweiligen Seiten dem passenden Navigationspunkt ein class="active" zuweisen. Was aber, meine ich, suboptimal ist, denn eigentlich möchte man ja auf der Seite zur Kinderarbeit – äh – Arbeit mit Kinden ja gar keinen Link auf diese Seite haben. Statt einem <a class="active"> stünde da besser ein ähnlich gestylter span.

        Da gibt es ein Tutorial, das erklärt, wie man's macht:

        Navigation/Grundstruktur

        Herzliche Grüße

        Matthias Scharwies

        --
        Die Signatur findet sich auf der Rückseite des Beitrags.
        1. problematische Seite

          @@Matthias Scharwies

          Ich bin nicht sicher, ob das im Tutorial gesagte

          <li><a aria-current="page">aktuelle Seite</a></li>
          

          so sinnvoll ist. Ohne href-Atrribut ist das a-Element kein Link, d.h. kein interaktives Element. Ich weiß nicht, ob aria-current an einem nicht-interaktiven Element einen Mehrwert bietet. Erlaubt ist es aber, siehe Global ARIA attributes.

          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. Womöglich ist es besser, die aktuelle Seite als Link zu belassen (dann zum Hauptinhalt der auf der Seite) und als „aktuelle Seite“ ansagen zu lassen.

          Wenn man da drei Screenreader-Nutzer fragt, bekommt man eventuell vier verschiedene Antworten.

          🖖 Живіть довго і процвітайте

          --
          Ad astra per aspera
        2. problematische Seite

          Hallo Ihr vielen Helfer!

          Sorry für mein langsames Feedback. Ich bin richtig erkältet und schlafe unter Tags viel.

          @Matthias: Vielen Dank für den Link oben https://wiki.selfhtml.org/wiki/Navigation/Grundstruktur!

          Habe bislang die index.html geändert; jetzt stimmt natürlich das CSS noch nicht. Da bin ich noch dran, am "Ausprobieren". Ich melde mich, wenn ich weitere Fragen habe; und die kommen sicherlich! 😉

          So sieht meine index.html nun aus:

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

          Davor aber so:

          <div class="topnav">
             <a href="./index.html">Startseite</a>
             <a href="./vorstellung.html">Über uns</a>
             <a href="./kinderarbeit.html">Arbeit mit Kindern</a>
             <a href="./jugendarbeit.html">Arbeit mit Jugendlichen</a>
             <a href="./kontaktaufnahme.html">Kontakt</a>
             <a href="./impressum.html">Impressum</a>
           </div>
          

          ...

          1. problematische Seite

            Hallo

            So sieht meine index.html nun aus:

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

            Für den Navigationsblock hat Gunnar auch gleich ein vollständiges Codebeispiel 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.

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

            .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

            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. …“ ↩︎

      3. problematische Seite

        @@Rolf B

        Da steht vor allem .active (eine Klasse, die man explizit setzen muss) und nicht :active (eine vom Browser gesetzte Pseudoklasse), das ist ein Unterschied!

        Ja, das ist es.

        Und es ist IHMO nie gut, die aktuelle Seite "active" zu nennen. Wenn man eine Klasse dafür braucht, dann sollte sie besser "current" heißen.

        Spoiler: Man braucht keine solche Klasse.

        🖖 Живіть довго і процвітайте

        --
        Ad astra per aspera
    2. problematische Seite

      @@Auge

      Da wo man die Regeln für :hover definiert, muss man das auch für :focus tun.

      Nicht unbedingt. Wenn man die browsereigene Kennzeichnung des Fokus nicht kaputtmacht, muss man für :focus nichts weiter angeben.

      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.

      Was man nicht unbedingt will.


      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

      Es gibt auch die Pseudoklasse :any-link.

      (Die Vergabe des Namens :link zur Selektion unbesuchter Links war eine Eselei.)

      🖖 Живіть довго і процвітайте

      --
      Ad astra per aspera
    3. 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?

      1. problematische Seite

        Hallo

        Ich weiß nicht, wie weit dich die teilweise sehr ausführlichen Antworten und Ergänzungen der anderen Teilnehmer gebracht haben. Rolf hat offensichtlich eine Zusammenfassung der Argumente als Beispielcode bereitgestellt. Ich versuche dennoch, auf einzelne deiner Fragen, auf die ich in den anderen Beiträgen keine offensichtlichen Antworten gesehen habe, einzugehen.

        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

        Gut.

        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.

        CSS ist sehr wohl das Mittel der Wahl. Allerdings basiert „das Funktionieren“ von CSS nur im Zusammenspiel mit HTML und eventuell weiteren eingesetzten, den HTML-Output manipulierenden Techniken. Zudem muss das HTML so strukturiert sein, dass CSS seine Möglichkeiten ausspielen kann.

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

        Korrekt.

        Aber folgendes ist mir unklar:

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

        Da habe ich mich wohl etwas unglücklich ausgedrückt. Es geht ja auch nicht um „echte Seiten“, sondern es ging mir um Links (<a>) mit href-Attributen zu Linkzielen in selben Dokument (zu Sprungankern/Seitenabschnitten) oder zu anderen Dokumenten), die ich zu stark verkürzend als „echte Links“ bezeichnet habe. Dazu im Gegensatz wären Links ohne href-Attribut, wie ich sie vorschlug.

        Die Diskussion ist ja mittlerweile weiter und Gunnar empfiehlt (mit seinen auf mehrere Beiträge verteilten Argumenten) richtigerweise, in der Hauptnavigation dem Link zur gegenwärtig geladenen Seite als Linkziel den Hauptinhalt zu verpassen. Somit hat er ein Linkziel und wird also in allen Zugriffsarten auf die Seite auch als Link erkannt.

        Damit hat sich auch das Thema Link ohne href („unechter Link“) und Links mit href („echte Links“) erledigt.

        1. Ich muss vermutlich im CSS neue "Klassen" definieren? Wie das korrekt geht, weiß ich aber ehrlich gesagt, nicht.

        Abgesehen von der Tatsache, dass du zur Erfüllung der aktuellen Aufgabe keine weiteren Klassen definieren musst, sind Klassen im HTML einfach nur im Attribut class eines Elements zu notieren. Sollten es mehrere Klassen sein, die einem Element zugewiesen werden, sind diese durch Leerzeichen getrennt in einem class-Attribut zu notieren (zum Beispiel <div class="produkt variante">…</div>).

        Ich definiere eine CSS-Klasse als so etwas:

        Die Klasse selbst definierst du so nicht, aber die Regeln der Eigenschaften für Elemente der Klasse .center definierst du genau so.

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

        Allerdings sollte sich die Benennung der Klasse nicht nach deren gegenwärtiger Wunscherscheinung richten. Irgendwann soll das entsprechende Element (body?) nicht mehr zentriert dargestellt werden und dann fängst du an, in allen betroffenen HTML-Dokumenten den Namen der Klasse zu ändern, weil er nicht mehr passt oder du lässt den Namen, wie er ist und wunderst dich ein paar Monate später über den Namen, der nichts mehr mit der realen Darstellung zu tun hat – geschweige denn, warum das nicht zusammenpasst. Dass du die in vielen Fällen nicht brauchst – body kannst du auch per body {} selektieren – sei jetzt mal dahingestellt. Elemente lassen sich ja auf vielerlei Art per CSS selektieren und Klassen sind nicht nur dazu da, Elemente per CSS selektierbar zu machen. Sie dienen auch dazu, gleichartige Elemente per JavaScript zu selektieren.

        Da habe ich mich korrekt ausgedrückt?

        Soweit ja.

        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. problematische Seite

          @@Auge

          die ich zu stark verkürzend als „echte Links“ bezeichnet habe.

          Das kannst du noch weiter verkürzen zu „Links“.

          Dazu im Gegensatz wären Links ohne href-Attribut, wie ich sie vorschlug.

          a-Elemente ohne href-Attribut sind keine Links. In der Spec liest sich das so:

          “If the a element has an href attribute, then it represents a hyperlink (a hypertext anchor) labeled by its contents.

          “If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element's contents.”

          a-Elemente ohne href-Attribut sind kaum was anderes als span. Nur dass sie sich leichter handhaben lassen, wenn man sie zu Links machen möchte – sei es mit JavaScript oder PHP (einfach das href-Attribut hinzufügen anstatt mühsam das DOM umzubauen).

          🖖 Живіть довго і процвітайте

          --
          Ad astra per aspera
  3. problematische Seite

    @@HTML_go

    Also: ich hätte gerne, dass der aktiv ausgewählte Navigationsbereich (z. B. https://www.kontakt-vs.de/kinderarbeit.html

    „Kinderarbeit“ ist aber auch ein dähmlich unglücklich gewählter Begriff für „Arbeit mit Kindern“. Ich denke, das solltet ihr ändern. Dabei nicht die Weiterleitungen vergessen, damit bestehende Lesezeichen von Nutzern weiterhin funktionieren.

    in der gleichen (türkisgrünen) Farbe hinterlegt bleibt, bis der Navigationsbereich gewechselt wird.

    Dazu muss die aktuell gewählte Seite irgendwie gekennzeichnet sein. Am besten so, dass es auch Nutzern zugute kommt, die sie Seite nicht visuell wahrnehmen: nicht mit einer Klasse „active“, sondern mit aria-current="page"-Attribut am jeweiligen Link, für die betreffende Seite bspw.:

    <nav class="topnav">
      <a href="./vorstellung.html">Über uns</a>
      <a href="./index.html">Startseite</a>
      <a href="./kinderarbeit.html" 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>
    

    Im Stylesheet dann per Attributselektor ausgewählt:

    .topnav a[aria-current="page"] {
       background-color: #04AA6D;
       color: white;
    }
    

    Das <div> sollte ein <nav>-Element sein, damit Screenreader-Nutzer es also solches angesagt bekommen und leicht dorthin navigieren können. Auf die Klasse könntest du verzichten und das Ding in CSS per Elementtyp auswählen.

    Kein Muss, aber ein Nice-to-have: Das Menü als Liste (<ul>, <li>) auszeichen.

    Ebenfalls: Die aktuelle Seite nicht verlinken; stattdessen einen seiteninternen Link auf den Hauptbereich:

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

    🖖 Живіть довго і процвітайте

    --
    Ad astra per aspera
    1. problematische Seite

      @@HTML_go

      „Kinderarbeit“ ist aber auch ein dähmlich unglücklich gewählter Begriff für „Arbeit mit Kindern“. Ich denke, das solltet ihr ändern. Dabei nicht die Weiterleitungen vergessen, damit bestehende Lesezeichen von Nutzern weiterhin funktionieren.

      Ja, abgesehen davon, dass man "dämlich" ohne "H" in der Mitte schreibt, hast Du vollkommen recht; ich habe das jetzt auch radikal geändert. Jetzt heißt es einfach "kinder.html" und "jugend.html". Danke für den guten Tipp! 👍

      Dazu muss die aktuell gewählte Seite irgendwie gekennzeichnet sein. Am besten so, dass es auch Nutzern zugute kommt, die sie Seite nicht visuell wahrnehmen: nicht mit einer Klasse „active“, sondern mit aria-current="page"-Attribut am jeweiligen Link, für die betreffende Seite bspw.:

      <nav class="topnav">
        <a href="./vorstellung.html">Über uns</a>
        <a href="./index.html">Startseite</a>
        <a href="./kinderarbeit.html" 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>
      

      Auch das habe ich umgesetzt. Hat alles geklappt; nur die Startseite lädt (lokal) noch so, als ob gar kein CSS steuern würde: LINKS: Startseite mit CSS-Fehler | RECHTS: alle anderen Seiten werden korrekt ausgeliefert

      Dabei habe ich kontrolliert, ob die index.html im richtigen Ordner (derzeit/home/holger/HOMEPAGE/KONTAKT_eV/TEST_self_html/) liegt. Natürlich ist sie nach den Änderungen auch gespeichert worden. Und natürlich Refresh mit F5 und Strg+R ...

      Im Stylesheet dann per Attributselektor ausgewählt:

      .topnav a[aria-current="page"] {
         background-color: #04AA6D;
         color: white;
      }
      

      Hier habe ich aus color: white; aber color: black; gemacht; so ist es ja auch bislang.

      Das <div> sollte ein <nav>-Element sein, damit Screenreader-Nutzer es also solches angesagt bekommen und leicht dorthin navigieren können. Auf die Klasse könntest du verzichten und das Ding in CSS per Elementtyp auswählen.

      Ja, das <div> habe ich in ein <nav> geändert. Was heißt hier

      {:.language-html.bad}, bzw. {:.language-html.good}?

      Kein Muss, aber ein Nice-to-have: Das Menü als Liste (<ul>, <li>) auszeichen.

      Ebenfalls: Die aktuelle Seite nicht verlinken; stattdessen einen seiteninternen Link auf den Hauptbereich:

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

      Der seiteninterne Link auf den Hauptbereich wird mit <main id="main">erstellt? Muss ich dann nicht auch ins CSS noch was einfügen? 🖖 Живіть довго і процвітайте

      Vielen, vielen Dank für die viele Hilfe. Ich komme der Lösung echt näher. Allerdings habe ich schon den nächsten Post kurz angelesen und jetzt könnte es sein, dass ich nochmal alles über den Haufen werfe. Aber wenn die Seite dann noch besser wird; was soll's! 😉

      Toll übrigens auch, dass Ihr hier im Blick habt, dass auch Menschen mit Seh- oder anderen Behinderungen die Website nutzen können sollen! 👍

      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">
        <head>
          <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
          <meta charset="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <meta
            name="description"
            content="Startseite | KONTAKT e.V. | Wer oder was ist KONTAKT e.V.?"
          />
          <meta
            name="keywords"
            content="KONTAKT Villingen-Schwenningen e.V., soziale Arbeit, Sozialwerk für Prävention und Integration, Kids Live, Lights On, Jugendarbeit, Kinderarbeit, Integration, Migration, Suchtprävention"
          />
          <meta name="author" content="Holger" />
          <meta name="robots" content="index, follow" />
          <meta name="revisit-after" content="1 day" />
          <meta name="msapplication-square70x70logo" content="img/smalltile.png" />
          <meta name="msapplication-square150x150logo" content="img/mediumtile.png" />
          <meta name="msapplication-wide310x150logo" content="img/widetile.png" />
          <meta name="msapplication-square310x310logo" content="img/largetile.png" />
          <title>
            Startseite | Sozialwerk KONTAKT e.V. | 78050 Villingen-Schwenningen
          </title>
          <link href="./standard.css" type="text/css" rel="stylesheet" />
          <link rel="shortcut icon" href="./android-icon.png" sizes="196x196" />
          <link
            rel="apple-touch-icon"
            sizes="57x57"
            href="./apple-touch-icon-57.png"
          />
          <link
            rel="apple-touch-icon"
            sizes="60x60"
            href="./apple-touch-icon-60.png"
          />
          <link
            rel="apple-touch-icon"
            sizes="72x72"
            href="./apple-touch-icon-72.png"
          />
          <link
            rel="apple-touch-icon"
            sizes="76x76"
            href="./apple-touch-icon-76.png"
          />
          <link
            rel="apple-touch-icon"
            sizes="114x114"
            href="./apple-touch-icon-114.png"
          />
          <link
            rel="apple-touch-icon"
            sizes="144x144"
            href="./apple-touch-icon-144.png"
          />
          <link
            rel="apple-touch-icon"
            sizes="152x152"
            href="./apple-touch-icon-152.png"
          />
          <link
            rel="apple-touch-icon"
            sizes="180x180"
            href="./apple-touch-icon-180.png"
          />
          <link
            rel="apple-touch-icon"
            sizes="120x120"
            href="./apple-touch-icon-120x120-precomposed.png"
          />
          <link
            rel="apple-touch-icon"
            sizes="152x152"
            href="./apple-touch-icon-152x152-precomposed.png"
          />
          <link rel="shortcut icon" href="favicon.ico" />
        </head>
      
        <body>
          <div class="center">
            <header class="header">
              <a href="./index.html">
                <img
                  class="headerimage"
                  src="./kontakt.png"
                  alt="Banner Sozialwerk KONTAKT e.V. | 78050 Villingen-Schwenningen"
                />
              </a>
            </header>
            <nav>
              <ul>
                <a href="#main" aria-current="page">Startseite</a>
                <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>
            <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>
            <p>
              Ziel des Vereins ist die soziale Arbeit für und mit Kindern,
              Jugendlichen und deren Familien (Deutsche, Deutschstämmige und
              Zugewanderte gleichermaßen), insbesondere durch die soziale Integration
              und die Förderung des gleichberechtigen Zusammenlebens dieser
              Personengruppen unter gegenseitiger Akzeptanz und Anerkennung der
              jeweils anderen Kulturen.
            </p>
            <p>
              Unsere Vision ist es, Menschen mit Migrationshintergrund bei der
              Integration in die Gesellschaft zu unterstützen. Darüber hinaus ist der
              Verein im Bereich der Bereitstellung präventiver Angebote für junge
              Menschen tätig.
            </p>
            <p>
              Seit 2010 ist KONTAKT e.V. anerkannter Träger der freien Jugendhilfe
              gemäß $75 SGB VIII.
            </p>
          </div>
        </body>
      </html>
      
      Ach ja und am besten auch noch die derzeitige CSS:
      

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

      .headerimage { width: 100%; height: auto; }

      .topnav { background-color: #333; overflow: hidden; /margin-bottom: 18px;/ max-width: 840px; display: flex; /margin-left: auto;/ /margin-right: auto;/ justify-content: center; /zentriert die Blöcke mit den Nav-Links nun auch bei horizontaler Betrachtung; zusammen mit @media screen .../ }

      .topnav a[aria-current="page"] { background-color: #04aa6d; color: black; }

      .topnav a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 1.1em; }

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

      .topnav a.current { background-color: #04aa6d; color: white; }

      .ueberschrift { background-color: #5d5d5d; color: white; text-align: center; padding: 3px 4px; font-size: 1.2em; }

      /KEINE Klasse (da ohne "." vor Bezeichnung -->für "Fließtext - alle Paragraphe (p) werden nun mit einem seitlichen Rahmen versehen/ p { padding-left: 30px; padding-right: 30px; font-size: 1.2em; }

      /KEINE Klasse (da ohne "." vor Bezeichnung -->für "Fließtext - alle Listenbereiche (ul) werden nun mit einem seitlichen Rahmen versehen/ ul { padding-left: 60px; padding-right: 30px; font-size: 1.2em; }

      /bewirkt bei Verschmälerung des Bildschirms ein vertikales Stapeln der Nav-Leiste (topnav)/ @media screen and (max-width: 760px) { .topnav { background-color: #333; overflow: hidden; display: block; }

      .topnav a { float: none; display: block; text-align: center; } }

      1. problematische Seite

        @@HTML_go

        Ja, abgesehen davon, dass man "dämlich" ohne "H" in der Mitte schreibt

        Deshalb hab ich’s ja durchgestrichen. 🤪

        Jetzt heißt es einfach "kinder.html" und "jugend.html". Danke für den guten Tipp! 👍

        Den Tip mit den Weiterleitungen hast du auch umgesetzt?

        (Und sag jetzt nicht, dass man „Tip“ mit zwei P am Ende schreibt!)

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

        Siehe Hilfe > Code

        Allerdings habe ich schon den nächsten Post kurz angelesen und jetzt könnte es sein, dass ich nochmal alles über den Haufen werfe. Aber wenn die Seite dann noch besser wird; was soll's! 😉

        👍

        🖖 Живіть довго і процвітайте

        --
        Ad astra per aspera
        1. problematische Seite

          Servus!

          @@HTML_go

          Allerdings habe ich schon den nächsten Post kurz angelesen und jetzt könnte es sein, dass ich nochmal alles über den Haufen werfe. Aber wenn die Seite dann noch besser wird; was soll's! 😉

          👍

          Noch mehr Futter: HTML/Tutorials/Seitenstrukturierung

          Schau Dir mal Deine Überschriftenkonstruktionen an - die wirst du nach der Lektüre des Artikels bestimmt ändern wollen.

          Langfristig solltet ihr überlegen, euer Logo in SVG zu zeichnen, dann sieht es immer scharf aus (und ihr könnt auch ein 10m langes Banner mit dieser Vektorgrafik bedrucken).

          Fotos mit Kindern sind rechtlich schwierig, aber evtl. eins/ einige in dem die kinder/ Jugendlichen von hinten fotografiert werden?

          Herzliche Grüße

          Matthias Scharwies

          --
          Die Signatur findet sich auf der Rückseite des Beitrags.
        2. problematische Seite

          @@HTML_go

          Danke Gunnar,

          Jetzt heißt es einfach "kinder.html" und "jugend.html". Danke für den guten Tipp! 👍

          Den Tip mit den Weiterleitungen hast du auch umgesetzt?

          Ne, sorry, hatte ich vergessen, danach zu fragen. Muss jetzt erst mal kapieren (Link oben), wie das geht.

          (Und sag jetzt nicht, dass man „Tip“ mit zwei P am Ende schreibt!)

          Leider doch! Früher nicht, - wir sind wohl beide noch vor der Rechtschreibreform geboren?; siehe hier: https://www.duden.de/suchen/dudenonline/tipp. Der Duden sollte schon stimmen.

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

          Siehe Hilfe > Code

          Allerdings habe ich schon den nächsten Post kurz angelesen und jetzt könnte es sein, dass ich nochmal alles über den Haufen werfe. Aber wenn die Seite dann noch besser wird; was soll's! 😉

          Ich bin schon wieder völlig platt. Vermutlich werde ich mir erst morgen Rolfs Umsetzungen anschauen. Schreibt am besten mal nichts weiter; das ist ja irre verwirrend. Ich versuche, einen Ratschlag umzusetzen und dann kommen gleich drei neue! Der Service hier ist einfach bombastisch!👍

          👍

          🖖 Живіть довго і процвітайте

          1. problematische Seite

            @@HTML_go

            Den Tip mit den Weiterleitungen hast du auch umgesetzt?

            Ne, sorry, hatte ich vergessen, danach zu fragen. Muss jetzt erst mal kapieren (Link oben), wie das geht.

            Und ich hatte vergessen zu erwähnen, warum man das bei Umbenennungen von URLs machen sollte – und zwar sofort: damit das Ranking bei Suchmaschinen nicht verlorengeht.


            Schreibt am besten mal nichts weiter; das ist ja irre verwirrend. Ich versuche, einen Ratschlag umzusetzen und dann kommen gleich drei neue! Der Service hier ist einfach bombastisch!👍

            Vielen Dank für die Blumen. Man trifft aber auch nicht immer auf so willfähige Empfänger von Ratschlägen wie dich.

            Deshalb ignoriere ich das mit Nichts-weiter-Schreiben. 😄

            Du gibst im Stylesheet keine Schriftarten an, dann wird die im Browser eingestellte Defaultschrift verwendet – auf den meisten Systemen dürfte das Times New Roman sein. Nicht gerade mein Favorit, sowohl was Lesbarkeit als auch was Schönheit angeht. Dann schon lieber Georgia, wenn’s eine System-Serifenschrift sein soll. Oder eine von Microsofts C-Schriften (Cambria, Calibri, …), die durch MS Office auch auf anderen System (macOS) verfügbar sein könnten. Oder doch ein Webfont.

            Auf jeden Fall ist in allen Browsern die Default-Zeilenhöhe zu gering. Die solltest du (je nach Schriftart) auf das 1.4- bis 1.5-fache der Schriftgröße setzen:

            html { line-height: 1.5 }
            

            Wie @Matthias Scharwies schon erwähnte, ist das Logo unscharf. Da wird eine 758 × 312 Pixel große Grafik auf 840 × 346 hochskaliert – das kann nicht gut aussehen. Im Gegenteil, die Grafik sollte für hochauflösende Monitore (gibt’s heutzutage noch andere?) die doppelte Auflösung (also 1680 × 692) haben.

            (Bei JPEG kann man da mit der Qualität runtergehen, ohne das das sichtbar wird, sodass die Bilddatei gar nicht mal so viel größer sein muss.)

            Wo wir bei JPEG sind: Ich bin nicht sicher, ob das von dir verwendete PNG für diese Art von Grafik das beste Format ist. 175 kB scheint mir zu groß zu sein. Ist das PNG-8 oder PNG-24? Mit JPEG sollte das kleiner werden; mit WebP oder AVIF umso mehr.

            Aber wie @Matthias Scharwies schon sagte, wäre eigentlich eine Vektorgrafik (SVG) das Mittel der Wahl. (Gradienten gehen auch in SVG.)

            🖖 Живіть довго і процвітайте

            --
            Ad astra per aspera
            1. problematische Seite

              Hallo Gunnar,

              Grafik sollte für hochauflösende Monitore (gibt’s heutzutage noch andere?)

              Wenn Du damit die dpi meinst, also 200dpi aufwärts, dann würde ich sagen: Reichlich.

              Mein Monitor hat zwar 3840×1200 Punkte, aber im 32:10 Format auf 49". Das sind unter 100dpi, wenn ich richtig rechne. Viele hochpixelige Monitore haben eine Panelgröße, mit der sie auf 150dpi kommen, was zum Lesen zu viel und zum Staunen zu wenig ist. Richtige Retina-Monitore in brauchbarer Größe sind scheußlich teuer, egal ob mit einem i davor oder nicht.

              Rolf

              --
              sumpsi - posui - obstruxi
              1. problematische Seite

                @@Rolf B

                Grafik sollte für hochauflösende Monitore (gibt’s heutzutage noch andere?)

                Wenn Du damit die dpi meinst, also 200dpi aufwärts, dann würde ich sagen: Reichlich.

                Mein Monitor hat zwar 3840×1200 Punkte, aber im 32:10 Format auf 49". Das sind unter 100dpi, wenn ich richtig rechne. Viele hochpixelige Monitore haben eine Panelgröße, mit der sie auf 150dpi kommen, was zum Lesen zu viel und zum Staunen zu wenig ist. Richtige Retina-Monitore in brauchbarer Größe sind scheußlich teuer, egal ob mit einem i davor oder nicht.

                Jetzt dämmert mir wieder, warum ich es mir abgewöhnt habe, einen externen Monitor an ein MacBook anzuschließen. Warum sollte ich auf ein verwaschenes Display schauen, wenn ich das auch in scharf auf dem MacBook-Schirm haben kann?

                Auf dem MacBook-Schirm fallen unscharfe Grafiken sofort auf.

                Fun fact: Ich hab letztens gerade erst Logos, die als Pixelgrafiken in niedriger Auflösung angeliefert wurden, durch SVGs ausgetauscht.

                🖖 Живіть довго і процвітайте

                --
                Ad astra per aspera
            2. problematische Seite

              Hallo Gunnar,

              danke für Deine Verlinkung auf Deine Hilfestellung, die ich nicht mehr fand!

              Ich habe das jetzt so ins CSS eingearbeitet:

              html {
                  line-height: 1.5;
              }
              
              

              Das sollte so stimmen, oder?

              Holger

            3. problematische Seite

              @@HTML_go

              Den Tip mit den Weiterleitungen hast du auch umgesetzt?

              Ne, sorry, hatte ich vergessen, danach zu fragen. Muss jetzt erst mal kapieren (Link oben), wie das geht.

              Habe mir das gerade mal angeschaut (ich seh' bald den Wald vor lauter Bäumen nicht mehr), aber trotz Übersetzung ins Deutsche (die war furchtbar!) nicht so richtig gerafft, was jetzt in meinem Fall zu tun ist.

              Und ich hatte vergessen zu erwähnen, warum man das bei Umbenennungen von URLs machen sollte – und zwar sofort: damit das Ranking bei Suchmaschinen nicht verlorengeht.

              Und dass ich dass am besten "sofort" machen sollte, macht mir am meisten Sorgen; denn das ist ja nun doch schon ein paar Wochen her und ich habe das noch nicht umgesetzt ... Zumal ich ja auch noch die Seite Audio-Bibel NeÜ betreibe und es da von Links nur so wimmelt! Hilfe, mir brummt der Schädel!


              Schreibt am besten mal nichts weiter; das ist ja irre verwirrend. Ich versuche, einen Ratschlag umzusetzen und dann kommen gleich drei neue! Der Service hier ist einfach bombastisch!👍

              Vielen Dank für die Blumen. Man trifft aber auch nicht immer auf so willfähige Empfänger von Ratschlägen wie dich.

              Deshalb ignoriere ich das mit Nichts-weiter-Schreiben. 😄

              Danke für das Ignorieren meiner vorschnell vorgebrachten Bitte! 😁

              Du gibst im Stylesheet keine Schriftarten an, dann wird die im Browser eingestellte Defaultschrift verwendet – auf den meisten Systemen dürfte das Times New Roman sein. Nicht gerade mein Favorit, sowohl was Lesbarkeit als auch was Schönheit angeht. Dann schon lieber Georgia, wenn’s eine System-Serifenschrift sein soll. Oder eine von Microsofts C-Schriften (Cambria, Calibri, …), die durch MS Office auch auf anderen System (macOS) verfügbar sein könnten. Oder doch ein Webfont.

              Wie wäre das umzusetzen? Vermutlich im Head mit einem <meta>?

              Wie @Matthias Scharwies schon erwähnte, ist das Logo unscharf. Da wird eine 758 × 312 Pixel große Grafik auf 840 × 346 hochskaliert – das kann nicht gut aussehen. Im Gegenteil, die Grafik sollte für hochauflösende Monitore (gibt’s heutzutage noch andere?) die doppelte Auflösung (also 1680 × 692) haben.

              Aber wie @Matthias Scharwies schon sagte, wäre eigentlich eine Vektorgrafik (SVG) das Mittel der Wahl. (Gradienten gehen auch in SVG.)

              Auch das würde ich gerne in Angriff nehmen; aber wie?

              Liebe Grüße

              Holger

              1. problematische Seite

                @@HTML_go

                Du gibst im Stylesheet keine Schriftarten an, dann wird die im Browser eingestellte Defaultschrift verwendet – auf den meisten Systemen dürfte das Times New Roman sein. Nicht gerade mein Favorit, sowohl was Lesbarkeit als auch was Schönheit angeht. Dann schon lieber Georgia, wenn’s eine System-Serifenschrift sein soll. Oder eine von Microsofts C-Schriften (Cambria, Calibri, …), die durch MS Office auch auf anderen System (macOS) verfügbar sein könnten. Oder doch ein Webfont.

                Wie wäre das umzusetzen? Vermutlich im Head mit einem <meta>?

                Nein. Wie ich schrieb: im Stylesheet. Schriftformatierung


                Wie @Matthias Scharwies schon erwähnte, ist das Logo unscharf. Da wird eine 758 × 312 Pixel große Grafik auf 840 × 346 hochskaliert – das kann nicht gut aussehen. Im Gegenteil, die Grafik sollte für hochauflösende Monitore (gibt’s heutzutage noch andere?) die doppelte Auflösung (also 1680 × 692) haben.

                Aber wie @Matthias Scharwies schon sagte, wäre eigentlich eine Vektorgrafik (SVG) das Mittel der Wahl. (Gradienten gehen auch in SVG.)

                Auch das würde ich gerne in Angriff nehmen; aber wie?

                Wie wurde denn die Grafik erstellt? Mit einem Vektorgrafikprogramm wie Illustrator o.ä.? Dann aus diesem als SVG speichern/exportieren. Aber den Quelltext ansehen, der da rauskommt. Der muss vermutlich noch optimiert werden.

                Oder mit einem anderen Bildbearbeitungsprogramm wie Photoshop o.ä.? Ist die Grafik darin vielleicht größer? Oder wurden da Pfade verwendet?

                Kwakoni Yiquan

                --
                Ad astra per aspera
                1. problematische Seite

                  @@HTML_go

                  Du gibst im Stylesheet keine Schriftarten an, dann wird die im Browser eingestellte Defaultschrift verwendet – auf den meisten Systemen dürfte das Times New Roman sein. Nicht gerade mein Favorit, sowohl was Lesbarkeit als auch was Schönheit angeht. Dann schon lieber Georgia, wenn’s eine System-Serifenschrift sein soll. Oder eine von Microsofts C-Schriften (Cambria, Calibri, …), die durch MS Office auch auf anderen System (macOS) verfügbar sein könnten. Oder doch ein Webfont.

                  Wie wäre das umzusetzen? Vermutlich im Head mit einem <meta>?

                  Nein. Wie ich schrieb: im Stylesheet. Schriftformatierung

                  Der Link funktioniert nicht (fehlt vermutlich die schließende, eckige Klammer); aber Du meintest den hier: https://wiki.selfhtml.org/wiki/Typografie/Schriftformatierung? Dennoch, bitte entschuldige, bin ich erschlagen von den Informationen des Links. Aber - Du hast mir ja diesbezüglich zwei mal geantwortet, demnach beweg' ich mich ja schon in die richtige Richtung. Ich meine Deine Antworten in diesen Links:

                  1. https://forum.selfhtml.org/self/2023/dec/19/unverstandnis-von-css-eigenschaften-hintergrund-der-aktiven-navigationsauswahl-andern/1812877#m1812877
                  2. https://forum.selfhtml.org/self/2023/dec/19/unverstandnis-von-css-eigenschaften-hintergrund-der-aktiven-navigationsauswahl-andern/1812879#m1812879 Vielen Dank!

                  Diese Frage (oben) muss hier also nicht mehr beantwortet werden!


                  Aber wie @Matthias Scharwies schon sagte, wäre eigentlich eine Vektorgrafik (SVG) das Mittel der Wahl. (Gradienten gehen auch in SVG.)

                  Auch das würde ich gerne in Angriff nehmen; aber wie?

                  Wie wurde denn die Grafik erstellt? Mit einem Vektorgrafikprogramm wie Illustrator o.ä.?

                  Hm, das weiß ich nicht. Vor mir hat jemand anders, ein gewerblicher Grafiker, welcher mit MacOS arbeitet, die (alte) Website erstellt und verwaltet. Er will mit dem allem aber nichts mehr zu tun haben. Ich nutze einfach die Dateien, die ich von der alten Homepage gespiegelt hatte. Aktuell also eine PNG-Datei mit 170,4 KiB Größe (siehe Bildablage).

                  akuelle PNG-Datei für BannerDann aus diesem als SVG speichern/exportieren. Aber den Quelltext ansehen, der da rauskommt. Der muss vermutlich noch optimiert werden.

                  Oder mit einem anderen Bildbearbeitungsprogramm wie Photoshop o.ä.? Ist die Grafik darin vielleicht größer? Oder wurden da Pfade verwendet?

                  Kwakoni Yiquan

                  1. problematische Seite

                    Guten Morgen,

                    Aber wie @Matthias Scharwies schon sagte, wäre eigentlich eine Vektorgrafik (SVG) das Mittel der Wahl. (Gradienten gehen auch in SVG.)

                    Auch das würde ich gerne in Angriff nehmen; aber wie?

                    Wie wurde denn die Grafik erstellt? Mit einem Vektorgrafikprogramm wie Illustrator o.ä.?

                    Hm, das weiß ich nicht. Vor mir hat jemand anders, ein gewerblicher Grafiker, welcher mit MacOS arbeitet, die (alte) Website erstellt und verwaltet. Er will mit dem allem aber nichts mehr zu tun haben.

                    Unternimm noch einen letzten Versuch und frag, ob er Dir nur das Logo im .eps oder .svg-Format schicken könnte.

                    Ich nutze einfach die Dateien, die ich von der alten Homepage gespiegelt hatte. Aktuell also eine PNG-Datei mit 170,4 KiB Größe (siehe Bildablage).

                    akuelle PNG-Datei für Banner

                    Begriffsklärung: Eine Rastergrafik ist ein Foto oder Bild, in dem jeder Bildpunkt abgespeichert wird. - Eine Vektorgrafik beschreibt die Formen des Bilds. (Warum SVG nutzen?)

                    Hier hast du den Namen als serifenlose Schrift, das könntest Du in SVG so auszeichnen und dann einfach mit CSS formatieren:

                    <svg xmlns="http://www.w3.org/2000/svg">
                      <text>KONTAKT</text>
                      <text>SOZIALWERK</text>
                      <g id="logo">
                        ...
                      </g>
                    </svg>
                    

                    Euer Logo müsste man da raustrennen und nachzeichnen oder online umwandeln.

                    Dann aus diesem als SVG speichern/exportieren. Aber den Quelltext ansehen, der da rauskommt. Der muss vermutlich noch optimiert werden.

                    Deswegen wäre ein Nachfragen bei euren ehemaligen Grafiker einen Versuch wert.

                    Mach erst mal die Webseite und nimm das als Extra-Projekt später in Angriff, wenn Eure neue Webseite steht.

                    Herzliche Grüße

                    Matthias Scharwies

                    --
                    Die Signatur findet sich auf der Rückseite des Beitrags.
                    1. problematische Seite

                      Guten Morgen,

                      Aber wie @Matthias Scharwies schon sagte, wäre eigentlich eine Vektorgrafik (SVG) das Mittel der Wahl. (Gradienten gehen auch in SVG.)

                      Auch das würde ich gerne in Angriff nehmen; aber wie?

                      Wie wurde denn die Grafik erstellt? Mit einem Vektorgrafikprogramm wie Illustrator o.ä.?

                      Hm, das weiß ich nicht. Vor mir hat jemand anders, ein gewerblicher Grafiker, welcher mit MacOS arbeitet, die (alte) Website erstellt und verwaltet. Er will mit dem allem aber nichts mehr zu tun haben.

                      Unternimm noch einen letzten Versuch und frag, ob er Dir nur das Logo im .eps oder .svg-Format schicken könnte.

                      Ja, das werde ich versuchen. Ich kann mir nicht vorstellen, dass er die Grafik(en) nicht mehr hat. Habe mir bislang noch keinen Kopf darüber gemacht, da für meine (für mich tollen) Bildschirme mit einer Auflösung von 1920.1080 (16:9 bzw. 16:10) auch bei Vergrösserung immer alles top aussieht. Hab' ja schließlich auch kein Mac-Equipment, wie Gunnar … 😉 Und wohl auch nicht das geschulte Auge, auf solche Dinge zu achten. Aber klar, das kann verbessert werden!

                      Ich nutze einfach die Dateien, die ich von der alten Homepage gespiegelt hatte. Aktuell also eine PNG-Datei mit 170,4 KiB Größe (siehe Bildablage).

                      akuelle PNG-Datei für Banner

                      Begriffsklärung: Eine Rastergrafik ist ein Foto oder Bild, in dem jeder Bildpunkt abgespeichert wird. - Eine Vektorgrafik beschreibt die Formen des Bilds. (Warum SVG nutzen?)

                      Hier hast du den Namen als serifenlose Schrift, das könntest Du in SVG so auszeichnen und dann einfach mit CSS formatieren:

                      <svg xmlns="http://www.w3.org/2000/svg">
                        <text>KONTAKT</text>
                        <text>SOZIALWERK</text>
                        <g id="logo">
                          ...
                        </g>
                      </svg>
                      

                      O.k.; das kapiere ich (noch) nicht. Aber im anderen Beitrag war ja ein Link, den ich hoffentlich umsetzen kann.

                      Euer Logo müsste man da raustrennen und nachzeichnen oder online umwandeln.

                      Hoffentlich nicht! Grafikbearbeitung? Da bin ich raus. Ich hoffe, da kann mir - im Fall der Fälle - jemand aus dem Forum helfen. 😀

                      Dann aus diesem als SVG speichern/exportieren. Aber den Quelltext ansehen, der da rauskommt. Der muss vermutlich noch optimiert werden.

                      Deswegen wäre ein Nachfragen bei euren ehemaligen Grafiker einen Versuch wert.

                      O.k., was wäre denn das ideale Format der Grafik(en); falls er die Datei nicht als SVG vorliegen hat? Mit was kann man arbeiten, um diese zu konvertieren (habe davon absolut keine Ahnung!) und was für Formate haben gar keinen Sinn?

                      Ups! Die Antwort steht (jedenfalls größtenteils) schon ganz oben!

                      Unternimm noch einen letzten Versuch und frag, ob er Dir nur das Logo im .eps- oder .svg-Format schicken könnte.

                      Mach erst mal die Webseite und nimm das als Extra-Projekt später in Angriff, wenn Eure neue Webseite steht.

                      Ja, gute Idee, erst mal die wichtigeren Sachen.

                      Danke sagt

                      Holger

                      1. problematische Seite

                        Unternimm noch einen letzten Versuch und frag, ob er Dir nur das Logo im .eps- oder .svg-Format schicken könnte.

                        Done! Ich bekomme die Dateien in Kürze. Und hatte ein sehr erfreuliches Gespräch (wir hatten uns aus den Augen verloren). 😀

                  2. problematische Seite

                    @@HTML_go

                    Der Link funktioniert nicht

                    Jetzt aber.

                    Und wenn du dich wunderst, dass sich dein Zeitfenster zum Editieren nach kurzer Zeit schließt, während meins für ewig offen ist: ich bin halt priviligiert. 😏

                    (fehlt vermutlich die schließende, eckige Klammer)

                    Das wäre auch gegangen. Aber eigentlich war die öffnende eckige Klammer zu viel.


                    Vor mir hat jemand anders, ein gewerblicher Grafiker, welcher mit MacOS arbeitet, die (alte) Website erstellt und verwaltet.

                    Ah ja, ein gewerblicher Grafiker, welcher von Grafik fürs Web keinen Schimmer hat.

                    Ich nutze einfach die Dateien, die ich von der alten Homepage gespiegelt hatte. Aktuell also eine PNG-Datei mit 170,4 KiB Größe (siehe Bildablage).

                    Die Datei ist fürs Web zu groß. Das sollte man locker auf max. 50 KB runterkriegen. Aber wie gesagt, für HD-Displays bräuchte man das in höherer Auflösung. An die Dateien kommt ihr nicht mehr ran?

                    Kwakoni Yiquan

                    --
                    Ad astra per aspera
                    1. problematische Seite

                      Hallo Gunnar Bittersmann,

                      ich bin halt priviligiert

                      Ich bin verwirrt. Du hast eine Sonderbindung? Oder ein eigenes Uferstück an der Loire⁉️

                      Rolf

                      --
                      sumpsi - posui - obstruxi
                      1. problematische Seite

                        An alle Mitleser, Moderatoren und die, die es gerne sein wollen ...

                        Hallo Gunnar Bittersmann,

                        ich bin halt priviligiert

                        Ich bin verwirrt. Du hast eine Sonderbindung? Oder ein eigenes Uferstück an der Loire⁉️

                        Rolf

                        😁 Ich würde sagen, alle Moderatoren (und sonstige Mitarbeiter) dieser Seite sind zu recht "privilegiert". Ihr helft ja wirklich super und das ist Idealismus (und hoffentlich auch viel Freude und Überzeugung an der Sache) pur!

                        Hut ab sagt Holger!👌

                        Und wer neidisch ist, kann sich ja auch gerne andienen, Verantwortung zu übernehmen! 😉

                      2. problematische Seite

                        @@Rolf B

                        ich bin halt priviligiert

                        Ich bin verwirrt. Du hast eine Sonderbindung? Oder ein eigenes Uferstück an der Loire⁉️

                        Ich will aber meine Priviligien!!1elf

                        Kwakoni Yiquan

                        --
                        Ad astra per aspera
                        1. problematische Seite

                          Hi,

                          Ich will aber meine Priviligien!!1elf

                          Die sind aber noch in der Reperatur!

                          cu,
                          Andreas a/k/a MudGuard

                    2. problematische Seite

                      @@HTML_go

                      Der Link funktioniert nicht

                      Jetzt aber.

                      Und wenn du dich wunderst, dass sich dein Zeitfenster zum Editieren nach kurzer Zeit schließt, während meins für ewig offen ist: ich bin halt priviligiert. 😏

                      Als Moderator? Das hast Du Dir wohl auch verdient!


                      Vor mir hat jemand anders, ein gewerblicher Grafiker, welcher mit MacOS arbeitet, die (alte) Website erstellt und verwaltet.

                      Ah ja, ein gewerblicher Grafiker, welcher von Grafik fürs Web keinen Schimmer hat.

                      Das kann ich nicht beurteilen. Schließlich erfolgte die Übergabe der Homepage (die ich dann auf die Schnelle - damals noch bei einem anderen Provider - in einem Webbaukasten schnell mal nachgebaut hatte) nicht sehr überlegt oder fachmännisch.

                      Hatte aber heute Nachmittag ein gutes Telefonat mit ihm und erhalte die Dateien Anfang nächster Woche im SVG-Format. 😀

                      Ich nutze einfach die Dateien, die ich von der alten Homepage gespiegelt hatte. Aktuell also eine PNG-Datei mit 170,4 KiB Größe (siehe Bildablage).

                      Kwakoni Yiquan

                      1. problematische Seite

                        @@HTML_go

                        Als Moderator? Das hast Du Dir wohl auch verdient!

                        Hm, sollte 🥈 „Fragen editieren“ oder 🥈 „Antworten editieren“ dazu (für eigene Postings) reichen?

                        Hatte aber heute Nachmittag ein gutes Telefonat mit ihm und erhalte die Dateien Anfang nächster Woche im SVG-Format. 😀

                        Fein. Da musst du aber sicher drüberschauen, ob die optimiert werden müssen.

                        Oder du baust sie ein und wir schauen dann drüber. 😆

                        Kwakoni Yiquan

                        --
                        Ad astra per aspera
                        1. problematische Seite

                          Hallo Gunnar,

                          Hatte aber heute Nachmittag ein gutes Telefonat mit ihm und erhalte die Dateien Anfang nächster Woche im SVG-Format. 😀

                          Fein. Da musst du aber sicher drüberschauen, ob die optimiert werden müssen.

                          Oder du baust sie ein und wir schauen dann drüber. 😆

                          Danke für das Angebot! Matthias hat die Dateien (evtl. benötigt er noch mehr) schon erhalten. Er weiß wohl, was zu tun ist; ich habe von Grafik überhaupt keine Ahnung. 😐

                          Bin vermutlich erst am Donnerstag wieder in der Lage, Eure Vorschläge anzuschauen.

                          Vielen Dank!

                          Holger

              2. problematische Seite

                Hallo liebe Mitleser,

                seit einigen Wochen ist ja nun "Funktstille". Zugegebenermaßen hatte ich auch nicht viel Zeit. Aber leider komme ich derzeit nicht weiter. Es sind nun mehrere Baustellen.

                1. SVG-Grafik statt PNG-Banner

                  → hier https://forum.selfhtml.org/self/2023/dec/19/unverstandnis-von-css-eigenschaften-hintergrund-der-aktiven-navigationsauswahl-andern/1812286#m1812286 von Matthias angesprochen ...

                2. Schriftarten (vielleicht sogar besser Webfonts!?) nutzen?

                  → hier: https://forum.selfhtml.org/self/2023/dec/19/unverstandnis-von-css-eigenschaften-hintergrund-der-aktiven-navigationsauswahl-andern/1812871#m1812871

                  → und hier https://forum.selfhtml.org/self/2023/dec/19/unverstandnis-von-css-eigenschaften-hintergrund-der-aktiven-navigationsauswahl-andern/1812872#m1812872

                versuche ich, den Problemen auf den Grund zu kommen.

                Und Gunnars Antwort https://forum.selfhtml.org/self/2023/dec/19/unverstandnis-von-css-eigenschaften-hintergrund-der-aktiven-navigationsauswahl-andern/1812603#m1812603 beantworte ich separat.

                1. Seite für Blinde und / oder Nicht-Mausnutzer optimieren. Das wurde ja auch schon mehrfach angesprochen, aber ist das jetzt auch schon alles von mir umgesetzt (ich habe online bislang nur auf der index.html gearbeitet; die anderen Seiten überarbeite ich erst, wenn ich verstanden habe, was zu machen ist)? Ich habe da so meine Zweifel ...

                  → hier https://wiki.selfhtml.org/wiki/HTML/Tutorials/Element,Tag_und_Attribut#Semantik-_der_Inhalt_bestimmt_die_Struktur wird ja einiges angesprochen. Wie ich mich kenne, brauche ich aber auch da Starthilfe.

                Und nochmal meine Frage: Ist es nicht sinnvoll, die einzelnen Themen in neue Threats zu verlagern?

                Vielen Dank!

                1. problematische Seite

                  Servus!

                  Hallo liebe Mitleser,

                  seit einigen Wochen ist ja nun "Funktstille". Zugegebenermaßen hatte ich auch nicht viel Zeit. Aber leider komme ich derzeit nicht weiter. Es sind nun mehrere Baustellen.

                  Sortiere, was (dir) am Wichtigsten ist!

                  Und nochmal meine Frage: Ist es nicht sinnvoll, die einzelnen Themen in neue Threats zu verlagern?

                  Prinzipiell ja, bzw du kannst den Betreff oben ändern.

                  1. HTML

                  1. Seite für Blinde und / oder Nicht-Mausnutzer optimieren. Das wurde ja auch schon mehrfach angesprochen, aber ist das jetzt auch schon alles von mir umgesetzt (ich habe online bislang nur auf der index.html gearbeitet; die anderen Seiten überarbeite ich erst, wenn ich verstanden habe, was zu machen ist)? Ich habe da so meine Zweifel ...

                    → hier https://wiki.selfhtml.org/wiki/HTML/Tutorials/Element,Tag_und_Attribut#Semantik-_der_Inhalt_bestimmt_die_Struktur wird ja einiges angesprochen. Wie ich mich kenne, brauche ich aber auch da Starthilfe.

                  Was hast du jetzt nach 4 Wochen?

                  Lade Deine index.html auf einen Server und lass sie vom Validator überprüfen!

                  Wenn sie keine Fehler ausweist, alles gut!

                  Wenn https://kontakt-vs.de/ bereits aktuell ist, ist doch alles ok:

                  https://validator.w3.org/nu/?doc=https%3A%2F%2Fkontakt-vs.de%2F

                  Manche Leute lieben die "Trailing slashes" am Ende ( .../>), der Validator meckert ein bisschen, findet aber keine Fehler!

                  Jetzt schnell die anderen Seiten!

                  Da scheint es nur die <br />zu geben, die ein </p><p>sein wollen.

                  Ein Beispiel für ein Impressum findest du hier: HTML/Tutorials/Textauszeichnung#Kontaktseite

                  2. CSS

                  Sieht Deine Seite ungefähr so aus, wie du willst? Dann kannst du jetzt starten.

                  Ich würde das Oliv in der Navigation ändern, aber sonst?

                  a. Schriften

                  1. Schriftarten (vielleicht sogar besser Webfonts!?) nutzen?

                    → hier: https://forum.selfhtml.org/self/2023/dec/19/unverstandnis-von-css-eigenschaften-hintergrund-der-aktiven-navigationsauswahl-andern/1812871#m1812871

                    → und hier https://forum.selfhtml.org/self/2023/dec/19/unverstandnis-von-css-eigenschaften-hintergrund-der-aktiven-navigationsauswahl-andern/1812872#m1812872

                  versuche ich, den Problemen auf den Grund zu kommen.

                  Gut, ich habe dir hier geantwortet: Begriffe lokal, google-Fonts

                  Dafür brauchst du einen Test-Server oder du lädst Deine Schrift-Einstellungen einfach mal hoch (nicht auf die „richtige“ Webseite, sondern in einen Bereich /text/index-test.html und testest dort.)

                  3. Logo

                  1. SVG-Grafik statt PNG-Banner

                    → hier https://forum.selfhtml.org/self/2023/dec/19/unverstandnis-von-css-eigenschaften-hintergrund-der-aktiven-navigationsauswahl-andern/1812286#m1812286 von Matthias angesprochen ...

                  Habe ich mit Logo als SVG geantwortet.

                  Ja, das wäre normalerweise die Nr. 1.: ein Farbkonzept und das Logo in SVG, dazu passende Icons - so etwas wäre schön, brauchst du aber jetzt noch nicht.

                  Mach erst mal 1. und 2. fertig und fülle die Seite mit neuen Inhalten.

                  Dann machst du dich an Nr. 3 und überarbeitest nur den Header, wo das Logo eingebunden ist, noch einmal. Da ist das Logo die Arbeit - das Ändern geht dann ganz schnell.

                  Herzliche Grüße

                  Matthias Scharwies

                  --
                  Die Signatur findet sich auf der Rückseite des Beitrags.
                  1. problematische Seite

                    Hallo nochmal Matthias!

                    Aber leider komme ich derzeit nicht weiter. Es sind nun mehrere Baustellen.

                    Sortiere, was (dir) am Wichtigsten ist!

                    Das hast Du ja schon recht gut gemacht, Matthias! Aber so in etwa hätte ich die Reihenfolge auch gesetzt.

                    Und nochmal meine Frage: Ist es nicht sinnvoll, die einzelnen Themen in neue Threats zu verlagern?

                    Prinzipiell ja, bzw du kannst den Betreff oben ändern.

                    O.k.; für die Zukunft …

                    1. HTML

                    1. Seite für Blinde und / oder Nicht-Mausnutzer optimieren. Das wurde ja auch schon mehrfach angesprochen, aber ist das jetzt auch schon alles von mir umgesetzt (ich habe online bislang nur auf der index.html gearbeitet; die anderen Seiten überarbeite ich erst, wenn ich verstanden habe, was zu machen ist)? Ich habe da so meine Zweifel …

                    Was hast du jetzt nach 4 Wochen?

                    Lade Deine index.html auf einen Server und lass sie vom Validator überprüfen!

                    Wenn sie keine Fehler ausweist, alles gut!

                    Na ja, Fehler weist im HTML die index-Seite keine auf, auch das CSS passiert die Prüfung mit diesem Tool https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fwww.kontakt-vs.de&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=de anstandslos.

                    Die index.html und die standard.css sind online …

                    Doch gerade auf der Startseite

                    https://www.kontakt-vs.de/index.html

                    habe ich ja diese Änderung in der Anzeige (abweichend von den anderen Seiten wie .../vorstellung.html, .../kinder.html, .../jugend.html, .../kontakt.html und .../impressum.html):

                    1. Navigationsleiste ist außen eingerückt
                    2. oben links über dem Banner sieht man den Link https://kontakt-vs.de/#main

                    Da die fragliche Seite https://www.kontakt-vs.de/index.html online ist, könnt Ihr Euch mit F12 (Firefox-Seiteninspektor) einen eigenen Überblick verschaffen; alle anderen Seiten weichen in der Navigationsbar von der Startseite ab und haben auch diesen Link links oberhalb des Banners nicht …

                    Das rührt von einer Änderung im HTML-Code der index.html her, welche ich auf den anderen Seiten noch nicht umgesetzt habe.

                    Eigentlich sollte diese Änderung im HTML-Code Nutzern von Screenreadern oder Leuten, welche mit Tastatur navigieren, die Navigation erleichtern. Aber irgendwas stimmt noch nicht.

                    Der fragliche Code (nach dem "</header>") ist dieser:

                    
                        <main id="main" tabindex="-1">
                        <nav>
                          <ul>
                            <li aria-current="page"><a href="#main">Startseite</a></li>
                            <!--der Link für diese aktive Seite wird  "deaktiviert" und kann nicht mehr angeklickt werden-->
                            <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>
                        <main id="main">
                    

                    Den hatte ich auf Anraten Gunnars (oder Rolfs?) eingebaut (wenn ich mich nicht irre - es ist so schwierig, die ganzen Threads zu durchsuchen, bis man den korrekten gefunden hat).

                    Und dann (in obigem Codeauszug nicht vollständig abgebildet (siehe aber Bildschirmfoto unten!) ist wohl auch noch ein Fehler, der aber im HTML-Validator auch nicht angezeigt wird, oder ich kapiere den HTML-Code nicht.

                    Es geht um das Öffnen des Main-Tags; einmal in der Zeile 124 (Bildschirmfoto unten) der

                        <main id="main" tabindex="-1">
                    

                    dann (der mir richtig erscheinende) öffnende Main-Tag in Zeile 136 (Bildschirmfoto unten)

                        <main id="main">
                    

                    und endlich um den schließenden Main-Tag in Zeile 159 (Bildschirmfoto unten)

                        </main>
                    

                    Muss der Tag aus Zeile 124 nicht auch geschlossen werden?

                    Main-Bereich(e) richtig?

                    Jetzt schnell die anderen Seiten!

                    Da scheint es nur die <br />zu geben, die ein </p><p>sein wollen.

                    Ja, da möchte ich noch dran. Da ich aber dann auch gleich die Änderungen für die Sreenreader- und Tastatur-Navigation einbauen möchte (was ja mit den oben erwähnten Punkten 1. und 2. in der Online-Version der index.html noch nicht funktioniert), warte ich noch, bis das erste Problem gelöst ist.

                    Ein Beispiel für ein Impressum findest du hier: HTML/Tutorials/Textauszeichnung#Kontaktseite

                    Ja, das schaue ich mir auch noch mal an! Eine Telefonnummer haben wir nicht, da - jetzt auch neu und vermutlich nicht von Dauer - das Telefon nur einmal per Woche besetzt ist; wir bitten um schriftlichen Kontakt per Mail(Formular). Gerade um die Mailadresse vor Missbrauch (Spam, etc.) zu schützen möchte ich da nochmal ran.

                    2. CSS

                    Sieht Deine Seite ungefähr so aus, wie du willst? Dann kannst du jetzt starten.

                    Nun ja, ist ja auch schon online. Das CSS scheint ja o.k. zu sein. 👍 Nur halt die oben beschriebenen Probleme der index.html (die ich noch nicht auf die restlichen Seiten übertragen habe) stören noch. Und evtl. oben beschriebenes Problem (Bildschirmfoto oben) mit dem <main>.

                    Ich würde das Oliv in der Navigation ändern,

                    Ja, gefällt mir auch noch nicht, war aber bislang unwichtig …

                    Wie finde ich aber einen zum schwarzen Navigationsleiten-Hintergrund, der weißen Schrift und dem türkisfarbenen Schriftzug im Banner einen harmonierenden Farbton (ich weiß, es gibt Farbtontabellen (wurde auch schon ein Link gezeigt in einer der Antworten). Aber wie bei der Grafik habe ich auch hier keine Ahnung, wie das ermittelt wird (auch wenn ich ein Werkzeug - Link - habe).

                    Auch hier bin ich für Hilfestellung dankbar!

                    Wo ich es im CSS ändern muss finde ich vermutlich selbst heraus; es geht tatsächlich um den passenden Farbton.

                    aber sonst? …

                    Herzliche Grüße

                    Matthias Scharwies

                    1. problematische Seite

                      Hallo

                      Ich greife mir mal diesen Punkt heraus.

                      Der fragliche Code (nach dem "</header>") ist dieser:

                      
                          <main id="main" tabindex="-1">
                          <nav>
                            <ul>
                              <li aria-current="page"><a href="#main">Startseite</a></li>
                              <!--der Link für diese aktive Seite wird  "deaktiviert" und kann nicht mehr angeklickt werden-->
                              <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>
                          <main id="main">
                      

                      Den hatte ich auf Anraten Gunnars (oder Rolfs?) eingebaut ….

                      … und dabei einen (schnell behebbaren) Fehler begangen. Üblicherweise legt man die Hauptnavigation nicht in den Hauptbereich. Sie in main einzufügen, ist kein Fehler, ist aber ungewöhnlich und bei Ansicht deiner Seite nicht notwendig. Meist, und bei deiner Seite sollte das zutreffen, wird sie vor den Hauptbereich (main) notiert.

                      Der Fehler, der dir unterlaufen ist, ist, den Beginn des Elements main einmal vor und zweites einmal hinter nav notiert zu haben. Wirf entweder das <main id="main" tabindex="-1"> vor dem nav einfach weg, wenn die Hauptnavigation nicht Bestandteil des Hauptbereichs sein soll oder das dem nav folgende <main id="main">, wenn die Navigation doch Teil des Hauptbereichs sein soll.

                      Den Tabindex mit -1 zu unterdrücken, sollte bei main unnötig sein, da dieses Element nicht interaktiv ist. Es ist nicht per Tabbing anwählbar und das Attribut tabindex="-1" sollte demnach keine Wirkung haben.

                      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. problematische Seite

                        Hallo Auge, 😀😀

                        Hallo

                        Ich greife mir mal diesen Punkt heraus.

                        Der fragliche Code (nach dem "</header>") ist dieser:

                            <main id="main" tabindex="-1">
                            <nav>
                              <ul>
                                <li aria-current="page"><a href="#main">Startseite</a></li>
                                <!--der Link für diese aktive Seite wird  "deaktiviert" und kann nicht mehr angeklickt werden-->
                                <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>
                            <main id="main">
                        

                        Den hatte ich auf Anraten Gunnars (oder Rolfs?) eingebaut ….

                        … und dabei einen (schnell behebbaren) Fehler begangen. Üblicherweise legt man die Hauptnavigation nicht in den Hauptbereich. Sie in main einzufügen, ist kein Fehler, ist aber ungewöhnlich und bei Ansicht deiner Seite nicht notwendig. Meist, und bei deiner Seite sollte das zutreffen, wird sie vor den Hauptbereich (main) notiert.

                        Der Fehler, der dir unterlaufen ist, ist, den Beginn des Elements main einmal vor und zweites einmal hinter nav notiert zu haben. Wirf entweder das <main id="main" tabindex="-1"> vor dem nav einfach weg, wenn die Hauptnavigation nicht Bestandteil des Hauptbereichs sein soll oder das dem nav folgende <main id="main">, wenn die Navigation doch Teil des Hauptbereichs sein soll.

                        Done. Die Zeile

                        <main id="main" tabindex="-1">
                        

                        über dem NAV-Element habe ich entfernt.

                        Den Tabindex mit -1 zu unterdrücken, sollte bei main unnötig sein, da dieses Element nicht interaktiv ist. Es ist nicht per Tabbing anwählbar und das Attribut tabindex="-1" sollte demnach keine Wirkung haben.

                        Da die Zeile

                        <main id="main" tabindex="-1">
                        

                        ja nun nicht mehr existiert, eigentlich egal, oder?

                        Tschö, Auge

                        Danke,

                        Holger

                        1. problematische Seite

                          Hallo

                          Den Tabindex mit -1 zu unterdrücken, sollte bei main unnötig sein, da dieses Element nicht interaktiv ist. Es ist nicht per Tabbing anwählbar und das Attribut tabindex="-1" sollte demnach keine Wirkung haben.

                          Da die Zeile

                          <main id="main" tabindex="-1">
                          

                          ja nun nicht mehr existiert, eigentlich egal, oder?

                          Ja, ist ja weg.

                          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
            4. problematische Seite

              @@HTML_go

              Den Tip mit den Weiterleitungen hast du auch umgesetzt?

              Ne, sorry, hatte ich vergessen, danach zu fragen. Muss jetzt erst mal kapieren (Link oben), wie das geht.

              Und ich hatte vergessen zu erwähnen, warum man das bei Umbenennungen von URLs machen sollte – und zwar sofort: damit das Ranking bei Suchmaschinen nicht verlorengeht.

              Tja, das ist nun wohl zu spät. Werde ich wohl nicht mehr umsetzen (können). Abgesehen davon hoffe ich, dass das Ranking einigermaßen erhalten bleibt. Ist ja auch keine Seite, die auf Ranking / Gefundenwerden baut, sondern einfach nur auffindbar sein soll, wenn jemand die Adresse eingibt.


              Du gibst im Stylesheet keine Schriftarten an, dann wird die im Browser eingestellte Defaultschrift verwendet – auf den meisten Systemen dürfte das Times New Roman sein. Nicht gerade mein Favorit, sowohl was Lesbarkeit als auch was Schönheit angeht. Dann schon lieber Georgia, wenn’s eine System-Serifenschrift sein soll. Oder eine von Microsofts C-Schriften (Cambria, Calibri, …), die durch MS Office auch auf anderen System (macOS) verfügbar sein könnten. Oder doch ein Webfont.

              Daher noch mal meine Frage, die ich auch schon einmal an anderer Stelle gestellt hatte: Wie trage ich denn die Schriftart ins CSS (und HTML?) ein? Reicht es so?

              html {
                line-height: 1.5;
                font-family: Georgia, Verdana, Helvetica, Arial, sans-serif;
              }
              

              Und; würde es reichen, auch nur "Georgia" als Serivenschrift einzutragen, oder ist es besser, die anderen (oder völlig andere - was schön und gut lesbar ist) dahinter einzutragen; als Ausweichschriftart gewissermaßen?

              1. problematische Seite

                Mist! Ich war am "Bearbeiten" des Beitrags, weil ich merkte, dass ich schlecht gefragt / formuliert habe. Beim dritten Bearbeiten (wenn ich richtig gezählt habe), wurden die Änderungen aber nicht übernommen, mit der Meldung (so ähnlich), dass ich keine Zugriffsrechte für die Seite habe ...

                Also erst mal der CSS-Code. Ich bin zu dem Schluss gekommen, dass sans-serif (serifenlose Schriftarten) für einen Webauftritt doch eher besser geeignet sind. Oder gibt es da andere Meinungen?

                Also wäre mein Code, den ich oben gezeigt habe, nicht sehr sinnvoll, denn "Georgia" ist ja eine Serifenschriftart (mit "Schnörkeln"); die liebe ich zwar mehr, aber das tut ja nichts zur Sache.

                Dann wäre es wohl besser, nur serifenlose Schriftarten zu nutzen. Also habe ich mal die Suchmaschine meiner Wahl gefragt und das hier gefunden (ohne lang zu kucken): https://www.lukas-rudrof.de/blog/15-besten-open-source-schriftarten.

                Ändere ich nun den CSS-Code so um,

                html {
                  line-height: 1.5;
                  font-family: Arvo, Helvetica, sans-serif;
                }
                

                um die openSource-Schriftart "Arvo" zu nutzen, sehe ich (lokal) keinerlei Änderung im Schriftbild. Setze ich "Gorgia" an erste Stelle, sieht man sofort die Serifenschriftart. Demnach funktioniert das Refresh des Browsers. Aber was ist noch falsch?

                Und mich wundert auch, warum auf dieser Seite https://www.winkelb.com/css-font-family hier im CSS nicht "html", sondern "body" verwendet wird:

                body {
                font-family: verdana, arial, helvetica, sans-serif;
                font-size: 12px;
                }
                

                Abgesehen davon, dass hier auch noch "px" als Größenangabe verwendet werden ("em" ist doch sinnvoller?); kann es sein, dass die Seite nicht auf dem neuesten Stand ist? Oder ist mit dem von mir verwendeten "html" einfach die komplette Website abgedeckt (wobei dafür der "body" doch auch reichen sollte)?

                1. problematische Seite

                  EDITIERUNG!

                  Mist! Ich war am "Bearbeiten" des Beitrags, weil ich merkte, dass ich schlecht gefragt / formuliert habe. Beim dritten Bearbeiten (wenn ich richtig gezählt habe), wurden die Änderungen aber nicht übernommen, mit der Meldung (so ähnlich), dass ich keine Zugriffsrechte für die Seite habe ...

                  Also erst mal der CSS-Code. Ich bin zu dem Schluss gekommen, dass sans-serif (serifenlose Schriftarten) für einen Webauftritt doch eher besser geeignet sind. Oder gibt es da andere Meinungen?

                  Also wäre mein Code, den ich oben gezeigt habe, nicht sehr sinnvoll, denn "Georgia" ist ja eine Serifenschriftart (mit "Schnörkeln"); die liebe ich zwar mehr, aber das tut ja nichts zur Sache.

                  Dann wäre es wohl besser, nur serifenlose Schriftarten zu nutzen. Also habe ich mal die Suchmaschine meiner Wahl gefragt und das hier gefunden (ohne lang zu kucken): https://www.lukas-rudrof.de/blog/15-besten-open-source-schriftarten.

                  Ändere ich nun den CSS-Code so,

                  html {
                  font-display: auto;
                  font-family: "IBM Plex Sans", "Fira Sans", Helvetica, Arial, sans-serif;
                  font-size-adjust: none;
                  font-stretch: 
                  font-style: normal;
                  font-variant: normal;  
                  font-variation-settings: "wght" 700, "GRAD" 60;  
                  line-height: 1.5;
                  }
                  

                  um die openSource-Schriftart "IBM Plex Sans" "Arvo" (nicht* "Arvo"; die ist doch serif, und nicht sans-serif!) zu nutzen, sehe ich (lokal) keinerlei Änderung im Schriftbild. Setze ich "Gorgia" an erste Stelle, sieht man sofort die Serifenschriftart. Demnach funktioniert das Refresh des Browsers. Aber was ist noch falsch?

                  Da die Schrift "IBM Plex Sans" (und auch "Fira Sans") im Namen Leerzeichen aufweist, habe ich sie in Anführungszeichen ("IBM Plex Sans") gesetzt. Das also sollte nicht der Fehler sein. Die Schriftart wird (vorerst nur lokal) nicht so dargestellt, wie im Link oben zu sehen. Auch nicht, wenn die serifenlosen Schriftart "Fira Sans" an erste Stelle gesetzt wird ...

                  Und mich wundert auch, warum auf dieser Seite https://www.winkelb.com/css-font-family hier im CSS nicht "html", sondern "body" verwendet wird:

                  body {
                  font-family: verdana, arial, helvetica, sans-serif;
                  font-size: 12px;
                  }
                  

                  Abgesehen davon, dass hier auch noch "px" als Größenangabe verwendet werden ("em" ist doch sinnvoller?); kann es sein, dass die Seite nicht auf dem neuesten Stand ist? Oder ist mit dem von mir verwendeten "html" einfach die komplette Website abgedeckt (wobei dafür der "body" doch auch reichen sollte)?

                  Und dann bin ich mir nicht sicher, ob ich diesen Bereich im CSS überhaupt benötige:

                  html {
                    ...
                    font-size-adjust: none;
                    font-stretch:  
                    font-style: normal;
                    font-variant: normal;  
                    font-variation-settings: "wght" 700, "GRAD" 60;
                    ...
                  }
                  

                  Eingetragen habe ich diese Zeilen, weil ich zuvor hier https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/font und in den Unter-Rubriken (font-display, font-family, etc.) geschmökert habe.

                  1. problematische Seite

                    @@HTML_go

                    Da die Schrift "IBM Plex Sans" (und auch "Fira Sans") im Namen Leerzeichen aufweist, habe ich sie in Anführungszeichen ("IBM Plex Sans") gesetzt.

                    Das ist richtig so.

                    CSS ist so gestrickt, dass es auch ohne Anführungszeichen geht, aber besser ist mit. Denn "Bodoni 72" würde ohne Anführungszeichen nicht gehen.

                    Die Schriftart wird (vorerst nur lokal) nicht so dargestellt, wie im Link oben zu sehen. Auch nicht, wenn die serifenlosen Schriftart "Fira Sans" an erste Stelle gesetzt wird ...

                    Lokal installiert? Siehe andere Antwort.

                    Und dann bin ich mir nicht sicher, ob ich diesen Bereich im CSS überhaupt benötige:

                    Ich bin sicher, dass du ihn nicht benötigst. Zumal er fehlerhaft ist.

                    Kwakoni Yiquan

                    --
                    Ad astra per aspera
                    1. problematische Seite

                      Hallo Gunnar,

                      danke auch für diese Antworten! Es kehrt Klarheit ein. 😀

                      @@HTML_go

                      Da die Schrift "IBM Plex Sans" (und auch "Fira Sans") im Namen Leerzeichen aufweist, habe ich sie in Anführungszeichen ("IBM Plex Sans") gesetzt.

                      Das ist richtig so.

                      CSS ist so gestrickt, dass es auch ohne Anführungszeichen geht, aber besser ist mit. Denn "Bodoni 72" würde ohne Anführungszeichen nicht gehen.

                      Die Schriftart wird (vorerst nur lokal) nicht so dargestellt, wie im Link oben zu sehen. Auch nicht, wenn die serifenlosen Schriftart "Fira Sans" an erste Stelle gesetzt wird ...

                      Lokal installiert? Siehe andere Antwort.

                      Ja, da mache ich mich jetzt dran.

                      Und dann bin ich mir nicht sicher, ob ich diesen Bereich im CSS überhaupt benötige:

                      Ich bin sicher, dass du ihn nicht benötigst. Zumal er fehlerhaft ist.

                      Wunderbar! Alles Unnötige im font-stack ist wieder gelöscht. War eh noch nicht online.

                      Danke!

                      Holger

                2. problematische Seite

                  @@HTML_go

                  Ich war am "Bearbeiten" des Beitrags, weil ich merkte, dass ich schlecht gefragt / formuliert habe. Beim dritten Bearbeiten (wenn ich richtig gezählt habe), wurden die Änderungen aber nicht übernommen, mit der Meldung (so ähnlich), dass ich keine Zugriffsrechte für die Seite habe ...

                  Vermutlich war dein Zeitfenster, in welchem du deine Beiträge noch editieren kannst, inzwischen zu.

                  Ich bin zu dem Schluss gekommen, dass sans-serif (serifenlose Schriftarten) für einen Webauftritt doch eher besser geeignet sind. Oder gibt es da andere Meinungen?

                  Ja, gibt es. Auf hochauflösenden Displays sind Serifenschriften genausogut lesbar wie serifenlose. Oder besser, weil die Serifen dem Auge zusätzlichen Halt geben. Heißt: für die Lesbarkeit einer Schrift sind andere Dinge (wie bspw. große x-Höhe, weit offene Punzen) maßgeblich, nicht ob Serifen oder nicht.

                  Wenn der Charakter einer Serifenschrift besser zum Inhalt deiner Seite passt, dann nimm eine Serifenschrift. Wenn der Charakter einer Serifenlosen besser zum Inhalt deiner Seite passt, dann nimm eine Serifenlose.

                  (Man könnte auch per media query auf niedrigauflösenden Displays serifenlose Schrift darstellen und auf hochauflösenden Displays Serifenschrift: Beispiel.)

                  Also wäre mein Code, den ich oben gezeigt habe, nicht sehr sinnvoll, denn "Georgia" ist ja eine Serifenschriftart (mit "Schnörkeln"); die liebe ich zwar mehr, aber das tut ja nichts zur Sache.

                  Ich mag Georgia auch, insb. die Kursive davon. Allerdings ist Georgia schon ziemlich alt und kommt deshalb ohne OpenType-Features daher. Und da stören mich dann:

                  1. Mediävalziffern. Ich mag Versalziffern einfach lieber.
                  2. Es werden keine automatischen Ligaturen gesetzt.

                  Dein Code font-family: Georgia, Verdana, Helvetica, Arial, sans-serif; ist aber aus anderem Grund nicht sehr sinnvoll: i.d.R. will man im font stack ähnliche Schriften haben. Wenn bspw. Abril Text auf einem System nicht installiert ist, dann nimm Georgia; wenn Georgia auch nicht verfügbar ist, dann nimm die Standard-Serifenschrift dieses Systems.

                  Oder man entscheidet sich für serifenlose Schriften. Aber für eine Angabe von wild gemischten serifenlosen und Serifenschriften sollte man schon einen guten Grund haben – oder es nicht tun.

                  das hier gefunden (ohne lang zu kucken): https://www.lukas-rudrof.de/blog/15-besten-open-source-schriftarten.

                  Huch, Abril Fatface soll open source sein? Ich bin ganz sicher, dass die Schriftschnitte Abril Text und Abril Display es nicht sind.

                  Und bei Fira Sans ist als Designer nicht Erik Spiekermann angegeben? Tss.

                  Ändere ich nun den CSS-Code so um,

                  html {
                    line-height: 1.5;
                    font-family: Arvo, Helvetica, sans-serif;
                  }
                  

                  um die openSource-Schriftart "Arvo" zu nutzen, sehe ich (lokal) keinerlei Änderung im Schriftbild.

                  Hast du denn die Arvo lokal auf deinem System installiert? Wenn nicht, kein Wunder, dass du keine Änderung siehst. Wenn der Browser den Font nicht findet, kann er den Text nicht in dieser Schrift darstellen und nimmt sich halt die nächste Schrift aus dem font stack.

                  Wenn du den Text in Arvo gesetzt sehen willst, installiere die Schriftart auf deinem System. Wenn alle (naja, fast alle) Besucher deiner Seite den Text in Arvo gesetzt sehen sollen, packe die Fontdateien auf deinen Webserver und binde Arvo als Webfont ein (@font-face-Regeln).

                  Und mich wundert auch, warum auf dieser Seite https://www.winkelb.com/css-font-family hier im CSS nicht "html", sondern "body" verwendet wird:

                  Solange du nicht Inhalte des head-Elements anzeigen willst, sollte es ziemlich egal sein, ob man die Brotschrift für html oder für body angibt.

                  body {
                  font-family: verdana, arial, helvetica, sans-serif;
                  font-size: 12px;
                  }
                  

                  Abgesehen davon, dass hier auch noch "px" als Größenangabe verwendet werden ("em" ist doch sinnvoller?)

                  Ja, ist es. Und vor allem: eine lesbare Schriftgröße. 12px ist Unsinn. Ich nenne das: graue Linie.

                  Und der font stack ist auch Quatsch. Auf Systemen, wo sowohl Arial (bäh!) als auch Helvetica (weniger bäh) installiert ist, soll Arial verwendet werden anstatt Helvetica? Ernsthaft? Wirklich? Helvetica gehört vor Arial (wenn Arial da überhaupt reingehört).

                  kann es sein, dass die Seite nicht auf dem neuesten Stand ist?

                  Ja, die Verwendung von Verdana deutet darauf hin.

                  Kwakoni Yiquan

                  --
                  Ad astra per aspera
                  1. problematische Seite

                    Hallo Gunnar,

                    Experimentierfreude (ich) trifft auf Sachverstand (Du) 😁

                    @@HTML_go

                    Ich war am "Bearbeiten" des Beitrags, ... wurden die Änderungen aber nicht übernommen, mit der Meldung (so ähnlich), dass ich keine Zugriffsrechte für die Seite habe ...

                    Vermutlich war dein Zeitfenster, in welchem du deine Beiträge noch editieren kannst, inzwischen zu.

                    Ach so, nicht Häufigkeit, sondern Zeit. O.k. Weißt Du, wie groß das Zeitfenster ist?

                    Ich bin zu dem Schluss gekommen, dass sans-serif (serifenlose Schriftarten) für einen Webauftritt doch eher besser geeignet sind. Oder gibt es da andere Meinungen?

                    Ja, gibt es. ... Wenn der Charakter einer Serifenschrift besser zum Inhalt deiner Seite passt, dann nimm eine Serifenschrift. Wenn der Charakter einer Serifenlosen besser zum Inhalt deiner Seite passt, dann nimm eine Serifenlose.

                    Dann wähle ich doch eine serifenlose. Danke. 👍

                    (Man könnte auch per media query auf niedrigauflösenden Displays serifenlose Schrift darstellen und auf hochauflösenden Displays Serifenschrift: Beispiel.)

                    Ich mag Georgia auch, insb. die Kursive davon. Allerdings ist Georgia schon ziemlich alt und kommt deshalb ohne OpenType-Features daher. Und da stören mich dann:

                    1. Mediävalziffern. Ich mag Versalziffern einfach lieber.

                    Huch, Du schmeißt aber auch wirklich mit Fachausdrücken um Dich. Aber hab's gefunden: https://www.typolexikon.de/mediaevalziffern/; da sieht man dann auch den Unterschied zwischen Mediäval- und Versalziffern.

                    1. Es werden keine automatischen Ligaturen gesetzt.

                    Und für mich etwas verständlicher (wenn auch viel ausführlicher): https://de.wikipedia.org/wiki/Ligatur_(Typografie).

                    Georgia kommt damit also nicht in Frage. O.k.

                    Dein Code

                    html {
                    font-family: Georgia, Verdana, Helvetica, Arial, sans-serif;
                    }
                    

                    ist aber aus anderem Grund nicht sehr sinnvoll: i.d.R. will man im font stack

                    (meine Einfügung / Erklärung zu "font-stack" für mich Unwissenden:): https://kulturbanause.de/faq/font-stack/; demnach ist mein Codeschnipsel aus dem standard.css ein "font-stack".

                    ähnliche Schriften haben. Wenn bspw. Abril Text auf einem System nicht installiert ist, dann nimm Georgia; wenn Georgia auch nicht verfügbar ist, dann nimm die Standard-Serifenschrift dieses Systems.

                    Verstanden! 😀

                    Oder man entscheidet sich für serifenlose Schriften. Aber für eine Angabe von wild gemischten serifenlosen und Serifenschriften sollte man schon einen guten Grund haben – oder es nicht tun.

                    das hier gefunden (ohne lang zu kucken): https://www.lukas-rudrof.de/blog/15-besten-open-source-schriftarten.

                    Huch, Abril Fatface soll open source sein? Ich bin ganz sicher, dass die Schriftschnitte Abril Text und Abril Display es nicht sind.

                    Und bei Fira Sans ist als Designer nicht Erik Spiekermann angegeben? Tss.

                    Tja, da habe ich einfach geglaubt, was mir vorgekaut wurde. Das jetzt alles zu recherchieren führt zu weit. Dir glaube ich, Gunnar. 😁😁

                    Ändere ich nun den CSS-Code so um,

                    html {
                      line-height: 1.5;
                      font-family: Arvo, Helvetica, sans-serif;
                    }
                    

                    um die openSource-Schriftart "Arvo" zu nutzen, sehe ich (lokal) keinerlei Änderung im Schriftbild.

                    Hast du denn die Arvo lokal auf deinem System installiert? Wenn nicht, kein Wunder, dass du keine Änderung siehst. Wenn der Browser den Font nicht findet, kann er den Text nicht in dieser Schrift darstellen und nimmt sich halt die nächste Schrift aus dem font stack.

                    Ne, ich habe weder die "Arvo", noch eine der inzwischen favorisierten Schriftarten (also "IBM Plux Sans", oder die "Fira Sans") auf meinem System (openSUSE Tumbleweed) installiert. Daher sehe ich sie nicht! 🙄

                    Wenn du den Text in Arvo gesetzt sehen willst, installiere die Schriftart auf deinem System. Wenn alle (naja, fast alle) Besucher deiner Seite den Text in Arvo gesetzt sehen sollen, packe die Fontdateien auf deinen Webserver und binde Arvo als Webfont ein (@font-face-Regeln).

                    Na ja, natürlich will nicht nur ich den Text in der bevorzugten Schriftart (ist inzwischen wohl die "IBM Plex Sans", bzw. die "Fira Sans" - beides serifenlose) sehen. Vor allem die Besucher der Homepage sollen die Schrift nutzen.

                    Also werde ich mich bezüglich "@font-face" weiterbilden. Diese Seite hier, nicht? https://wiki.selfhtml.org/wiki/Typografie/Schriftformatierung#.40font-face

                    Und mich wundert auch, warum auf dieser Seite https://www.winkelb.com/css-font-family hier im CSS nicht "html", sondern "body" verwendet wird:

                    Solange du nicht Inhalte des head-Elements anzeigen willst, sollte es ziemlich egal sein, ob man die Brotschrift für html oder für body angibt.

                    O.k., dann kann ich es ja im fonst-stack bei "html" belassen.

                    body {
                    font-family: verdana, arial, helvetica, sans-serif;
                    font-size: 12px;
                    }
                    

                    Abgesehen davon, dass hier auch noch "px" als Größenangabe verwendet werden ("em" ist doch sinnvoller?)

                    Ja, ist es. Und vor allem: eine lesbare Schriftgröße. 12px ist Unsinn. Ich nenne das: graue Linie.

                    Und der font stack ist auch Quatsch. Auf Systemen, wo sowohl Arial (bäh!) als auch Helvetica (weniger bäh) installiert ist, soll Arial verwendet werden anstatt Helvetica? Ernsthaft? Wirklich? Helvetica gehört vor Arial (wenn Arial da überhaupt reingehört).

                    kann es sein, dass die Seite nicht auf dem neuesten Stand ist?

                    Ja, die Verwendung von Verdana deutet darauf hin.

                    O.k. Danke! Immerhin habe ich einige schöne Schriftarten gefunden. Die, welche ich brauchen kann, sind offenbar tatsächlich openSource und in verschiedenen Variationen vorhanden (light, regular, italic, semibold, bold). Und das ist ja einer der Gründe, weswegen ich eine solche installieren will; die fette Hervorhebung (bold, statt semibold) in meinen h1-Überschriften der Seite "Arbeit mit Jugendlichen" https://www.kontakt-vs.de/jugend.html. Die ist derzeit ja gar nicht zu sehen ...

                    1. problematische Seite

                      Und schon wieder eine (Folge-)Frage bezüglich dem Anlegen des "@font-face" ...

                      Hast du denn die Arvo lokal auf deinem System installiert? Wenn nicht, kein Wunder, dass du keine Änderung siehst. Wenn der Browser den Font nicht findet, kann er den Text nicht in dieser Schrift darstellen und nimmt sich halt die nächste Schrift aus dem font stack. Ne, ich habe weder die "Arvo", noch eine der inzwischen favorisierten Schriftarten (also "IBM Plux Sans", oder die "Fira Sans") auf meinem System (openSUSE Tumbleweed) installiert. Daher sehe ich sie nicht! 🙄

                      Wenn du den Text in Arvo gesetzt sehen willst, installiere die Schriftart auf deinem System. Wenn alle (naja, fast alle) Besucher deiner Seite den Text in Arvo gesetzt sehen sollen, packe die Fontdateien auf deinen Webserver und binde Arvo als Webfont ein (@font-face-Regeln).

                      Na ja, natürlich will nicht nur ich den Text in der bevorzugten Schriftart (ist inzwischen wohl die "IBM Plex Sans", bzw. die "Fira Sans" - beides serifenlose) sehen. Vor allem die Besucher der Homepage sollen die Schrift nutzen.

                      Also werde ich mich bezüglich "@font-face" weiterbilden. Diese Seite hier, nicht? https://wiki.selfhtml.org/wiki/Typografie/Schriftformatierung#.40font-face

                      Ja und nun frage ich mich, wie genau das für mich umgesetzt werden kann. Wäre das so richtig? Ich habe mich für die beiden serifenlosen Schriften "IBM Plex Sans" und "Fira Sans" entschieden, da sie immerhin fünf Darstellungen bieten (von light bis bold) und weil die erste zu einer internationalen Schriftenfamilie gehört. Beide scheinen gut lesbar. Hier nun der CSS-Code:

                      html {
                        font-family: "IBM Plex Sans", "Fira Sans", sans-serif;
                        line-height: 1.5;
                      }
                      
                      @font-face {
                        font-family: "IBM Plex Sans";
                      }
                      

                      Im Link oben (https://wiki.selfhtml.org/wiki/Typografie/Schriftformatierung#.40font-face) heißt es ja,

                      font-familiy: 'meine-schrift';
                      

                      Da habe ich die von mir gewählte (und bevorzugte) Schriftart eingetragen. Und zwar ohne die hochgestellten Semikolon ('...') und dafür mit den einschließenden Gänsefüßchen, da der Name ja Leerzeichen beinhaltet.

                      Bei

                      src: local('meine-schrift')
                      

                      bin ich mir unsicher, denn es gibt ja das Problem der Versionsunterschiede. Warum also überhaupt lokal installieren? Kann ich also "src:" weglassen; und damit natürlich auch die url? Und falls ich die das "local" (und evtl. die CSS-"url" weglassen kann, so doch wohl nicht das "format" ('woff2')?

                      Wie also muss dass in meiner CSS aussehen? Finde ansonsten keine Beispiele auf selfhtml ...

                      Oder doch? Gleich die nächste Überschrift ("Einbindung und Verwendung") in obigem Link!

                      Demnach müsste mein Code so aussehen

                      html {
                        font-family: "IBM Plex Sans", "Fira Sans", sans-serif;
                        line-height: 1.5;
                      }
                      
                      @font-face {
                        font-family: 'meine-schrift;
                        src: url('pfad/zu/meinerschrift.woff2') format('woff2'),
                             url('pfad/zu/meinerschrift.woff') format('woff');/*konnte ich für openSUSE Tumbleweed hier runterladen: https://software.opensuse.org//download.html?project=M17N%3Afonts&package=ibm-plex - muss aber erst noch herausfinden, wo die Dateien nach der Installation mit 1-Click-Inistallation jetzt liegen - 😐*/  
                      }
                      p {
                      font-family: meine-schrift, "IBM Plex Sans", sans-serif;
                      }
                      

                      ?

                      Übrigens: meine beiden Schriftarten-Favoriten sind doch hoffentlich keine Google-Fonts? Denn ich habe irgendwo im Wiki gelesen, dass die Daten abgreifen, was ich keinem Besucher der Website zumuten möchte.

                      1. problematische Seite

                        Guten Morgen!

                        Ich lese seit mittlerweile einem Monat mit und staune, mit welchem Eifer du die Seite baust! Weiter so!

                        aber Du meintest den hier: https://wiki.selfhtml.org/wiki/Typografie/Schriftformatierung? Dennoch, bitte entschuldige, bin ich erschlagen von den Informationen des Links.

                        Und schon wieder eine (Folge-)Frage bezüglich dem Anlegen des "@font-face" ...

                        lokal

                        Hast du denn die Arvo lokal auf deinem System installiert? Wenn nicht, kein Wunder, dass du keine Änderung siehst. Wenn der Browser den Font nicht findet, kann er den Text nicht in dieser Schrift darstellen und nimmt sich halt die nächste Schrift aus dem font stack. Ne, ich habe weder die "Arvo", noch eine der inzwischen favorisierten Schriftarten (also "IBM Plux Sans", oder die "Fira Sans") auf meinem System (openSUSE Tumbleweed) installiert. Daher sehe ich sie nicht! 🙄

                        Hier hat Gunnar erklärt, was lokal ist: Dein Rechner!

                        In einer „normalen“ Testumgebung lädst Du Deine Webseite von der Platte und sie sucht sich Skripte aus dem /js/-Ordner, Bilder aus dem /img/-Ordner und der Browser baut da alles zusammen!

                        • In diesem Abschnitt wird erklärt, warum man irgendwann nicht mehr lokal testen kann: Fallstrick Same-Origin-Policy
                          • Sollte dieser Abschnitt weiter oben stehen, als Warnung in einer Box erscheinen?

                        Wenn du den Text in Arvo gesetzt sehen willst, installiere die Schriftart auf deinem System.

                        Wsl. auf dem Mac so, der einen integrierten Testserver hat, auf normalen Systemen greift da die Same-Origin-policy.

                        Wenn alle (naja, fast alle) Besucher deiner Seite den Text in Arvo gesetzt sehen sollen, packe die Fontdateien auf deinen Webserver und binde Arvo als Webfont ein (@font-face-Regeln).

                        Und da musst du ansetzen: Du brauchst die Schrift als Datei, vorzugsweise im woff2-Format! Die lieferst Du mit deinem HTML, deinen Bildern und Skripten an die Leser Deiner Webseite aus. Jetzt hat jeder die Schrift, die du dann im CSS für bestimmte Elemente (Überschriften?) angibst.

                        Da manche Nutzer auf Ihrem Computer einstellen, dass sie eine bestimmte Schrift als Standardschrift haben, ist eine Schriftangabe Deinerseits eben ein Angebot.

                        Also werde ich mich bezüglich "@font-face" weiterbilden. Diese Seite hier, nicht? https://wiki.selfhtml.org/wiki/Typografie/Schriftformatierung#.40font-face

                        Ja.

                        Bei

                        src: local('meine-schrift')
                        

                        bin ich mir unsicher, denn es gibt ja das Problem der Versionsunterschiede. Warum also überhaupt lokal installieren?

                        Da muss ich mich schlau machen, Das MDN sagt zu src: local():

                        Web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless HTTP access controls are used to relax this restriction.

                        Kann ich also "src:" weglassen; und damit natürlich auch die url? Und falls ich die das "local" (und evtl. die CSS-"url" weglassen kann, so doch wohl nicht das "format" ('woff2')?

                        Nein, weil du ohne url eben voraussetzt, dass Nutzer die Schrift-Datei lokal installiert haben. Und das geht - wie oben erklärt - eben nicht!

                        Fazit: lokal + font = geht nicht!

                        Google-Fonts

                        Übrigens: meine beiden Schriftarten-Favoriten sind doch hoffentlich keine Google-Fonts? Denn ich habe irgendwo im Wiki gelesen, dass die Daten abgreifen, was ich keinem Besucher der Website zumuten möchte.

                        Das war 2010 eine große Verbesserung: anstatt damals Schriften in mehreren Formaten mit jeder Seite mitzuliefern, konntest Du sie mit einem Link zu Google einbinden, die dann automatisch die Browserdaten auslasen und dann die gewünschte Schrift im passenden Format ausgaben.

                        Die Schriften selbst sind aber keine Google-Fonts - wenn man genau hinschaut, merkt man, dass Google freie Fonts einfach als seine „verkauft“.

                        Problematisch war eben das Abgreifen der Daten der Nutzer. Das geht heute immer noch, benötigt heute aber ein Einverständnis der Nutzer, das du vor dem Benutzen der Seite abfragst.

                        Schöner geht es, wenn Du die Schriftdateien selbst im woff2-Format hostest und auslieferst. Dann werden keine Daten erhoben.

                        HTML/Tutorials/Google-Fonts_selbst_hosten

                        Herzliche Grüße

                        Matthias Scharwies

                        --
                        Die Signatur findet sich auf der Rückseite des Beitrags.
                        1. problematische Seite

                          Hallo Matthias, guten Morgen (jetzt ist schon Tag) zurück!

                          Guten Morgen!

                          Ich lese seit mittlerweile einem Monat mit und staune, mit welchem Eifer du die Seite baust! Weiter so!

                          Danke, Ermutigung kann ich immer brauchen. 😉 Aber auch vielen Dank zurück, vor allem an Gunnar, der sich ja hier wirklich reinhängt! Und Rolf, - wenn ich mich recht entsinne, ist ein Großteil des CSS-Codes von ihm? 🤗

                          Und schon wieder eine (Folge-)Frage bezüglich dem Anlegen des "@font-face" ...

                          lokal

                          Hast du denn die Arvo lokal auf deinem System installiert? Wenn nicht, kein Wunder, dass du keine Änderung siehst. Wenn der Browser den Font nicht findet, kann er den Text nicht in dieser Schrift darstellen und nimmt sich halt die nächste Schrift aus dem font stack. Ne, ich habe weder die "Arvo", noch eine der inzwischen favorisierten Schriftarten (also "IBM Plux Sans", oder die "Fira Sans") auf meinem System (openSUSE Tumbleweed) installiert. Daher sehe ich sie nicht! 🙄

                          Hier hat Gunnar erklärt, was lokal ist: Dein Rechner!

                          Ja, das ist mir klar (schon lange 😉). Es ist vielleicht noch zu beachten, dass ich nicht unter Windows, sondern unter Linux (openSUSE Tumbleweed) arbeite; das bringt manches von zu Hause aus mit, was unter Windows erst nachinstalliert werden muss. Was aber nicht heißt, dass ich der "Coder" oder völlige Duchblicker bin. Ich nutze Linux "nur".

                          Praktisch gehe ich so vor: Da ich vor einer Veröffentlichung (fast ausschließlich) alle Daten erst mal nur in einem lokalen Verzeichnis habe, kann ich es zu Testzwecken (zum Beispiel einen HTML- und CSS-Validator (Link zu verschiedenen Validatoren (HTML- und CSS-Format) drüberlaufen lassen, verschiedene Bildschirmgrößen ausprobieren, Links testen, etc.) so aufrufen:

                          Eingabe in der Adresszeile des Browsers (bei mir der neueste "Firefox" oder dessen Fork "Libre Wolf") folgendermassen:

                          file:///Pfad/wo/die/Homepage-Dateien/liegen/
                          

                          So sehe ich eins zu eins, an was ich arbeite und wie sich Änderungen auswirken. Natürlich muss man nach einer Änderung immer erst (mit F5) die Seite aktualisieren; manchmal braucht es auch ein Strg+R. Einmal spielte mir wohl auch der Cache irgendwie einen Streich ... Wenn dann alles (hoffentlich) korrekt ist, wird die Datei mittels SFTP-Client (oder per Drag&Drop) vom lokalen Speicherort auf meinen Webserver kopiert. Bei kniffeligen Änderungen mache ich vom vorherigen Zustand der jeweiligen Datei auch noch eine Kopie für eventuell erforderliche Rückschritte.

                          In einer „normalen“ Testumgebung lädst Du Deine Webseite von der Platte und sie sucht sich Skripte aus dem /js/-Ordner, Bilder aus dem /img/-Ordner und der Browser baut da alles zusammen!

                          Auch das ist eigentlich klar.

                          • In diesem Abschnitt wird erklärt, warum man irgendwann nicht mehr lokal testen kann: Fallstrick Same-Origin-Policy
                            • Sollte dieser Abschnitt weiter oben stehen, als Warnung in einer Box erscheinen?

                          Hm, "erklärt" ist für mich jetzt etwas zu viel gesagt. Es ist ein Hinweis, mit einigen Erläuterungen (die ich im Groben auch nachvollziehen kann), ohne mir jetzt aber für die Praxis den Schubser zu geben, wie ich weiter vorzugehen habe.

                          Wenn du den Text in Arvo gesetzt sehen willst, installiere die Schriftart auf deinem System.

                          Wsl. auf dem Mac so, der einen integrierten Testserver hat, auf normalen Systemen greift da die Same-Origin-policy.

                          Wenn alle (naja, fast alle) Besucher deiner Seite den Text in Arvo gesetzt sehen sollen, packe die Fontdateien auf deinen Webserver und binde Arvo als Webfont ein (@font-face-Regeln).

                          Und da musst du ansetzen: Du brauchst die Schrift als Datei, vorzugsweise im woff2-Format! Die lieferst Du mit deinem HTML, deinen Bildern und Skripten an die Leser Deiner Webseite aus. Jetzt hat jeder die Schrift, die du dann im CSS für bestimmte Elemente (Überschriften?) angibst.

                          Da manche Nutzer auf Ihrem Computer einstellen, dass sie eine bestimmte Schrift als Standardschrift haben, ist eine Schriftangabe Deinerseits eben ein Angebot.

                          Also werde ich mich bezüglich "@font-face" weiterbilden. Diese Seite hier, nicht? https://wiki.selfhtml.org/wiki/Typografie/Schriftformatierung#.40font-face

                          Ja.

                          Bei

                          src: local('meine-schrift')
                          

                          bin ich mir unsicher, denn es gibt ja das Problem der Versionsunterschiede. Warum also überhaupt lokal installieren?

                          Da muss ich mich schlau machen, Das MDN sagt zu src: local():

                          Web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless HTTP access controls are used to relax this restriction.

                          Übersetzung (über deepl.com): "Für Web-Schriftarten gilt dieselbe Beschränkung (Schriftdateien müssen sich in derselben Domäne befinden wie die Seite, die sie verwendet), es sei denn, diese Beschränkung wird durch HTTP-Zugriffskontrollen aufgehoben."

                          Kann ich also "src:" weglassen; und damit natürlich auch die url? Und falls ich die das "local" (und evtl. die CSS-"url" weglassen kann, so doch wohl nicht das "format" ('woff2')?

                          Nein, weil du ohne url eben voraussetzt, dass Nutzer die Schrift-Datei lokal installiert haben. Und das geht - wie oben erklärt - eben nicht!

                          Fazit: lokal + font = geht nicht!

                          Google-Fonts

                          Übrigens: meine beiden Schriftarten-Favoriten sind doch hoffentlich keine Google-Fonts? Denn ich habe irgendwo im Wiki gelesen, dass die Daten abgreifen, was ich keinem Besucher der Website zumuten möchte.

                          Das war 2010 eine große Verbesserung: anstatt damals Schriften in mehreren Formaten mit jeder Seite mitzuliefern, konntest Du sie mit einem Link zu Google einbinden, die dann automatisch die Browserdaten auslasen und dann die gewünschte Schrift im passenden Format ausgaben.

                          Die Schriften selbst sind aber keine Google-Fonts - wenn man genau hinschaut, merkt man, dass Google freie Fonts einfach als seine „verkauft“.

                          Na hoffentlich ist das so. Die "IBM Plex Sans" auf jeden Fall. Das habe ich schon recherchiert.

                          Problematisch war eben das Abgreifen der Daten der Nutzer. Das geht heute immer noch, benötigt heute aber ein Einverständnis der Nutzer, das du vor dem Benutzen der Seite abfragst.

                          Ja, aber wer schaut sich die Klauseln schon an (sind ja auch extra lang verfasst oder kontrolliert die Firmen, die meinen "essentielle" Daten abgreifen zu müssen?! Meist nur so Leute wie ich; wobei ich es meide, wo möglich, solche Seiten überhaupt zu besuchen.

                          Schöner geht es, wenn Du die Schriftdateien selbst im woff2-Format hostest und auslieferst. Dann werden keine Daten erhoben.

                          Ja, genau das möchte ich nun noch umsetzen. 😁

                          HTML/Tutorials/Google-Fonts_selbst_hosten

                          Gleich mal schauen, ob ich das kapiere ...

                          Herzliche Grüße

                          Matthias Scharwies

                          Vielen Dank für Dein hilfreiches Feedback, Matthias!

                          P.s. Was für Validatoren nutzt Ihr denn? Auf obigem Link (vom selfhtml-Wiki) finde ich folgende:

                          A) HTML-Validatoren:

                          1. validator.w3.org, DTD-basiert https://validator.w3.org/
                          2. https://validator.w3.org/nu/, nicht DTD-basiert, beruht auf dem "validator.nu" https://validator.w3.org/nu/
                          3. validator.nu https://validator.w3.org/nu/

                          B) CSS-Validatoren:

                          1. W3C Developer Tools http://w3c.github.io/developers/tools/ → Bei dem kapiere ich was nicht (öffnet sich nur in Github oder der (Linux-)Konsole / Terminal?)
                          2. CSS Validator (W3C): Der maßgebliche, vom W3-Konsortium zur Verfügung gestellte Syntax-Check für eigene Stylesheets. Überprüft wird, ob der CSS-Quelltext korrekt ist. http://jigsaw.w3.org/css-validator/

                          Gibt es dort Unterschiede (vielleicht Einschränkungen oder Optionierungen, je nach Arbeitsweise oder Bedürfniss?

                          Vielen Dank für Eure Hilfe!

                          Holger

                          1. problematische Seite

                            Hallo Matthias, guten Morgen (jetzt ist schon Tag) zurück!

                            Hallo Holger (jetzt ist schon wieder dunkel)

                            Hier hat Gunnar erklärt, was lokal ist: Dein Rechner!

                            Ja, das ist mir klar (schon lange 😉).

                            Gut! 😀

                            Es ist vielleicht noch zu beachten, dass ich nicht unter Windows, sondern unter Linux (openSUSE Tumbleweed) arbeite; das bringt manches von zu Hause aus mit, was unter Windows erst nachinstalliert werden muss. Was aber nicht heißt, dass ich der "Coder" oder völlige Duchblicker bin. Ich nutze Linux "nur".

                            Anscheinend ist doch nich alles klar! 😉

                            Das Betriebssytem an sich hat nichts mit Webseiten und den Browsern zu tun!

                            Schriften kannst du nicht lokal testen - das verbieten die Browser!

                            Deshalb benötigst Du einen Webserver!

                            Praktisch gehe ich so vor:

                            Eingabe in der Adresszeile des Browsers (bei mir der neueste "Firefox" oder dessen Fork "Libre Wolf") folgendermassen:

                            file:///Pfad/wo/die/Homepage-Dateien/liegen/
                            

                            So sehe ich eins zu eins, an was ich arbeite und wie sich Änderungen auswirken.

                            Aber eben nicht bei Schriften!

                            • In diesem Abschnitt wird erklärt, warum man irgendwann nicht mehr lokal testen kann: Fallstrick Same-Origin-Policy
                              • Sollte dieser Abschnitt weiter oben stehen, als Warnung in einer Box erscheinen?

                            Hm, "erklärt" ist für mich jetzt etwas zu viel gesagt. Es ist ein Hinweis, mit einigen Erläuterungen (die ich im Groben auch nachvollziehen kann), ohne mir jetzt aber für die Praxis den Schubser zu geben, wie ich weiter vorzugehen habe.

                            Könntest du den neugefassten Abschnitt noch mal gegenlesen?

                            Ich hoffe, dass das jetzt klarer formuliert ist!

                            Warum also überhaupt lokal installieren?

                            Da muss ich mich schlau machen, Das MDN sagt zu src: local():

                            Web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless HTTP access controls are used to relax this restriction. Übersetzung (über deepl.com): "Für Web-Schriftarten gilt dieselbe Beschränkung (Schriftdateien müssen sich in derselben Domäne befinden wie die Seite, die sie verwendet), es sei denn, diese Beschränkung wird durch HTTP-Zugriffskontrollen aufgehoben."

                            Das war vorher im Text nicht falsch, aber das wichtige fehlte. Ist es jetzt besser/ verständlicher?

                            Fazit: lokal + font = geht nicht!

                            Google-Fonts

                            Problematisch war eben das Abgreifen der Daten der Nutzer. Das geht heute immer noch, benötigt heute aber ein Einverständnis der Nutzer, das du vor dem Benutzen der Seite abfragst.

                            Ja, aber wer schaut sich die Klauseln schon an (sind ja auch extra lang verfasst oder kontrolliert die Firmen, die meinen "essentielle" Daten abgreifen zu müssen?! Meist nur so Leute wie ich; wobei ich es meide, wo möglich, solche Seiten überhaupt zu besuchen.

                            Das war für Anwälte halt eine Gelegenheit mit einem Bot Firmenwebseiten auf fremde (kostenpflichtige) Schriften zu durchsuchen und dann Abmahnungen zu erstellen. Besonders schlimm wurde es, als auch Einbindungen von Google-Fonts als "Weitergabe von Nutzerdaten" angesehen wurden und die Anwälte von einem Gericht auch noch Recht bekamen. Anwälte handeln da angeblich im Auftrag eines Mitbewerbers, ob das Fehlen eines solchen bei gemeinnützigen Vereinen euch vor juristischem Ärger bewahrt, weiß man nicht.

                            Schöner geht es, wenn Du die Schriftdateien selbst im woff2-Format hostest und auslieferst. Dann werden keine Daten erhoben.

                            Ja, genau das möchte ich nun noch umsetzen. 😁

                            HTML/Tutorials/Google-Fonts_selbst_hosten

                            Gleich mal schauen, ob ich das kapiere ...

                            Gib eine Rückmeldung, ob der Text verständlich ist!

                            P.s. Was für Validatoren nutzt Ihr denn? Auf obigem Link (vom selfhtml-Wiki) finde ich folgende:

                            A) HTML-Validatoren:

                            1. validator.w3.org, DTD-basiert https://validator.w3.org/
                            2. https://validator.w3.org/nu/, nicht DTD-basiert, beruht auf dem "validator.nu" https://validator.w3.org/nu/
                            3. validator.nu https://validator.w3.org/nu/

                            B) CSS-Validatoren:

                            1. W3C Developer Tools http://w3c.github.io/developers/tools/ → Bei dem kapiere ich was nicht (öffnet sich nur in Github oder der (Linux-)Konsole / Terminal?)
                            2. CSS Validator (W3C): Der maßgebliche, vom W3-Konsortium zur Verfügung gestellte Syntax-Check für eigene Stylesheets. Überprüft wird, ob der CSS-Quelltext korrekt ist. http://jigsaw.w3.org/css-validator/

                            Beim normalen Validator kannst du auch HTML4 und so was checken lassen. Der nu-Validator testet automatisch auf HTML5.

                            Der nu-Validator checkt auch CSS-Dateien (Deine ist fehlerfrei! Super!)

                            Herzliche Grüße

                            Matthias Scharwies

                            --
                            Die Signatur findet sich auf der Rückseite des Beitrags.
                            1. problematische Seite

                              Hallo Matthias,

                              Besonders schlimm wurde es, als auch Einbindungen von Google-Fonts als "Weitergabe von Nutzerdaten" angesehen wurden

                              Was das Testwiki mit Oswald nach wie vor tut. Es funktioniert nur nicht, weil das fonts.css mit anderen CSS gebündelt wird und der @import für Oswald damit nicht am Beginn einer (virtuellen) CSS Datei steht.

                              Das Hauptwiki hat Oswald auf unserem Server, ich sehe aber keine Einbindung. Die wurde offenbar entfernt.

                              Rolf

                              --
                              sumpsi - posui - obstruxi
                              1. problematische Seite

                                Servus!

                                Hallo Matthias,

                                Besonders schlimm wurde es, als auch Einbindungen von Google-Fonts als "Weitergabe von Nutzerdaten" angesehen wurden

                                Was das Testwiki mit Oswald nach wie vor tut. Es funktioniert nur nicht, weil das fonts.css mit anderen CSS gebündelt wird und der @import für Oswald damit nicht am Beginn einer (virtuellen) CSS Datei steht.

                                Das Hauptwiki hat Oswald auf unserem Server, ich sehe aber keine Einbindung. Die wurde offenbar entfernt.

                                Wollen wir das alles mal neu machen?

                                Herzliche Grüße

                                Matthias Scharwies

                                --
                                Die Signatur findet sich auf der Rückseite des Beitrags.
                            2. problematische Seite

                              Hallo Matthias,

                              danke für die Hilfe und auch für das private Angebot!

                              Anscheinend ist doch nich alles klar! 😉

                              Das Betriebssytem an sich hat nichts mit Webseiten und den Browsern zu tun!

                              Schriften kannst du nicht lokal testen - das verbieten die Browser!

                              Deshalb benötigst Du einen Webserver!

                              Praktisch gehe ich so vor:

                              Eingabe in der Adresszeile des Browsers (bei mir der neueste "Firefox" oder dessen Fork "Libre Wolf") folgendermassen:

                              file:///Pfad/wo/die/Homepage-Dateien/liegen/
                              

                              So sehe ich eins zu eins, an was ich arbeite und wie sich Änderungen auswirken.

                              Aber eben nicht bei Schriften!

                              O.k.; war mir doch nicht so klar. 😉

                              • In diesem Abschnitt wird erklärt, warum man irgendwann nicht mehr lokal testen kann: Fallstrick Same-Origin-Policy
                                • Sollte dieser Abschnitt weiter oben stehen, als Warnung in einer Box erscheinen?

                              Hm, "erklärt" ist für mich jetzt etwas zu viel gesagt. Es ist ein Hinweis, mit einigen Erläuterungen (die ich im Groben auch nachvollziehen kann), ohne mir jetzt aber für die Praxis den Schubser zu geben, wie ich weiter vorzugehen habe.

                              Könntest du den neugefassten Abschnitt noch mal gegenlesen?

                              Ich hoffe, dass das jetzt klarer formuliert ist!

                              Ich habe es gestern Nacht mal durchgelesen. Habe aber nicht viel verstanden. Und da ich bei meiner Erstlektüre (bevor Du den Text ergänzt hast) auch nicht viel verstanden habe, weiß ich jetzt auch nicht, was geändert wurde.

                              Du meintest in Deiner Mail ja auch, dass ich erst mal Prioritäten setze. So schieben wir das jetzt mal in den Hintergrund und ich melde mich dann, wenn die Grundlagen (der noch sichtbare Skip-Link in der index.html und die Anpassung des HTML-Code's nach dem Vorbild der index.html in den übrigen Seiten)

                              Warum also überhaupt lokal installieren?

                              Da muss ich mich schlau machen, Das MDN sagt zu src: local():

                              Web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless HTTP access controls are used to relax this restriction. Übersetzung (über deepl.com): "Für Web-Schriftarten gilt dieselbe Beschränkung (Schriftdateien müssen sich in derselben Domäne befinden wie die Seite, die sie verwendet), es sei denn, diese Beschränkung wird durch HTTP-Zugriffskontrollen aufgehoben."

                              Das war vorher im Text nicht falsch, aber das wichtige fehlte. Ist es jetzt besser/ verständlicher?

                              Wie gesagt, kann ich momentan leider nicht beurteilen. Muss gleich ins Bett und habe frühestens Donnerstag wieder etwas Zeit. Schlafe - wenn ich seit einer Woche auch wieder arbeite - überdurchschnittlich viel.

                              Freundlichen Gruß

                              Holger

                        2. problematische Seite

                          @@Matthias Scharwies

                          Das MDN sagt zu src: local():

                          Web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless HTTP access controls are used to relax this restriction.

                          Das kann sich doch gar nicht auf local() beziehen? Da kommt ja der Font von gar keiner Domain und gar nicht über HTTP, sondern übers lokale Dateisystem?

                          In Firefox jedenfalls; da werden beide Zeilen in diesem Codepen gleich gesetzt: in Fira Sans. (Lokale Installation von Fira Sans vorausgesetzt. Wenn ihr die nicht auf eurem System habt, gebt stattdessen was anderes an.)

                          In Chrome wird die erste Zeile in der Defaultschrift gerendert; das dürfte bei mir wie bei den meisten Times New Roman sein.

                          Fazit: lokal + font = geht nicht!

                          Natürlich geht das. Siehe 2. Zeile.

                          Kwakoni Yiquan

                          --
                          Ad astra per aspera
                          1. problematische Seite

                            @@Gunnar Bittersmann

                            Das MDN sagt zu src: local():

                            Web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless HTTP access controls are used to relax this restriction.

                            Das kann sich doch gar nicht auf local() beziehen? Da kommt ja der Font von gar keiner Domain und gar nicht über HTTP, sondern übers lokale Dateisystem?

                            In Firefox jedenfalls; da werden beide Zeilen in diesem Codepen gleich gesetzt: in Fira Sans. (Lokale Installation von Fira Sans vorausgesetzt. Wenn ihr die nicht auf eurem System habt, gebt stattdessen was anderes an.)

                            In Chrome wird die erste Zeile in der Defaultschrift gerendert; das dürfte bei mir wie bei den meisten Times New Roman sein.

                            Ah, Chrome braucht eine Extra-Einladung. Der sucht sich bei src: local('Fira Sans') nicht einen Default-Schriftschnitt; aber src: local('Fira Sans Regular') funktioniert auch in Chrome.

                            Neuer Pen, neues Glück.

                            Kwakoni Yiquan

                            --
                            Ad astra per aspera
      2. problematische Seite

        Hallo HTML_go,

        wenn du <div class="topnav"> durch <nav> ersetzt, musst Du auch .topnav im CSS durch nav ersetzen.

        Dass Du das <div class="center"> nicht brauchst, hattest Du gesehen? Es gibt dann ein paar Klimmzüge mit den Margins, lässt sich aber lösen. Siehst Du in meinem Fiddle.

        Rolf

        --
        sumpsi - posui - obstruxi
      3. 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
        1. problematische Seite

          Hallo Auge,

          vielen Dank für Deine ausführlichen Anmerkungen. Wenn ich das auf die Schnelle jetzt richtig gesehen habe, ist schon alles durch den Beitrag von Rolf von mir umgesetzt worden (<div>, <br> <class> weg).

          Was mich schon immer gewundert hatte, ist die verlorengehende Fett-Formatierung in den Überschriften der verschiedenen Seiten. Jetzt weiß ich, warum!

          Ich sag's nochmal: Ihr seid alle richtig spitze! 👍👍

          Danke

          Holger

          1. problematische Seite

            Hallo

            Was mich schon immer gewundert hatte, ist die verlorengehende Fett-Formatierung in den Überschriften der verschiedenen Seiten. Jetzt weiß ich, warum!

            Sie geht strengenommen nicht verloren, aber sie wird durch die sowieso schon fette Formatierung der Überschrift überdeckt.

            Du kannst sie aber wieder hervorlocken, indem du für font-weight numerische Angaben machst.

            Beispiel:

            h1 {
                font-weight: 600;
            }
            h1 b {
                font-weight: 900;
            }
            

            Als numerische Werte sind Zahlen zwischen 1 und 1000 erlaubt. Je größer die Zahl, desto fetter die Darstellung. Mit den Werten musst du selbst ein wenig herumexperimentieren. Lies dich dazu bitte im SelfHTML-Artikel zu font-weight ein.

            Ich sag's nochmal: Ihr seid alle richtig spitze! 👍👍

            Danke

            Ebenfalls danbke. Schön, das mal zu lesen. 🙂

            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. problematische Seite

              @@Auge

              Was mich schon immer gewundert hatte, ist die verlorengehende Fett-Formatierung in den Überschriften der verschiedenen Seiten. Jetzt weiß ich, warum!

              Sie geht strengenommen nicht verloren, aber sie wird durch die sowieso schon fette Formatierung der Überschrift überdeckt.

              Ob das wirklich so ist, hängt von der verwendeten Schiftart ab. Und wenn man nichts dagegen tut, auch vom Browser (seufz).

              Ich habe die Fira Sans in Schriftschnitten von Ultraleicht (200) bis Ultra (900) installiert. Wenn dann die Überschrift in 700 gerendert wird, ist noch Luft nach oben für etwas Fettes:

              Schriftzug „Jetzt kommen die fetten Jahre“ in Fettschrift, wobei „fetten“ noch fetter ist

              So sieht das Beispiel ohne weiteres Zutun in einem vernünftigen Browser (Firefox) aus. Nicht jedoch in Chromia, da ist „fetten“ nicht noch fetter.

              Das liegt daran, dass in Firefox b { font-weight: bolder } Default ist, in Chromium aber b { font-weight: bold }. Buh!

              Es kann also durchaus sinnvoll sein, den weniger sinnigen Default für b, strong (u.a.?) in seinem Stylesheet zu überschreiben.

              🖖 Живіть довго і процвітайте

              --
              Ad astra per aspera
            2. problematische Seite

              Hallo Auge (und Mitleser),

              Sie geht strengenommen nicht verloren, aber sie wird durch die sowieso schon fette Formatierung der Überschrift überdeckt.

              Du kannst sie aber wieder hervorlocken, indem du für font-weight numerische Angaben machst.

              Beispiel:

              h1 {
                  font-weight: 600;
              }
              h1 b {
                  font-weight: 900;
              }
              

              Also so?

              h1 {
                font-weight: 600;
                background-color: hsl(280 2% 28%);
                color: white;
                text-align: center;
                margin: 1em 0 0.5em 0; /* Hier Abstand zwischen Nav und darunterstehendem Seiten-Inhalt einstellen */
                padding: 0.75em 1em;
                font-size: 1.4em;
              }
              
              h1 b {
                font-weight: 900;
              }
              

              Und noch eine Frage: Muss ich jetzt im HTML noch was ändern? Oder kapiert das HTML, dass ich mit "h1 b" im CSS die Fett-Formatierung

              <b>Zeichen, die FETT hervorgehoben werden sollen</b>

              meine, wie zum Beispiel auf der Seite "Jugend"?

              <h1>Jugendtreff <b>Lights On</b> &ndash; <b>Neu</b> in neuen Räumlichkeiten</h1>
              

              Übrigens merke ich nach Änderung (siehe oben) im CSS lokal noch keine Änderung der bislang "unsichtbaren" Fett-Darstellung ...

              Danke für Rückmeldung(en)

              Holger

              1. problematische Seite

                @@HTML_go

                h1 {
                  font-weight: 600;}
                
                h1 b {
                  font-weight: 900;
                }
                

                Und noch eine Frage: Muss ich jetzt im HTML noch was ändern? Oder kapiert das HTML, dass ich mit "h1 b" im CSS die Fett-Formatierung […] meine, wie zum Beispiel auf der Seite "Jugend"?

                Das HTML muss da nichts kapieren. Kann auch gar nicht – nicht seine Aufgabe. Es geht um die Darstellung (rendering), die sich aus dem HTML (bzw. dem DOM) und dem Stylesheet (bzw. dem CSSOM) ergibt.

                Du musst da nichts ändern, mit h1 b werden alle b-Elemente selektiert, die sich in h1-Elementen befinden. Besser gesagt: im h1-Element, Singular – es sollte nur eins davon auf einer Seite geben.

                Übrigens merke ich nach Änderung (siehe oben) im CSS lokal noch keine Änderung der bislang "unsichtbaren" Fett-Darstellung ...

                Kannst du wohl auch nicht – nicht bei der von dir verwendeten Schriftart. Wenn die Schrifart nur Schnitte (Fonts) für Normalschrift und Fettschrift hat, dann wird für 600 Fettschrift genommen. Und für 900 auch, also kein Unterschied.

                Wenn da noch eine Abstufung sein soll, brauchst du eine Schriftart, die neben fett (bold) auch noch einen Font für einen noch fetteren Schriftschnitt hat (kann heavy oder black heißen oder ultra wie bei der erwähnten Fira Sans).

                Kwakoni Yiquan

                --
                Ad astra per aspera
                1. problematische Seite

                  Danke Gunnar,

                  was für eine Schriftart würdest Du denn vorschlagen (sollte möglichst in allen Browsern gut dargestellt werden, nicht?) und vor allem: wie baue ich das ein?

                  Vielleicht so (abgesehen davon, ob diese Schriftarten zu empfehlen sind)?

                  html {
                    line-height: 1.5;
                    font-family: Verdana, Helvetica, Arial, sans-serif;
                  }
                  

                  Lokal ändert sich derzeit noch nichts.

                  Die fraglichen CSS-Bereiche:

                  html {
                    line-height: 1.5;
                    font-family: Verdana, Helvetica, Arial, sans-serif;
                  }
                  
                  ...
                  
                  h1 {
                    font-weight: 600;
                    background-color: hsl(280 2% 28%);
                    color: white;
                    text-align: center;
                    margin: 1em 0 0.5em 0; /* Hier Abstand zwischen Nav und darunterstehendem Seiten-Inhalt einstellen */
                    padding: 0.75em 1em;
                    font-size: 1.4em;
                  }
                  
                  h1 b {
                    font-weight: 900;
                  }
                  

                  Danke für weitere Infos!

                  Holger

  4. problematische Seite

    Hallo HTML_go,

    während die anderen referiert haben, habe ich mal gebastelt.

    https://jsfiddle.net/Rolf_b/fc7dnbrw/

    • Kein div class="center", das kann man mit dem body selbst machen
    • Dinge, die man im CSS als Element selektieren kann, brauchen keine Klasse. Also kein <header class="header"> oder <h1 class="ueberschrift">
    • Dinge, die man im CSS über Kombinatoren selektieren kann, brauchen auch keine Klasse, über die man sie gezielt findet. Bspw. braucht dein Header-Bild keine Klasse, du selektierst es über header img { ... }
    • dass das div.topnav ein nav Element sein möchte, hatte schon Gunnar geschrieben.
    • Die Navigation in eine Liste zu stecken, ist gute Praxis, weil Screenreader das besser vortragen ("Navigation, Liste mit 6 Einträgen, Erster Eintrag: Link Startseite, etc")
    • Die Navigation hast Du als Flexbox realisiert. Für die Vertikaldarstellung ist es dann am einfachsten, nur die Richtung umzuschalten (flex-direction: column).
    • Gunnars Vorschlag, die aktuelle Seite als Link zu belassen und damit auf den Hauptbereich zu verlinken, habe ich schnell noch eingebaut
    • Die aktuelle Seite mit aria-current="page" zu markieren habe ich auch drin. Man selektiert im CSS das Element, das ein aria-current-Element trägt, mit [aria-current]. Solange Du keine unterschiedlichen aria-current Markierungen brauchst, reicht das. Andernfalls schau Dir die Attributselektoren an.
    • Du solltest vertikale Abstände nicht mit <br> herstellen. Gib lieber der Überschrift einen zusätzlichen margin-top (oder der Navigation einen zusätzlichen margin-bottom)
    • Der Hauptteil der Seite unterhalb der Navigation sollte in ein <main> Element eingehüllt werden
    • ein div mit class="ueberschrift" um die Überschrift herum ist nicht sinnvoll. Das h1 Element kann das gut alleine. Was durch dein div passiert, ist, dass die Paddings und die Font-Vergrößerung doppelt wirken. Schmeiß das div weg und gib dem h1 entsprechend größere Werte.
    • Achso, Werte. Nimm lieber em, dann passen sich die Abstände an, wenn jemand die Seite zoomed. Ich tune das meistens nie so fein und bleibe bei 0.25em, 0.5em und 1em (Viertel, Halb, Ganz)
    • Flexbox und Float in der Navigation beißen sich. Nimm das float raus
    • max-width für Header und Nav brauchst Du nicht. Gib dem Body eine max-width von 50em oder 60em. Der Rest passt sich an.
    • overflow:hidden für die Navigation braucht es eigentlich auch nicht, zumindest nicht, wenn die floats weg sind. Durch overflow:hidden erschafft man einen "Blockformatierungskontext", aus dem die Floats nicht hinaushängen können wenn Überschriftenteile umbrechen. Flexbox macht das eh schon.
    • Wenn die Navigation so aussieht, dass die "Arbeit mit..." zweizeilig wird, dann ist es ganz schick, wenn die einzeiligen Nav-Items vertikal zentriert sind. Vertikales Zentrieren von Text ist immer ein Drama; am einfachsten geht es, das a Element zur Flexbox zu machen und align-items:center zu setzen.
    • Die Farben für Nav und h1 sollten deinem Logobild angepasst sein. Das waren sie nicht, dein Logobild verwendet einen ganz schwachen Lilaton im Grau. Du hattest hingegen ein kaltes Grau ohne Tönung und das stört – mich zumindest. Ich habe das Bild deshalb ins Malprogramm geladen und die RGB-Werte der Grautöne vom Rand und der Mitte ausgelesen, und dann in unseren Farbwähler übertragen. Im HSL-Feld sieht man dann den Lilaton (Hue≈280). Um Helligkeits- oder Sättigungsabstufungen für einen bestimmten Farbton zu bekommen, ist das HSL-Farbmodell (Hue, Saturation, Lightness) sehr hilfreich.
    • Und weil ich gerade dabei war, habe ich deiner Navigation einen ähnlichen Farbverlauf gemacht wie ihn das Titelbild hat 😀 (linear-gradient).
    • Wenn man die Navigation in eine Liste packt, muss man die Liste natürlich als solche verstecken, dazu habe ich Styles für nav ul und nav li ergänzt. Das biss sich dann etwas mit deiner ul Regel für die "Über uns" Seite, deshalb habe ich dieses ul als main ul selektiert.
    • Ob der Grünton für die aktuelle Seite eine gute Wahl ist, weiß ich nicht. Aus meiner Sicht beißt sich diese Farbe mit dem "Kontakt" des Header-Bilds; ich würde eine Farbe mit dem gleichen Hue wie der Farbverlauf (280deg) oder etwas, das im Farbkreis gegenüber liegt (z.B. 60deg) nehmen. Man muss dann nur auf den Kontrast zum Text achten, der darf nicht zu klein werden.

    Rolf

    --
    sumpsi - posui - obstruxi
    1. problematische Seite

      Wow Rolf!

      Habe das jetzt alles mal umgesetzt (von Deinem Link) und das gefällt mir sehr gut!

      Das Meiste Deiner Erläuterungen konnte ich auch nachvollziehen (beim Nachbauen), bei manchem fehlt mir entweder Hirn, oder viel Zeit für Lektüre; bin schließlich kein Coder, sondern eigentlich nur ein User.

      Aber mich begeistert HTML wirklich; es ist logisch (wenn auch das nicht meine große Stärke ist) und wenn man dann sieht, wie es in Verbindung mit CSS dargestellt wird, - wirklich topp!

      Ich bin natürlich wieder platt und gehe jetzt erst mal an die frische Luft (das erste mal seit fünf Tagen). Melde mich vielleicht heute Abend noch mal mit ein paar Fragen.

      Danke Euch allen!

      NACHTRAG: Lokal hat ja alles funktioniert (tut es immer noch), aber nach dem ich die bearbeiteten Dateien auf den Server hochgeladen habe, scheint das CSS überhaupt nicht vorhanden zu sein. Habe es über den Dateimanager (Dolphin, ich nutze Linux Tumbleweed mit KDE-Plasma-Desktop), aber auch mittels Dateimanager des Webhosting-Anbieters UND per Filezilla (der wirklich sauber arbeitet) probiert. Bis jetzt keine Darstellung, wie lokal ... Da bin ich ratlos 🙄

      Startseite ONLINE ohne CSS-Funktion

      Über uns ONLINE - ohne CSS-Funktion

      LOKALE Seiten funktionieren alle

      1. problematische Seite

        @@HTML_go

        Lokal hat ja alles funktioniert (tut es immer noch), aber nach dem ich die bearbeiteten Dateien auf den Server hochgeladen habe, scheint das CSS überhaupt nicht vorhanden zu sein.

        Lädt dein Browser vielleicht das Stylesheet nicht neu, sondern nimmt das alte aus dem Cache?

        Ich hab das so eingestellt, dass bei geöffnetem Entwicklertool der Browsercache ausgeschaltet ist.

        🖖 Живіть довго і процвітайте

        --
        Ad astra per aspera
        1. problematische Seite

          Hi Gunnar,

          Lädt dein Browser vielleicht das Stylesheet nicht neu, sondern nimmt das alte aus dem Cache?

          Ich hab das so eingestellt, dass bei geöffnetem Entwicklertool der Browsercache ausgeschaltet ist.

          So einfach! Auf dem Smartphone geht's, also muss es an den Firefox-Einstellungen liegen. Ich schau' nachher danach.

          Vielen Dank!

        2. problematische Seite

          Hi Gunnar,

          Lädt dein Browser vielleicht das Stylesheet nicht neu, sondern nimmt das alte aus dem Cache?

          muss ja wohl so sein. Nachdem ich nach ca. zwei Stunden zurück war (eigentlich gerade erst jetzt geprüft), ist der Cache auf jeden Fall leer: Firefox-Cache leer

          Ich hab das so eingestellt, dass bei geöffnetem Entwicklertool der Browsercache ausgeschaltet ist.

          In dem Link habe ich ehrlich gesagt keine Hilfe gefunden. Aber ich denke so, wie auf dem Bild oben, war ich schon richtig unterwegs, oder?

          Der Cache war (inzwischen) leer; weiß jetzt also nicht warum. Denn offensichtlich war er es davor nicht (habe nämlich nichts Neues hochgeladen, o.ä.).

          Auf jeden Fall sieht die Seite jetzt viel besser aus. 😀

          Danke!

          Holger

    2. problematische Seite

      @@Rolf B

      https://jsfiddle.net/Rolf_b/fc7dnbrw/

      • Kein div class="center", das kann man mit dem body selbst machen

      Ja, aber da feht bei dir noch was.

      Bei Systemen mit nicht überlagernder Scrollbar springt der Inhalt beim Seitenwechsel horizontal, wenn man von einer Seite mit wenig Inhalt (keine Scrollbar) zu einer mit viel Inhalt (mit Scrollbar) oder andersrum wechselt. Ich hab das in diesem Beispiel mit details simuliert.

      Das Herumgezappel unterbindet man mit scrollbar-gutter: stable – das sollte man bei zentriertem Seitenlayout immer tun. (Auskommentierung bei betreffender Codezeile entfernen, um den Unterschied zu sehen.)

      🖖 Живіть довго і процвітайте

      PS: Hat das einen Grund, warum du für "Fließtext in deine Kommatare schreibst?

      --
      Ad astra per aspera
      1. problematische Seite

        Hallo Gunnar Bittersmann,

        scrollbar-gutter kannte ich nocht nicht. Ist ja erst 2 Jahre alt 😉

        PS: Hat das einen Grund, warum du für "Fließtext in deine Kommatare schreibst?

        Das sind nicht meine ,tare. Offenbar gab es bei Holger einen Encoding-Unfall, und ich hatte keine Lust, den in meiner Kopie zu reparieren.

        Rolf

        --
        sumpsi - posui - obstruxi
        1. problematische Seite

          Hallo Gunnar Bittersmann,

          scrollbar-gutter kannte ich nocht nicht. Ist ja erst 2 Jahre alt 😉

          PS: Hat das einen Grund, warum du für "Fließtext in deine Kommatare schreibst?

          Das sind nicht meine ,tare. Offenbar gab es bei Holger einen Encoding-Unfall, und ich hatte keine Lust, den in meiner Kopie zu reparieren.

          Rolf

          Genau, wie gerade von mir bestätigt :-)

      2. problematische Seite

        Hallo

        Bei Systemen mit nicht überlagernder Scrollbar springt der Inhalt beim Seitenwechsel horizontal, wenn man von einer Seite mit wenig Inhalt (keine Scrollbar) zu einer mit viel Inhalt (mit Scrollbar) oder andersrum wechselt. …

        Das Herumgezappel unterbindet man mit scrollbar-gutter: stable – das sollte man bei zentriertem Seitenlayout immer tun.

        Was für ein wertvoller Tip. Wie auch Rolf kannte ich scrollbar-gutter: stable nicht, das „Herumgezappel“ als Benutzer von Netscape bis Firefox aber schon.

        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
      3. problematische Seite

        @@Gunnar Bittersmann

        Das Herumgezappel unterbindet man mit scrollbar-gutter: stable – das sollte man bei zentriertem Seitenlayout immer tun.

        Genauer gesagt: mit scrollbar-gutter: stable both-edges, damit es wirklich zentriert ist. Wie auch in MDN beschrieben und im Codepen verwendet.

        Und daran denken, dass scrollbar-gutter nicht padding oder margin ersetzt – das braucht man für Systeme mit sich drüberlegender Scrollbar.

        🖖 Живіть довго і процвітайте

        --
        Ad astra per aspera
      4. problematische Seite

        Hallo Gunnar,

        https://jsfiddle.net/Rolf_b/fc7dnbrw/

        • Kein div class="center", das kann man mit dem body selbst machen

        Ja, aber da fehlt bei dir noch was.

        Bei Systemen mit nicht überlagernder Scrollbar springt der Inhalt beim Seitenwechsel horizontal, wenn man von einer Seite mit wenig Inhalt (keine Scrollbar) zu einer mit viel Inhalt (mit Scrollbar) oder andersrum wechselt. Ich hab das in diesem Beispiel mit details simuliert.

        War auf Deinem Link und habe auch den auskommentierten Bereich (mehrfach) gelöscht. Weder in Smartphone-Auflösung, noch in normaler Breitbildauflösung des Firefox habe ich einen Unterschied bemerkt. Und anscheinend verstehe ich auch Deine obige Erläuterung dazu nicht. Sorry

        Das Herumgezappel unterbindet man mit scrollbar-gutter: stable – das sollte man bei zentriertem Seitenlayout immer tun. (Auskommentierung bei betreffender Codezeile entfernen, um den Unterschied zu sehen.)

        🖖 Живіть довго і процвітайте

        PS: Hat das einen Grund, warum du für "Fließtext in deine Kommatare schreibst?

        Hatte es, aber frag mich nicht, warum. Ich habe es inzwischen gelöscht. Außerdem ist nach Neuinstallation meines Editors (VSCodium - openSource zu dem zu MS sendenden Original) wohl Sprachlich was durcheinander geraten; daher die falsche Darstellung des Umlautes "Ü" und des "ß".

        1. problematische Seite

          Hallo

          … da fehlt bei dir noch was.

          Bei Systemen mit nicht überlagernder Scrollbar springt der Inhalt beim Seitenwechsel horizontal, wenn man von einer Seite mit wenig Inhalt (keine Scrollbar) zu einer mit viel Inhalt (mit Scrollbar) oder andersrum wechselt. Ich hab das in diesem Beispiel mit details simuliert.

          War auf Deinem Link und habe auch den auskommentierten Bereich (mehrfach) gelöscht. Weder in Smartphone-Auflösung, noch in normaler Breitbildauflösung des Firefox habe ich einen Unterschied bemerkt. Und anscheinend verstehe ich auch Deine obige Erläuterung dazu nicht. Sorry

          Wenn eine Website so kurz ist, dass sämtlicher Inhalt auf eine Bildschirmhöhe passt, wird im Firefox (von dem kenne ich das Verhalten) die Breite des Viewports über die gesamte verfügbare Breite gemessen und eine zentrierte Seite entsprechend eingepasst. Wechselt man dann auf der selben Website auf eine andere Seite, deren CSS-Regelwerk identisch ist, deren Inhalt jedoch hoch genug ist, um im Browserfenster einen senkrechten Scrollbalken zu benötigen, wird im Firefox nun die Breite der Seite unter Abzug der Breite des Scrollbalkens berechnet. Der Inhalt der zentrierten Seite springt nun um die halbe Scrollbalkenbreite nach links, da der Viewport jetzt schmaler ist, als jene ohne senkrechten Scrollbalken.

          Das sieht man nur in einem solchen Szenario und es sieht unschön und unruhig aus.

          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. problematische Seite

            @@Auge

            Wenn eine Website so kurz ist, dass sämtlicher Inhalt auf eine Bildschirmhöhe passt, wird im Firefox (von dem kenne ich das Verhalten)

            ?? Von anderen Browsern nicht?

            Auf macOS verhalten sich Safari, Firefox und Chromia identisch: Bei nicht überlagernder Scrollbar (Systemeinstellungen > Erscheinungsbild > Rollbalken einblenden: immer) springt der Inhalt beim Seitenwechsel horizontal, wenn man von einer Seite mit wenig Inhalt (keine Scrollbar) zu einer mit viel Inhalt (mit Scrollbar) oder andersrum wechselt (beim Default scrollbar-gutter: auto).

            Das Verhalten hat doch eher mit dem jeweiligen Betriebssystem zu tun als mit dem verwendeten Browser‽ Oder ist das auf anderen Betriebssystemen anders? (Browser haben vom OS abweichende Einstellungen für Scrollbars?)

            Mit scrollbar-gutter: stable both-edges springt es in Firefox und Chromia nicht mehr. Im Safari aber weiterhin, da der scrollbar-gutter nicht unterstützt. Kann man ihm auch nicht verübeln, da auf macOS überlagernde Scrollbars voreingestellt sind und das vermutlich kaum jemand ändert; d.h. man braucht das Feature in Safari auch nicht.

            🖖 Живіть довго і процвітайте

            --
            Ad astra per aspera
            1. problematische Seite

              Hallo

              Wenn eine Website so kurz ist, dass sämtlicher Inhalt auf eine Bildschirmhöhe passt, wird im Firefox (von dem kenne ich das Verhalten)

              ?? Von anderen Browsern nicht?

              Das wollte ich damit nicht sagen. Ich kenne dieses Verhalten vom Firefox am besten und längsten, da ich ihn und seine Vorgänger seit mehr als 20 Jahren als Standardbrowser nutze. Um das Problem zu beschreiben, das mit scrollbar-gutter gelöst werden kann, reicht das Verhalten eines Browsers, in dem das prinzipiell nachweisbar ist, meiner Meinung nach aus. Holgers Problem war ja, dass er nicht nachvollziehen konnte, was überhaupt das Problem ist. Wir, die wir uns seit den Zeiten von Netscape/Mozilla Suite und Internet Explorer [1] damit herumschlagen, können deiner Beschreibung folgen. Jemand, der erst heute in das Thema einsteigt, wird damit nicht sogleich in Berührung kommen.

              Auf macOS verhalten sich Safari, Firefox und Chromia identisch: Bei nicht überlagernder Scrollbar (Systemeinstellungen > Erscheinungsbild > Rollbalken einblenden: immer) springt der Inhalt beim Seitenwechsel horizontal, wenn man von einer Seite mit wenig Inhalt (keine Scrollbar) zu einer mit viel Inhalt (mit Scrollbar) oder andersrum wechselt (beim Default scrollbar-gutter: auto).

              Auf meinem Notebook mit Ubuntu Mate (Mate 1.26.0) werden die Scrollbars überlagernd angezeigt [2], daher springt dort nix [3]. Allerdings kann das auf anderen Linux-Desktops ganz anders sein. In Windows 10 kann ich das erst nächstes Jahr testen. Dort stehen mir Firefox, Chrome und Edge zur Verfügung.

              Das Verhalten hat doch eher mit dem jeweiligen Betriebssystem zu tun als mit dem verwendeten Browser‽ Oder ist das auf anderen Betriebssystemen anders? (Browser haben vom OS abweichende Einstellungen für Scrollbars?)

              Ich kann mich erinnern, im Firefox per about:config an der Darstellung der Scrollbars schrauben zu können.

              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. Der IE hatte das Problem ja nicht, weil er auch bei nicht benötigter Scrollbar den dafür vorgesehenen Platz dafür vorhielt. Daher war es in früheren Zeiten immer der Netscape, Mozilla Suite oder Firefox, zu dem hier im Forum die diesbezüglichen Fragen gestellt wurden. ↩︎

              2. was ich auf einem Desktop, den ich vorwiegend mit der Maus bediene, fürchterlich finde, zumal es keine Buttons zum scrollen gibt (am Anfang und Ende der Scrollbar) und ein Klick in den Bereich der Scrollbar (ober- und unterhalb) an den angeklickten Punkt springt, statt seitenweise weitzerzuspringen. ↩︎

              3. Nicht im Firefox und nicht im Vivaldi, den ich als Chrome-basierten Zweitbrowser nutze. ↩︎

              1. problematische Seite

                @@Auge

                Ich kann mich erinnern, im Firefox per about:config an der Darstellung der Scrollbars schrauben zu können.

                Ich hab da nur layout.testing.overlay-scrollbars.always-visible gefunden, das die überlappende Scrollbar immer anzeigt und nicht beim Nicht-Scrollen verschwinden lässt.

                Einen Schalter für überlappend/nicht überlappend (Überschreiben der Einstellung des Betriebssystems) hab ich nicht gesehen.

                Ich erinnere mich ganz dunkel, dass es da mal eine (proprietäre, vermutlich) CSS-Eigenschaft dafür gab. Prä-Chromium-Edge?

                2. was ich auf einem Desktop, den ich vorwiegend mit der Maus bediene, fürchterlich finde, zumal es keine Buttons zum scrollen gibt (am Anfang und Ende der Scrollbar) und ein Klick in den Bereich der Scrollbar (ober- und unterhalb) an den angeklickten Punkt springt, statt seitenweise weitzerzuspringen

                Das wiederum sollte man im Betriebssystem einstellen können. In macOS geht das jedenfalls:

                🖖 Живіть довго і процвітайте

                --
                Ad astra per aspera
        2. problematische Seite

          @@HTML_go

          Bei Systemen mit nicht überlagernder Scrollbar springt der Inhalt beim Seitenwechsel horizontal, wenn man von einer Seite mit wenig Inhalt (keine Scrollbar) zu einer mit viel Inhalt (mit Scrollbar) oder andersrum wechselt. Ich hab das in diesem Beispiel mit details simuliert.

          War auf Deinem Link und habe auch den auskommentierten Bereich (mehrfach) gelöscht. Weder in Smartphone-Auflösung, noch in normaler Breitbildauflösung des Firefox habe ich einen Unterschied bemerkt. Und anscheinend verstehe ich auch Deine obige Erläuterung dazu nicht. Sorry

          Ein (Bewegt-)Bild sagt mehr als 1000 Worte.

          🖖 Живіть довго і процвітайте

          --
          Ad astra per aspera
          1. problematische Seite

            Hallo Gunnar,

            War auf Deinem Link und habe auch den auskommentierten Bereich (mehrfach) gelöscht. Weder in Smartphone-Auflösung, noch in normaler Breitbildauflösung des Firefox habe ich einen Unterschied bemerkt. Und anscheinend verstehe ich auch Deine obige Erläuterung dazu nicht. Sorry

            Ein (Bewegt-)Bild sagt mehr als 1000 Worte.

            Also ich stehe noch immer auf dem Schlauch. Habe extra Deinen Link (Bewegt-)Bild" geklont" (im aktuellen FF) und die Anzeige des "ausgerollten" Textes (im einen Tab) vor und nach der Entfernung der Auskommentierung im CSS (im anderen Tab) verglichen; ich finde einfach keinen Unterschied in der Anzeige ... 😐

            Sorry, ich verstehe also noch immer nicht, worüber hier diskutiert wird.

            Holger

            1. problematische Seite

              @@HTML_go

              Ein (Bewegt-)Bild sagt mehr als 1000 Worte.

              Sorry, ich verstehe also noch immer nicht, worüber hier diskutiert wird.

              Ohne (d.h. mit auskommentierten) scrollbar-gutter: stable both-edges springt der Inhalt horizontal beim Aus-/Einklappen der Artikel, wenn die Scrollbar hinzukommt/wegfällt.

              Mit scrollbar-gutter: stable both-edges passiert das nicht.

              Kwakoni Yiquan

              --
              Ad astra per aspera
              1. problematische Seite

                Hallo Gunnar,

                DANKE! Jetzt endlich habe ich das gesehen, dieses horizontale Springen des oberen - immer sichtbaren - Textes! Bin mit den Augen wohl nicht so "sensibel". 😉

                Holger

  5. problematische Seite

    @@HTML_go

    Mal in deinen Kopf geschaut:

        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta charset="utf-8" />
    

    Die doppelte Angabe der Zeichencodierung macht keinen Sinn. Weg mit der ersten Angabe! Übrig bleibt:

        <meta charset="utf-8" />
    

        <title>
          Startseite | Sozialwerk KONTAKT e.V. | 78050 Villingen-Schwenningen
        </title>
        <link href="./standard.css" type="text/css" rel="stylesheet" />
    

    Das sollte weiter oben stehen, gleich hinter der Viewportangabe:

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>
          Startseite | Sozialwerk KONTAKT e.V. | 78050 Villingen-Schwenningen
        </title>
        <link href="./standard.css" type="text/css" rel="stylesheet" />
    

    Siehe Slide 39 von Harry Roberts’ Talk Get Your <head> Straight (Video + Transkiption).


    Mal in deinen Kopf geschaut (mal sollte head und header auseinanderhalten können 😏):

          <a href="./index.html">
            <img
              src="https://kontakt-vs.de/kontakt.png"
              alt="Banner Sozialwerk KONTAKT e.V. | 78050 Villingen-Schwenningen"
            />
          </a>
    

    Gut, dass das Bild einen Alternativtext hat. Nur passt der hier nicht so richtig. Das Bild verlinkt auf die Startseite; der Alternativtext sollte das in diesem Kontext auch sagen.

    “Universal law is for lackeys. Context is for kings.” — Lorca in Star Trek: Discovery S1:E3

    (Hier in der passenden Schrift. Dasselbe hab ich bei dem Vortrag auch gesagt. Das Video gibt’s wohl noch nicht online. Aber diesen Codepen.)


    Wo wir bei Accessibility sind und du nun schon <main id="main"> hast, kannst du auch noch einen Skip-Link einfügen.

    Das dort zu tabindex="-1" Gesagte ist schlecht gealtert; AFAIK sollte man das nicht mehr tun.

    🖖 Живіть довго і процвітайте

    --
    Ad astra per aspera
    1. problematische Seite

      @@all Also, eigentlich wollte ich den Thread ja als "erledigt" schließen; ich naive Person! 😂 Ich hätte besser gleich den Titel vergeben sollen: Was alles ist falsch im HTML- und CSS-Code meiner Website? Und ich war so stolz darauf! 😉

      Also gut; ich mach mich weiterhin an die Arbeit und setzte erst mal Deine begründeten Anmerkungen um, bester Gunnar und präsentiere sie dann hier. Übrigens sehr zweideutig

      in meinen Kopf geschaut.

      Ich bekam es schon mit der Angst zu tun (Überwachung und so) 😀

      Und ganz ernsthaft: ist es nicht sinnvoll, einen neuen Beitrag zu erstellen und dann Codefehler und solches dort separat anzusprechen? Wenn jemand mitliest, könnte es nicht sein, dass er die Lösung für das Problem im Betreff nicht findet, weil er vorher aufgegeben hat (würde mir wohl so gehen)?

    2. problematische Seite

      Hallo Gunnar,

      doch gleich Detailfragen:

      Mal in deinen Kopf geschaut:

          <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
          <meta charset="utf-8" />
      

      Die doppelte Angabe der Zeichencodierung macht keinen Sinn. Weg mit der ersten Angabe! Übrig bleibt:

          <meta charset="utf-8" />
      

      Das heißt, der Bereich fällt komplett weg?

      <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

      und nicht "nur" das doppelte charset=UTF-8?


      
      Siehe [Slide 39](https://speakerdeck.com/csswizardry/get-your-head-straight?slide=39) von Harry Roberts’ Talk [Get Your <head> Straight](https://beyondtellerrand.com/events/dusseldorf-2021/speakers/harry-roberts#talk) (Video + Transkiption).
      
      

      Habe reingeschaut. Ich bin des Englischen inzwischen recht gut mächtig; aber das ist doch zu viel fremdes Vokabular. Und dann noch HTML-Code am Schirm, den ich erst mal abtippen müsste, um zu kapieren, was er im Browser bewirkt. Sorry, für mich zu viel.


      Mal in deinen Kopf geschaut (mal sollte head und header auseinanderhalten können 😏):

            <a href="./index.html">
              <img
                src="https://kontakt-vs.de/kontakt.png"
                alt="Banner Sozialwerk KONTAKT e.V. | 78050 Villingen-Schwenningen"
              />
            </a>
      

      Gut, dass das Bild einen Alternativtext hat. Nur passt der hier nicht so richtig. Das Bild verlinkt auf die Startseite; der Alternativtext sollte das in diesem Kontext auch sagen.

      Du meinst, dass ich als Alternativtext beispielsweise "Banner" gegen "Startseite" austausche?

      “Universal law is for lackeys. Context is for kings.” — Lorca in Star Trek: Discovery S1:E3

      (Hier in der passenden Schrift. Dasselbe hab ich bei dem Vortrag auch gesagt. Das Video gibt’s wohl noch nicht online. Aber diesen Codepen.)


      Wo wir bei Accessibility [Du meinst Barrierefreiheit?] und du nun schon <main id="main"> hast,

      passende Schrift? Code-Pen?

      Um was geht es hier? Brauche ich das? Wenn es um Barrierefreiheit geht, möchte ich es. 👍

      Das dort zu tabindex="-1" Gesagte ist schlecht gealtert; AFAIK sollte man das nicht mehr tun.

      Was wäre dann die Alternative für tabindex="-1"?

      Ich versuche das mit "SkipLink" umzusetzen / einzubauen und frag' dann noch, ob richtig gemacht.

      Danke!

      Holger

      1. problematische Seite

        So sieht nun (vorerst nur die index.html) der Kopf (head) aus (in Auszügen) und drunter auch noch die ergänzte CSS (wie kriege ich das als ZWEI Quelltexte hin?):

          <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>
              Startseite | Sozialwerk KONTAKT e.V. | 78050 Villingen-Schwenningen
            </title>
            <meta
              name="description"
              content="Startseite | KONTAKT e.V. | Wer oder was ist KONTAKT e.V.?"
            />
            <meta
              name="keywords"
              content="KONTAKT Villingen-Schwenningen e.V., soziale Arbeit, Sozialwerk für Prävention und Integration, Kids Live, Lights On, Jugendarbeit, Kinderarbeit, Integration, Migration, Suchtprävention"
            />
        <!-- die ganzen "apple-touch-icons", etc. habe ich rausgelassen-->
          </head>
        
          #skip-link {
            position: absolute;
            left: 0;
            top: 0;
            background: black;
            color: white;
            padding: 0.25em;
            transform: translateY(-100%);
            transition: 0.2s transform;
          }
        
          #skip-link:focus {
            transform: translateY(0);
          }
        
        1. problematische Seite

          Hallo HTML_go,

          wie kriege ich das als ZWEI Quelltexte hin?

          Einfach oft genug ~~~ schreiben. Einmal ums HTML, einmal ums CSS.

          Mit ~~~html zu Beginn des HTML Teils bekommst Du Syntaxfärbung für HTML. Mit ~~~css zu Beginn des CSS Teils bekommst Du Syntaxfärbung für CSS.

          Rolf

          --
          sumpsi - posui - obstruxi
          1. problematische Seite

            Hallo Rolf,

            hatte ich versucht (auch schon in einem anderen Beitrag schon); der zweite Bereich war dann uncodiert angehängt. Aber jetzt habe ich es kapiert; die Tilden müssen den Codebereich umschließen. 😀

            #skip-link {
                position: absolute;
                left: 0;
                top: 0;
                background: black;
                color: white;
                padding: 0.25em;
                transform: translateY(-100%);
                transition: 0.2s transform;
              }
            
              #skip-link:focus {
                transform: translateY(0);
              }
            
            <!DOCTYPE html>
            <html lang="de">
              <head>
                <meta charset="utf-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                <title>
                  Startseite | Sozialwerk KONTAKT e.V. | 78050 Villingen-Schwenningen
                </title>
                <meta
                  name="description"
                  content="Startseite | KONTAKT e.V. | Wer oder was ist KONTAKT e.V.?"
                />
                <meta
                  name="keywords"
                  content="KONTAKT Villingen-Schwenningen e.V., soziale Arbeit, Sozialwerk für Prävention und Integration, Kids Live, Lights On, Arbeit mit Jugendlichen, Arbeit mit Kindern, Integration, Migration, Suchtprävention"
                />
              </head>
            
            1. problematische Seite

              @@HTML_go

              Aber jetzt habe ich es kapiert; die Tilden müssen den Codebereich umschließen. 😀

              BTW, es müssen keine Tilden ~~~ sein; drei ``` tun’s auch.

              🖖 Живіть довго і процвітайте

              --
              Ad astra per aspera
              1. problematische Seite

                BTW, es müssen keine Tilden ~~~ sein; drei ``` tun’s auch.

                O.k, Gunnar, gut zu wissen! 👍

                🖖 Живіть довго і процвітайте

      2. problematische Seite

        Hallo miteinander und nachträglich (bisschen spät, nicht?) frohe Weihnacht! Und noch rechtzeitig genug: Ein gutes, Neues Jahr 2024!

        Ich vermute mal, es ist über die Festtage privat bei allen viel los gewesen und deswegen habe ich auf meine Fragen zu Gunnars Vorschlägen noch keine Antwort erhalten?

        Bin mir einfach noch unsicher und möchte meine Änderungen an den anderen Seiten erst umsetzen, wenn ich mir sicher sein kann, dass Gunnars Vorschläge in der index.html und standard.css korrekt von mir umgesetzt wurden.

        Bin also für Feedback sehr dankbar!

        Und dann möchte ich noch die weiteren Punkte abarbeiten, die auch schon erwähnt wurden:

        • Grafik in svg umwandeln
        • Benutzerfreundlichkeit für Screenreader o.ä.
        • eventuelle Fehler im Code ausmerzen oder besser gestalten

        Das sind Anregungen, die ich von verschiedenen Teilnehmern hier erhalten habe, aber auf die ich dann mit dem konkreten Link (nach Beantwortung dieser Fragen hier) noch einmal aufgreifen möchte.

        Und hier noch einmal die aktuelle index.html:

        <!DOCTYPE html>
        <html lang="de">
          <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>
              Startseite | Sozialwerk KONTAKT e.V. | 78050 Villingen-Schwenningen
            </title>
            <meta
              name="description"
              content="Startseite | KONTAKT e.V. | Wer oder was ist KONTAKT e.V.?"
            />
            <meta
              name="keywords"
              content="KONTAKT Villingen-Schwenningen e.V., soziale Arbeit, Sozialwerk für Prävention und Integration, Kids Live, Lights On, Arbeit mit Jugendlichen, Arbeit mit Kindern, Integration, Migration, Suchtprävention"
            />
            <meta name="author" content="Holger" />
            <meta name="robots" content="index, follow" />
            <meta name="revisit-after" content="1 day" />
            <meta name="msapplication-square70x70logo" content="img/smalltile.png" />
            <meta name="msapplication-square150x150logo" content="img/mediumtile.png" />
            <meta name="msapplication-wide310x150logo" content="img/widetile.png" />
            <meta name="msapplication-square310x310logo" content="img/largetile.png" />
            <link href="./standard.css" type="text/css" rel="stylesheet" />
            <link rel="shortcut icon" href="./android-icon.png" sizes="196x196" />
            <link
              rel="apple-touch-icon"
              sizes="57x57"
              href="./apple-touch-icon-57.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="60x60"
              href="./apple-touch-icon-60.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="72x72"
              href="./apple-touch-icon-72.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="76x76"
              href="./apple-touch-icon-76.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="114x114"
              href="./apple-touch-icon-114.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="144x144"
              href="./apple-touch-icon-144.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="152x152"
              href="./apple-touch-icon-152.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="180x180"
              href="./apple-touch-icon-180.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="120x120"
              href="./apple-touch-icon-120x120-precomposed.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="152x152"
              href="./apple-touch-icon-152x152-precomposed.png"
            />
            <link rel="shortcut icon" href="favicon.ico" />
          </head>
        
          <body>
            <a id="skip-link" href="#main">zum Hauptinhalt</a>
            <header>
              <a href="./index.html">
                <img
                  src="https://kontakt-vs.de/kontakt.png"
                  alt="Startseite Sozialwerk KONTAKT e.V. | 78050 Villingen-Schwenningen"
                />
              </a>
            </header>
            <nav>
              <ul>
                <li aria-current="page"><a href="#main">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>
            <main id="main">
              <h1>
                Herzlich willkommen auf der Startseite <br />des Sozialwerks
                <b>KONTAKT e.V.</b>, Villingen-Schwenningen!
              </h1>
              <p>
                Ziel des Vereins ist die soziale Arbeit für und mit Kindern,
                Jugendlichen und deren Familien (Deutsche, Deutschstämmige und
                Zugewanderte gleichermaßen), insbesondere durch die soziale Integration
                und die Förderung des gleichberechtigen Zusammenlebens dieser
                Personengruppen unter gegenseitiger Akzeptanz und Anerkennung der
                jeweils anderen Kulturen.
              </p>
              <p>
                Unsere Vision ist es, Menschen mit Migrationshintergrund bei der
                Integration in die Gesellschaft zu unterstützen. Darüber hinaus ist der
                Verein im Bereich der Bereitstellung präventiver Angebote für junge
                Menschen tätig.
              </p>
              <p>
                Seit 2010 ist KONTAKT e.V. anerkannter Träger der freien Jugendhilfe
                gemäß $75 SGB VIII.
              </p>
            </main>
          </body>
        </html>
        

        und dazugehörige standard.css:

        body {
          max-width: 60em;
          margin: auto;
        }
        header,
        nav,
        main {
          margin: 0.25em 0.5em;
        }
        header a {
          display: block;
        }
        header img {
          width: 100%;
          height: auto;
          vertical-align: bottom;
        }
        
        nav ul {
          margin: 0;
          padding: 0;
          list-style: none;
          display: flex;
          /*zentriert die Blöcke mit den Nav-Links nun auch bei horizontaler Betrachtung; zusammen mit @media screen ...*/
          justify-content: center;
        }
        nav li {
          background: linear-gradient(
            to bottom,
            hsl(280deg 2% 38%),
            hsl(280deg 2% 10%) 40% 60%,
            hsl(280deg 2% 38%)
          );
          flex-grow: 1;
        }
        nav a {
          display: flex;
          align-items: center;
          width: 100%;
          text-align: center; /* für schmale Ansicht */
          justify-content: center; /* für breite Ansicht */
          height: 3em;
          color: #f2f2f2;
          padding: 0px 16px;
          box-sizing: border-box;
          text-decoration: none;
          font-size: 1.1em;
          user-select: none;
        }
        
        nav a:where(:hover, :focus) {
          background-color: #18a096;
          color: black;
        }
        
        nav a:focus {
          position: relative;
          z-index: 1;
        }
        
        nav [aria-current] a {
          background: linear-gradient(
            to bottom,
            hsl(280deg 2% 38%),
            hsl(60deg 95% 20%) 40% 60%,
            hsl(280deg 2% 38%)
          );
          color: white;
        }
        
        h1 {
          background-color: hsl(280 2% 28%);
          color: white;
          text-align: center;
          margin: 1em 0 0.5em 0; /* Hier Abstand zwischen Nav und Inhalt einstellen */
          padding: 0.75em 1em;
          font-size: 1.4em;
        }
        
        p {
          padding-left: 30px;
          padding-right: 30px;
          font-size: 1.2em;
        }
        
        main ul {
          padding-left: 60px;
          padding-right: 30px;
          font-size: 1.2em;
        }
        
        /*bewirkt bei Verschmaelerung des Bildschirms ein vertikales Stapeln der Nav-Leiste (topnav)*/
        @media screen and (max-width: 760px) {
          header,
          nav,
          main {
            margin: 0 0 0.25em 0;
          }
          nav ul {
            flex-direction: column;
          }
        
          #skip-link {
            position: absolute;
            left: 0;
            top: 0;
            background: black;
            color: white;
            padding: 0.25em;
            transform: translateY(-100%);
            transition: 0.2s transform;
          }
        
          #skip-link:focus {
            transform: translateY(0);
          }
        }
        

        Ich wünsche einen schönen Jahresübergang (hoffentlich!) im Kreise der Familie oder Eurer Freunde!

        Holger

      3. problematische Seite

        @@HTML_go

        doch gleich Detailfragen:

        Das heißt, der Bereich fällt komplett weg?

        <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> kommt weg; <meta charset="utf-8" /> bleibt drin.


        Habe reingeschaut. Ich bin des Englischen inzwischen recht gut mächtig; aber das ist doch zu viel fremdes Vokabular. Und dann noch HTML-Code am Schirm, den ich erst mal abtippen müsste, um zu kapieren, was er im Browser bewirkt. Sorry, für mich zu viel.

        Man muss das gar nicht bis ins letzte Detail kapieren. Wenn man es nicht besser weiß (eigene Performance-Tests durchgeführt hat, die anderes ergeben haben), tut man gut daran, einfach Harry Roberts zu vertrauen und bei den Angaben im <head> genau die Reihenfolge einzuhalten, wie sie auf Slide 39 genannt ist.

        Heißt bei dir: <title> weiter nach vorne; <link href="./standard.css" rel="stylesheet" /> weiter nach vorne. (type="text/css" kann da weg.)


              <a href="./index.html">
                <img
                  src="https://kontakt-vs.de/kontakt.png"
                  alt="Banner Sozialwerk KONTAKT e.V. | 78050 Villingen-Schwenningen"
                />
              </a>
        

        Du meinst, dass ich als Alternativtext beispielsweise "Banner" gegen "Startseite" austausche?

        Ja. Die Postleitzahl interessiert an der Stelle wohl auch niemanden. Im <title> auch nicht. Kann weg.


        Das dort zu tabindex="-1" Gesagte ist schlecht gealtert; AFAIK sollte man das nicht mehr tun.

        Was wäre dann die Alternative für tabindex="-1"?

        Gar nichts. Einfach weglassen.


        Auf der Startseite: Komma bei „des Sozialwerks KONTAKT e.V., Villingen-Schwenningen“ weglassen.

        „$75 SGB VIII“ ist euer Preis? Warum in Dollar? Wenn du das §-Zeichen auf der Tastatur nicht findest, kannst du auch &sect; verwenden.

        Bei solchen Dingen möchte man sicher keinen Zeilenumbruch darin haben, also §75&nbsp;SGB&nbsp;VIII.

        Auf so ziemlich allen anderen Seiten: Ein ‚-‘ ist kein Gedankenstrich! Da sollte ein ‚–‘ (&ndash;) stehen: „Wir stellen uns vor – die Schwerpunkte unserer Arbeit“.

        Dass der Zeilenabstand zu gering ist, sagte ich schon?

        Kwakoni Yiquan

        --
        Ad astra per aspera
        1. problematische Seite

          Hallo Gunnar,

          danke für Deine schnelle Antwort und entschuldige meine langsame Reaktion!

          Habe das jetzt alles auf der index.html umgesetzt und die stelle ich auch gleich online.

          Das mit dem Komma

          Auf der Startseite: Komma bei „des Sozialwerks KONTAKT e.V., Villingen-Schwenningen“ weglassen.

          hatte ich nicht gesehen (wo ich doch sonst so penibel bin - Betriebsblindheit!) und auch das Dollarzeichen ($) statt des Paragraphen (§) ging mir durch die Lappen; peinlich! 🙄

          Das

          &nbsp;

          bewirkt also ein Leerzeichen, das aber in Verbindung mit den vor- und nachgestellten Zeichen in der aktuellen Zeile nicht umgebrochen werden kann? Ich glaube, das hat mir ein Freund vor ca. 15 Jahren auch schon mal gesagt; hatte ich aber vergessen!

          Das mit dem Gedankenstrich

          Ein ‚-‘ ist kein Gedankenstrich! Da sollte ein ‚–‘ (&ndash;) stehen: „Wir stellen uns vor – die Schwerpunkte unserer Arbeit“.

          war mir völlig neu; habe da bislang noch nie unterschieden. Und wird demnächst auf den betreffenden Seiten umgesetzt. Danke!

          Und das mit dem Zeilenabstand hattest Du schon früher einmal erwähnt, mit Beispiel. Ich finde es aber auf die Schnelle nicht. War es diese Position im <head>?

          <meta name="viewport" content="width=device-width, initial-scale=1.5" />

          Ich habe den Wert (aus dem Kopf und hoffentlich richtig) von "1.0" auf "1.5" geändert ...

          Ach ja, und dann gleich noch mal eine Frage: Jetzt ist - nach Übernahme des

          <a id="skip-link" href="#main">zum Hauptinhalt</a>

          unterhalb des <body>-Tag - auf der Startseite (index.html) oben über dem Banner der Link "zum Hauptinhalt" zu sehen. Ist das so gewollt, oder habe ich was falsch umgesetzt? Es geht ja um die Bedienbarkeit bei Screenreadern oder ähnlichem ...

          1. problematische Seite

            @@HTML_go

            Das &nbsp; bewirkt also ein Leerzeichen, das aber in Verbindung mit den vor- und nachgestellten Zeichen in der aktuellen Zeile nicht umgebrochen werden kann?

            Ja. NBSP steht für no-break space (a/k/a non-breaking space).


            Und das mit dem Zeilenabstand hattest Du schon früher einmal erwähnt, mit Beispiel. Ich finde es aber auf die Schnelle nicht. War es diese Position im <head>?

            <meta name="viewport" content="width=device-width, initial-scale=1.5" />

            Nein. Das setzt den Initialen Zoomfaktor für die Seite.

            Ich habe den Wert (aus dem Kopf und hoffentlich richtig) von "1.0" auf "1.5" geändert ...

            Mach das mal wieder zurück!

            Es steht in diesem Posting:

            html { line-height: 1.5 }
            

            Kwakoni Yiquan

            --
            Ad astra per aspera
            1. problematische Seite

              Hallo Gunnar,

              das war wohl nichts bei mir mit "aus dem Kopf" ...

              Du meinstest mit

              Auf jeden Fall ist in allen Browsern die Default-Zeilenhöhe zu gering. Die solltest du (je nach Schriftart) auf das 1.4- bis 1.5-fache der Schriftgröße setzen:

              also, dass ich das im standard.css so eintragen soll?

              html {
                line-heigt: 1.5
              }
              

              Und im html habe ich das wieder auf "1.0" zurück gesetzt; danke!

              <meta
                name="viewport"
                content="width=device-width, initial-scale=1.0"
              />
              

              Was aber ist mit dem sichtbaren "zum Hauptinhalt"-Link auf der derzeit aktuellen index.html? Da habe ich doch was falsch gemacht, denn nach dem Artikel hier https://blog.selfhtml.org/2018/jul/15/skipper-ahoj sollte dieser Link bei Nicht-Nutzung der Tastatur oder Nicht-Nutzung eines Screenreaders nicht zu sehen sein, oder verstehe ich den Artikel falsch?

              Habe das (mit Hinzufügung von

              <main id="main" tabindex="-1">

              hinter dem geschlossenen Header-Tag) nun so gemacht:

              <header>
                    <a id="skip-link" href="#main">zum Hauptinhalt</a><!--für die Tastatur-Navigation oder per Screenreader-->
                    <a href="./index.html"><!--führt per Klick auf das Banner-Bild zurück auf die Startseite-->
                      <img
                        src="https://kontakt-vs.de/kontakt.png"
                        alt="Startseite | Sozialwerk KONTAKT e.V. Villingen-Schwenningen"
                      />
                    </a>
                  </header>
                  <main id="main" tabindex="-1">
              

              Ist aber noch nicht online.

              Dennoch sehe ich den Link (lokal) noch über dem Banner ... Und übrigens ist seitdem die Navigationsleiste "kürzer" geworden (an den äußeren Rändern wurde etwas abgeschnitten. Und in der schmalen "Smartphone-Ansicht" ist die Navigationsleiste auch nicht mehr zentriert. Siehe Screenshots: Navigationsleiste / Startseite "index.html" nach Hinzufügung Skip-Link BREITE Ansicht Navigationsleiste / Startseite "index.html" nach Hinzufügung Skip-Link SCHMALE Ansicht

              Fragen über Fragen ... 😉

              1. problematische Seite

                Hallo HTML_go,

                html {
                  line-heigt: 1.5
                }
                

                heigt statt height war bestimmt nur ein Typo im Forum, oder?

                Zum Skiplink: guck mal in unseren Blog: Skipper Ahoj!

                Rolf

                --
                sumpsi - posui - obstruxi
                1. problematische Seite

                  Hallo HTML_go,

                  html {
                    line-heigt: 1.5
                  }
                  

                  heigt statt height war bestimmt nur ein Typo im Forum, oder?

                  Oh ja, das war ein Tippfehler; aber tatsächlich auch in der CSS! Ist dort nun auch korrigiert. Danke!

                  Zum Skiplink: Dinge, die vor Nichtassistenzverwendern versteckt sein sollen, versieht man gerne mit einer "visually-hidden" Klasse. Die sieht so aus und deckt diverse Browser-Quirks ab, die das Versteck gelegentlich verraten:

                  .visually-hidden {
                  	position: absolute !important;
                  	clip-path: rect(1px, 1px, 1px, 1px) !important;
                  	padding: 0 !important;
                  	border: 0 !important;
                  	height: 1px !important;
                  	width: 1px !important;
                  	overflow: hidden !important;
                  }
                  

                  Also obigen CSS-Eintrag habe ich derzeit noch nicht implementiert. Sollte ich? Ich habe es lokal mal probiert, aber keine Änderung der Website feststellen können ...

                  Problem ist nur, dass Du den Link sichtbar machen willst, sobald der Fokus draufsteht (für die Tastaturbenutzer). Du musst also etliche CSS Eigenschaften wieder abschalten, um Sichtbarkeit zu bekommen:

                  #skip-link:focus {
                    clip-path: unset;
                    height: auto;
                    width: fit-content;
                  }
                  

                  Diese Bereiche (skip-link) im CSS sind bereits [mit der vorangestellten Raute (#)] deaktiviert. Das hatte ich schon von Gunnars Vorschlag übernommen. Sieht bei mir so aus:

                   #skip-link {
                      position: absolute;
                      left: 0;
                      top: 0;
                      background: black;
                      color: white;
                      padding: 0.25em;
                      transform: translateY(-100%);
                      transition: 0.2s transform;
                    }
                  
                   #skip-link:focus {
                      transform: translateY(0);
                    }
                  

                  müsste eigentlich reichen. In deinem Fall vielleicht auch noch background-color:white, damit sich der Link vor dem Hero-Bild abhebt. Weitere Deko sei Dir überlassen 😉

                  Für den Fall, dass nicht der Skiplink direkt die visually-hidden Klasse bekommt, sondern er in einem visuell versteckten Elternelement steckt, müsste man in der Sichtbarkeitsregel dieses Elternelement ansprechen und :focus-within verwenden. Also etwas in dieser Art:

                  <div id="skip-link" class="visually hidden">
                     <a href="#main">Zum Hauptinhalt</a>
                  </div>
                  
                  #skip-link:focus-within { ... }
                  

                  Ist mir jetzt noch zu theoretisch, sorry.

                  Ich habe meine derzeitige "standard.css" mal durch einen CSS-Validator (https://jigsaw.w3.org/css-validator/ gejagt und erhalte einen Haufen Warnungen aber keine Fehlermeldung. Demnach liegt ja wohl kein Fehler vor, aber die Warnungen deuten vermutlich auf Dinge hin, die verbessert gehören?

                  Die CSS ist noch nicht online, weswegen ich sie hier reinstelle:

                  html {
                      line-height: 1.5;
                  }
                  
                  body {
                    max-width: 60em;
                    margin: auto;
                  }
                  
                  header, nav, main {
                    margin: 0.25em 0.5em;
                  }
                  
                  header a {
                    display: block;
                  }
                  
                  header img {
                    width: 100%;
                    height: auto;
                    vertical-align: bottom;
                  }
                  
                  nav ul {
                    margin: 0;
                    padding: 0;
                    list-style: none;
                    display: flex;/*zentriert die Blöcke mit den Nav-Links nun auch bei horizontaler Betrachtung; zusammen mit @media screen ...*/
                    justify-content: center;
                  }
                  
                  nav li {
                    background: linear-gradient(
                      to bottom,
                      hsl(280deg 2% 38%),
                      hsl(280deg 2% 10%) 40% 60%,
                      hsl(280deg 2% 38%)
                    );
                    flex-grow: 1;
                  }
                  
                  nav a {
                    display: flex;
                    align-items: center;
                    width: 100%;
                    text-align: center; /* für schmale Ansicht - z.B. Smartphone */
                    justify-content: center; /* für breite Ansicht - z. B. PC-Bildschirm */
                    height: 3em;
                    color: #f2f2f2;
                    padding: 0px 16px;
                    box-sizing: border-box;
                    text-decoration: none;
                    font-size: 1.1em;
                    user-select: none;
                  }
                  
                  nav a:where(:hover, :focus) {
                    background-color: #18a096;
                    color: black;
                  }
                  
                  nav a:focus {
                    position: relative;
                    z-index: 1;
                  }
                  
                  nav [aria-current] a {
                    background: linear-gradient(
                      to bottom,
                      hsl(280deg 2% 38%),
                      hsl(60deg 95% 20%) 40% 60%,
                      hsl(280deg 2% 38%)
                    );
                    color: white;
                  }
                  
                  h1 {
                    background-color: hsl(280 2% 28%);
                    color: white;
                    text-align: center;
                    margin: 1em 0 0.5em 0; /* Hier Abstand zwischen Nav und darunterstehendem Seiten-Inhalt einstellen */
                    padding: 0.75em 1em;
                    font-size: 1.4em;
                  }
                  
                  p {
                    padding-left: 30px;
                    padding-right: 30px;
                    font-size: 1.2em;
                  }
                  
                  main ul {
                    padding-left: 60px;
                    padding-right: 30px;
                    font-size: 1.2em;
                  }
                  
                  @media screen and (max-width: 760px) {/*bewirkt bei Verschmaelerung des Bildschirms ein vertikales Stapeln der Nav-Leiste (topnav)*/
                    header,
                    nav,
                    main {
                      margin: 0 0 0.25em 0;
                    }
                    nav ul {
                      flex-direction: column;
                    }
                  
                  #skip-link {
                      position: absolute;
                      left: 0;
                      top: 0;
                      background: black;
                      color: white;
                      padding: 0.25em;
                      transform: translateY(-100%);
                      transition: 0.2s transform;
                    }
                  
                  #skip-link:focus {
                      transform: translateY(0);
                    }
                  }
                  
                  1. problematische Seite

                    Hallo HTML_go,

                    die visually-hidden Klasse ist hier eh fehl am Platz gewesen, deshalb hatte ich den Beitrag editiert. Du warst zu schnell 😉

                    Wirksam wird diese CSS Regel auch nur dann, wenn der Skip-Link diese Klasse bekäme. Dass Du schon etwas von Gunnar drin hattest, hatte ich übersehen. Vermutlich hast Du auch deshalb keinen Unterschied erkannt.

                    Rolf

                    --
                    sumpsi - posui - obstruxi
                    1. problematische Seite

                      @@Rolf B

                      deshalb hatte ich den Beitrag editiert.

                      Dann muss ich an dieser Stelle nicht erwähnen, dass anstatt CSS-Eigenschaften zu setzen und bedingt wieder zurückzusetzen es vorteilhafter sein dürfte, sie nur unter der negierten Bedingung zu setzen. 😏

                      Kwakoni Yiquan

                      --
                      Ad astra per aspera
                  2. problematische Seite

                    Hallo,

                    Diese Bereiche (skip-link) im CSS sind bereits [mit der vorangestellten Raute (#)] deaktiviert. Das hatte ich schon von Gunnars Vorschlag übernommen. Sieht bei mir so aus:

                     #skip-link {
                       [...]
                      }
                    

                    Die Raute dient nicht dazu, etwas zu deaktivieren. Lies dich bitte mal intensiver in die CSS-Grundlagen ein. Z.B. im Wiki

                    Gruß
                    Kalk

                    1. problematische Seite

                      @@Tabellenkalk

                      Die Raute dient nicht dazu, etwas zu deaktivieren. Lies dich bitte mal intensiver in die CSS-Grundlagen ein. Z.B. im Wiki

                      Oder im 21. Türchen des Adventskalenders.

                      Oh, die Raute dient dazu, etwas zu deaktivieren. Nur halt nicht in CSS. 😏

                      Kwakoni Yiquan

                      --
                      Ad astra per aspera
                      1. problematische Seite

                        Hallo

                        Die Raute dient nicht dazu, etwas zu deaktivieren. Lies dich bitte mal intensiver in die CSS-Grundlagen ein. Z.B. im Wiki

                        Oder im 21. Türchen des Adventskalenders.

                        Da fällt mir gleich mal ein Fehler auf. Im Adventkalenderartikel heißt es „Auch in PHP, Python, .htaccess-Dateien oder der Powershell kann die Raute # verwendet werden, um Kommentare zu setzen.“. Speziell für PHP ist das aber seit PHP 8.0 Geschichte, weil die Raute seit dieser Version einem anderen Verwendungszweck namens „Attributes“ zugeführt wurde.

                        Es sollte also mindestens vermerkt werden, dass die Raute in PHP bis PHP 7.4.x als Kommentarzeichen verfügbar ist und bestenfalls, dass sie seit PHP 8.0 als Bestandteil der Attributes-Syntax als erstes Zeichen von #[ (mit abschließendem ]) dient.

                        Keine Ahnung, ob es noch sinnvoll ist, den Artikel zu ändern. Die Adventszeit ist seit etwa zwei Wochen vorbei, die Einführung von PHP 8 aber auch schon seit über drei Jahren.

                        Aufgefallen ist es mir, weil ich in einem Projekt exzessiv von der Kommentierung von Code mit dem Kommentarzeichen # Gebrauch gemacht hatte und bei der Einführung von PHP 8 einige Zeit in Prüfungen und Korrekturen versenken durfte. So etwas vergisst man nicht so schnell. 🙂

                        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