Unterstriche und Auflistungspunkte in Liste entfernen

TheCoder28 · Gestern um 20:18

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?

MrMurphy · Gestern um 21:10

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>

tk1234 · Gestern um 22:14

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?

MrMurphy schrieb:
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 …

MrMurphy schrieb:
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?

MrMurphy schrieb:
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.

MrMurphy schrieb:
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!)

Oliver77 · Gestern um 22:15

hmm ich dachte immer, dass Menüelemente immer in Listen gepackt werden, ich kenne z.B. kein Wordpress-Theme was ohne auskommt.

Sempervivum · Heute um 06:16

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.

Unterstriche und Auflistungspunkte in Liste entfernen

TheCoder28

Neues Mitglied

Anhänge

MrMurphy

Senior HTML'ler

tk1234

Aktives Mitglied

Oliver77

Aktives Mitglied

Sempervivum

Senior HTML'ler

Neueste Beiträge