• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Unterstriche und Auflistungspunkte in Liste entfernen

TheCoder28

Neues Mitglied
Hallo,

ich bin gerade an einer Website dran. Ich habe eine Auflistung in html erstellt, mit Menüpunkten, nur weiß ich leider nicht mehr, wie ich die Auflistungspunkte wegbekomme, sodass es schöner aussieht und nur die Wörter dort stehen, sowie auch die Unterstriche weg sind (die sind auch noch da). Weiß da jemand weiter?
 

Anhänge

  • Screenshot 2024-10-17 201615.png
    Screenshot 2024-10-17 201615.png
    19,9 KB · Aufrufe: 4
  • Screenshot 2024-10-17 201641.png
    Screenshot 2024-10-17 201641.png
    16,3 KB · Aufrufe: 4
Ich verstehe nicht welche Unterstriche du meinst.

Quelltext als Bild wird gar nicht gerne gesehen, da er mühsam abgetippt werden muss. Für viele Hilfswillige hier im Forum eine unnötige Barriere.

Wie die Navigation aussehen soll ist kaum nachzuvollziehen, da muss noch viel geraten werden.

Seit der Einführung von HTML5 ist für Navigationen ausdrücklich keine Liste mehr erforderlich (war es übrigens auch vorher nicht). Bei Navigationen auf Listen zu verzichten macht zudem den Quelltext übersichtlicher und damit leichter anpassbar.

Eine Navigation in ein Button-Element einzubetten halte ich für fragwürdig, das ist meiner Kenntnis nach in HTML nicht zulässig.

Die Anweisung "position: absolute" ist nur noch in wenigen Ausnahmen sinnvoll, von denen hier offensichtlich keine vorliegt.

Was du mit "display: flex" erreichen willst ist zumindest für mich nicht nachvollziehbar.

Hinweis, falls die Seite öffentlich werden soll: Links in neuen Seiten zu öffnen (target="_blank") nervt viele Besucher und stellt eine unnütze Barriere dar.

Als Grundlage würde ich das folgende HTML und CSS verwenden:

HTML:

Code:
      <nav class="navbar">
         <a href="mein_setup.html" target="_blank">Mein Setup</a>
         <a href="produkte.html" target="_blank">Produkte</a>
         <a href="gutes_setup.html" target="_blank">Gutes Setup</a>
         <a href="relevante_quellen.html" target="_blank">Relev. Quellen</a>
      </nav>

CSS:

Code:
      .navbar {
         background-color: rgb(218, 212, 212);
         padding: 10px;
         border-radius: 10px;
      }
      .navbar a {
         color: black;
         text-decoration: none;
         display: block;
         padding: 14px 20px;
      }

Anschließend eine komplette Beispielseite um auf eine gemeinsame Grundlage zu kommen:

Code:
<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Navigationslayout</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>

   /* Überschriften - font-family: 'Roboto Slab', Serif; */
   @import url(https://fonts.googleapis.com/css?family=Roboto+Slab);

   /* Fließtext - font-family: 'Roboto', Sans-Serif"; */
   @import url(https://fonts.googleapis.com/css?family=Roboto);

   /* Basisangaben */
   @media all {
      * {
         /* box-sizing: border-box; */
         min-width: 1px;
      }
      html {
      }
      body {
         max-width: 1200px;
         margin: 0rem auto 0rem auto;
      }
   }

   /* Schriften */
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: 'Roboto Slab', serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: 'Roboto Slab', serif;
         font-size: 1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      p, li, dl, dt, address {
         font-family: Roboto, sans-serif;
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      a {
         /* darkblue */
         /*color: hsla(240, 100%, 27%, 1);*/
         /*outline: none;*/
         /*margin: 0rem 0rem 0rem 0rem;*/
      }
      a,
      a:link,
      a:visited {
      }
      a:hover,
      a:focus,
      a:active {
      }
      figcaption {
         font-family: Roboto, sans-serif;
         font-size: 0.9rem;
         margin: 0rem 0rem 0rem 0rem;
      }
      sup {
         font-size: 0.75rem;
      }
      .zahl {
         font-family: "Merriweather";
         font-size: 1rem;
      }
   }

   /* .navbar */
   @media all {
      .navbar {
         background-color: rgb(218, 212, 212);
         padding: 10px;
         border-radius: 10px;
      }
      .navbar a {
         color: black;
         text-decoration: none;
         display: block;
         padding: 14px 20px;
      }
   }
   @media only screen and (min-width: 0px) {
   }

   </style>
</head>
<body>
   <header id="pageheader" class="pageheader">
      <h1>Navigationslayout</h1>
   </header>
   <main id="content" class="content">
      <nav class="navbar">
         <a href="mein_setup.html" target="_blank">Mein Setup</a>
         <a href="produkte.html" target="_blank">Produkte</a>
         <a href="gutes_setup.html" target="_blank">Gutes Setup</a>
         <a href="relevante_quellen.html" target="_blank">Relev. Quellen</a>
      </nav>
   </main>
   <footer id="pagefooter" class="pagefooter">
      <p>Originaldiskussion: <a href="https://www.html.de/threads/unterstriche-und-auflistungspunkte-in-liste-entfernen.61884/">https://www.html.de/</a></p>
   </footer>
</body>
</html>
 
Vorneweg: dieser Thread ist im falschen Board, das ist das Altersheim, hier sollte es eigentlich garnicht möglich sein etwas zu posten. Es gibt auch noch einen Thread oben mit Antworten - und ein Thread reicht. Vielleicht kann ein Moderator die Threads zusammenführen oder so?

Seit der Einführung von HTML5 ist für Navigationen ausdrücklich keine Liste mehr erforderlich (war es übrigens auch vorher nicht). Bei Navigationen auf Listen zu verzichten macht zudem den Quelltext übersichtlicher und damit leichter anpassbar.
Das hat mit HTML5 (das btw. garnicht mehr so heißt sondern nur noch HTML) nichts zu tun, aber eine Navigation ist idR eine Liste von Links - damit ist eine Liste durchaus richtig. Da kann man aber darüber streiten …
Eine Navigation in ein Button-Element einzubetten halte ich für fragwürdig, das ist meiner Kenntnis nach in HTML nicht zulässig.
Stimmt, das ist nicht erlaubt: Woher soll der Browser auch wissen wie er auf einen Klick auf einen Link reagieren soll: auf den Link oder den Button?
Was du mit "display: flex" erreichen willst ist zumindest für mich nicht nachvollziehbar.
vmtl. die Links nebeneinander bekommen - wobei das dann natürlich für ul gelten müsste.
Anschließend eine komplette Beispielseite um auf eine gemeinsame Grundlage zu kommen:
Aber bitte ohne Google-Fonts (die niemals von Google direkt einbinden!) und mit richtigen Einheiten (keine Pixel!)
 
hmm ich dachte immer, dass Menüelemente immer in Listen gepackt werden, ich kenne z.B. kein Wordpress-Theme was ohne auskommt.
 
Seit der Einführung von HTML5 ist für Navigationen ausdrücklich keine Liste mehr erforderlich (war es übrigens auch vorher nicht). Bei Navigationen auf Listen zu verzichten macht zudem den Quelltext übersichtlicher und damit leichter anpassbar.
Da stimme ich voll zu: Jeder macht es, ich eingeschlossen, aber ich konnte noch nie einen plausiblen Nutzen darin erkennen und auch keine Notwendigkeit.
 
Zurück
Oben