Michael Dabrowski: Die "Punkte" vor der ungeordneten Liste

SELF-Forum

Die "Punkte" vor der ungeordneten Liste

Michael Dabrowski E-Mail-Adresse des Autors
– Informationen zu den Bewertungsregeln

problematische Seite

Hallo Selfhtml-Team,

bei einer ungeordneten Liste befinden sich immer Punkte vor jeder Zeile. Die möchte ich aber nicht. Wie kann ich die entfernen bzw. ausblenden?

Danke für eure Zeit!

Michael

Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Die "Punkte" vor der ungeordneten Liste

    Camping_RIDER E-Mail-Adresse des Autors Homepage des Autors
    – Informationen zu den Bewertungsregeln

    problematische Seite

    Aloha ;)

    Das verrät dir der passende Artikel im Wiki. Mit welchen Suchbegriffen hattest du es denn bereits probiert?

    Grüße,

    RIDER

    --
    Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Albers-Zoller
    # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
    Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Die "Punkte" vor der ungeordneten Liste

      Michael Dabrowski
      – Informationen zu den Bewertungsregeln

      problematische Seite

      Hallo,

      ich bin ein blutiger Anfänger, und weiß eigentlich gar nichts so genau. Ich weiß auch ehrlich gesagt nicht, mit welcher Herangehensweise ich da aktiv werden soll. Ich habe gerade selfhtml für mich entdeckt, mich angemeldet und gleich mal diese Frage gestellt.

      Gruß, Michael

      Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Die "Punkte" vor der ungeordneten Liste

        Camping_RIDER E-Mail-Adresse des Autors Homepage des Autors
        +2 Informationen zu den Bewertungsregeln

        problematische Seite

        Aloha ;)

        Okay - dann hilft dir vielleicht auch die Wie-fange-ich-an-Seite weiter. Falls nicht, lass uns doch gerne wissen was dir da fehlt, damit die Nutzerführung weiter verbessert werden kann.

        Grüße,

        RIDER

        --
        Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Albers-Zoller
        # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
        Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
        +2
        Informationen zu den Bewertungsregeln

      2. Die "Punkte" vor der ungeordneten Liste

        Rolf B
        – Informationen zu den Bewertungsregeln

        problematische Seite

        Hallo Michael,

        weißt Du denn bereits, was grundsätzlich ein Stylesheet ist und wie man es dem HTML hinzufügt?

        In welcher Umgebung nutzt Du HTML? Wordpress? HTML-Mail? Handgeschnitzt mit dem Editor?

        Das wäre für uns deshalb interessant, damit wir Dich dort abholen können, wo Du wissensmäßig stehst.

        Rolf

        --
        sumpsi - posui - obstruxi
        Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. Die "Punkte" vor der ungeordneten Liste

    MrMurphy (Versionen)
    – Informationen zu den Bewertungsregeln

    problematische Seite

    Ich habe dir mal ein Beispiel zum Anschauen und Ausprobieren / Rumspielen erstellt.

    Die erste Liste wird ohne CSS-Anweisungen dargestellt, bei der zweiten sind die Punkte ausgeblendet, bei der dritten ist der Punkt ausgeblendet und durch ein beliebiges farbiges Zeichen ersetzt worden.

    
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Listenlayout</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <style>

   /* Basisangaben */
   @media all {
      body {
         max-width: 1200px;
         padding: 1rem 1rem  1rem 1rem;
         margin: 0rem auto 0rem auto;
      }
   }

   /* Schriften */
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: serif;
         font-size: 1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      p, li, dt, dd, address {
         font-family: sans-serif;
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      a {
         /* darkblue */
         color: hsla(240, 100%, 27%, 1);
         text-decoration: none;
         outline: none;
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /* .listen */
   @media all {
      .beispiel01,
      .beispiel02,
      .beispiel03 {
         border: 1px solid grey;
         border-radius: 0.5rem;
      }
   }
   @media all and (min-width: 700px) {
      .listen {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
         gap: 1rem;
      }
   }

   /* .beispiel01 */
   @media all {
   }

   /* .beispiel02 */
   @media all {
      .beispiel02 ul {
         padding: 0rem 0rem 0rem 0rem;
      }
      .beispiel02 li {
         list-style-type: none;
      }
   }

   /* .beispiel03 */
   @media all {
      .beispiel03 li {
         list-style-type: none;
      }
      .beispiel03 li::before {
         content: "\21d2" " ";
         color: green;
         margin-right: 0.5rem;
      }
   }

   </style>
</head>
<body>
   <header>
      <h1>Listenlayout - Ungeordnete Liste</h1>
   </header>
   <main>
      <section class="listen">
         <ul class="beispiel01">
            <li>Ananas</li>
            <li>Kiwi</li>
            <li>Erdbeere</li>
            <li>Banane</li>
         </ul>
         <ul class="beispiel02">
            <li>VW</li>
            <li>Audi</li>
            <li>Horch</li>
            <li>NSU</li>
         </ul>
         <ul class="beispiel03">
            <li>Hamburg</li>
            <li>Flensburg</li>
            <li>Lübeck</li>
            <li>Husum</li>
         </ul>
      </section>
   </main>
   <footer class="pagefooter">
      <p>Originaldiskussion: <a href="https://forum.selfhtml.org/self/2024/nov/02/die-punkte-vor-der-ungeordneten-liste/1817362#m1817362">https://forum.selfhtml.org/</a></p>
   </footer>
</body>
</html>

    Den gesamen Quelltext einfach in eine leere Datei kopieren, speichern und anschauen beziehungsweise eigene Änderungen durchführen.

    Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Die "Punkte" vor der ungeordneten Liste

      Gunnar Bittersmann E-Mail-Adresse des Autors Homepage des Autors (Versionen)
      +1 Informationen zu den Bewertungsregeln

      problematische Seite

      @@MrMurphy

      Ich habe dir mal ein Beispiel zum Anschauen und Ausprobieren / Rumspielen erstellt.

      Ich hab das mal richtig als HTML gekennzeichnet – Farbe macht bunt.

         /* Basisangaben */
   @media all {
      body {
         max-width: 1200px;
         padding: 1rem 1rem  1rem 1rem;
         margin: 0rem auto 0rem auto;
      }
   }

      @media all erfüllt welchen Zweck?

      max-width sollte auch besser relativ zur Schriftgröße angegeben werden.

      Die Wiederholung der gleichen Werte ist auch nicht sinnvoll.

      Dasselbe in besser lesbar/wartbar:

      body {
  max-width: 75rem;
  padding: 1rem;
  margin: 0 auto;
}

            h2, h3, h4, h5, h6 {
         font-family: serif;
         font-size: 1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }

      Alle Überschriften – egal welche Hierarchie-Ebene – gleich groß? Blöd, dass dabei die visuelle Hierarchie verlorengeht. Nicht machen!

      Wobei anzumerken wäre, dass wenn h4, h5, h6 verwendet werden, womöglich was mit der Informationsarchitektur nicht stimmt.

            a {
         /* darkblue */
         color: hsla(240, 100%, 27%, 1);
         text-decoration: none;
         outline: none;
         margin: 0rem 0rem 0rem 0rem;
      }

      Das ist ganz grob falsch!

      Durch text-decoration: none sind Links nicht mehr als solche erkennbar. Verlasse dich niemals auf Farbe als alleiniges Unterscheidungsmerkmal!

      Die Unterstreichung darf man nicht für alle Links entfernen; für Links im Fließtext muss sie erhalten bleiben.

      Nur bei Links in Menüs, die durch ihre Gestaltung als Links zu erkennen sind, ist die Entfernung der Unterstreichung sinnvoll.

      Durch outline: none ist bei Tastatursteuerung nicht mehr erkennbar, wo man sich gerade befindet. Das heißt, die Tastatursteuerung ist kaum noch möglich. Auf gar keinen Fall machen!

      Übrigens setzen Browser den „hässlichen“ blauen Rahmen bei Mausbedienung auch gar nicht mehr.

            .beispiel02 ul {
         padding: 0rem 0rem 0rem 0rem;
      }
      .beispiel02 li {
         list-style-type: none;
      }

      Da kann man list-style-type auch gleich für die Liste angeben (es heißt ja auch nicht list-item-style-type):

      .beispiel02 ul {
  padding: 0;
  list-style-type: none;
}

         @media all {
      .beispiel03 li {
         list-style-type: none;
      }
      .beispiel03 li::before {
         content: "\21d2" " ";
         color: green;
         margin-right: 0.5rem;
      }
   }

      Hm, zwei Strings "\21d2" und " ", wo man doch nur einen haben will?

      "\21d2 " – zwei Leerzeichen: das erste beendet das Zeichen-Escape[1] (eine ziemlich blöde Idee der CSS-Spezifikations-Autoren, IMHO), das zweite wird dann dargestellt.

      Aber warum willst du da überhaupt ein Leerzeichen hinterm Pfeil haben, wenn du den Abstand mit margin-right regelst? Welcher relativ zur der für die Listitems verwendeten Schriftgröße angegeben werden sollte, also in em, nicht in rem.

      Aber das geht einfacher: nicht per list-style-type: none die Bullets wegnehmen (wobei bei Safari/VoiceOver die Liste nicht mehr als solche angesagt wird) und den eigenen Listitem-Markierer (hier den Pfeil) mit ::before erzeugen, sondern gleich den Listitem-Markierer (::marker)[2][3] auf den gewünschten Wert setzen:

      .beispiel03 li::marker {
  content: "\21d2  ";
  color: green;
  margin-right: 0.5em;
}

         <main>
      <section class="listen">
         <ul class="beispiel01">

      Der Abschnitt hat keine Überschrift, was ein deutliches Zeichen dafür ist, dass section das falsche HTML-Element ist. Manchmal ist ein div einfach nur ein div.

      Falls man das Containerelement denn braucht. Hier nicht; man könnte auch main das Containerelement sein lassen und diesem das display: grid verpassen.

      Den gesamen Quelltext einfach in eine leere Datei kopieren, speichern und anschauen beziehungsweise eigene Änderungen durchführen.

      Ernsthaft? Warum erstellst du das Beispiel nicht gleich irgendwo (eigener Webspace, CodePen o.ä.), wo man sich das gleich ohne Copy-and-paste-Orgie ansehen kann?

      Kwakoni Yiquan

      --
      Ad astra per aspera

      1. CSS escapes in Using character escapes in markup and CSS (W3C i18n) ↩︎

      2. ::marker in MDN ↩︎

      3. CSS/Selektoren/marker im SELFHTML-Wiki ↩︎

      Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
      +1
      Informationen zu den Bewertungsregeln