Andreas Schwab: Border-Bottom länger als gewollt

problematische Seite

Guten Abend,

auf meiner Website möchte ich in der Navigation die Seite unterstreichen auf der man sich gerade befindet. Dafür habe ich im CSS eine Schrift definiert, die mit border-bottom ein Unterstrich erzeugen soll.

c {
    border-bottom: solid 5px #ffffff;
    font-family: Moontype;
    color: #ffffff;
    font-size: 20px;
    text-decoration: none;
    margin-right: 4%;
}

Der Unterstrich wird auch erzeugt, jedoch ist er deutlich länger als der Text an sich. Wie kann ich dies unterbinden?

Bei Kontakt ist es gut zu sehen:

Danke für eure Hilfe !

  1. problematische Seite

    Hi,

    auf meiner Website möchte ich in der Navigation die Seite unterstreichen auf der man sich gerade befindet. Dafür habe ich im CSS eine Schrift definiert, die mit border-bottom ein Unterstrich erzeugen soll.

    Warum nicht per text-decoration: underline?

    Border-bottom ist so breit wie das Element, nicht so breit wie der enthaltene Text.

    Bei Dir scheinen sich die Elemente zu überlagern …

    cu, Andreas a/k/a MudGuard

    1. problematische Seite

      Hey,

      danke für die schnelle Antwort !

      mit der text-decoration habe ich es auch versucht, das Problem dabei ist, dass ich dabei die Größe des Unterstrichs nicht verändern kann und so den gewünschten Stil nicht hinbekomme.

  2. problematische Seite

    Hallo Andreas Schwab,

    c {
        
    }
    

    Da es kein c-Element gibt, kann das schon mal nicht das richtige CSS sein.

    Danke für eure Hilfe !

    Da ist auch ein Tippfehler im HTML. Schau dir außerdem an, wie man verschachtelte Menüs erstellt, zum Beispiel im Wiki.

    Bis demnächst
    Matthias

    --
    Rosen sind rot.
    1. problematische Seite

      @@Matthias Apsel

      c {
          
      }
      

      Da es kein c-Element gibt, kann das schon mal nicht das richtige CSS sein.

      Doch das ist es. Im DOM gibts es ein c-Element.

      Da es kein c-Element gibt, kann das schon mal nicht das richtige HTML sein.

      @Andreas Schwab:

      Um den Menüpunkt der aktuellen Seite nicht zu verlinken, entfernst du einfach das href-Attribut.

      Zur Barrierefreiheit verpasst du dem a-Element stattdessen <a tabindex="0" aria-current="page">.

      Das lässt sich dann auch fürs Styling verwenden: Attributselektor [aria-current].

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. problematische Seite

        Danke für die Tipps !

        Nun ist fast perfekt, jedoch ist jetzt auf einmal am Ende des Textes ein kleiner Unterstrich. Weißt du an was das liegen könnte ?

        1. problematische Seite

          Hallo,

          füge mal in deiner CSS Regel e[aria-current] folgendes hinzu:

          display: inline-block;
          

          Dann sollte es so ausscheun

        2. problematische Seite

          Hallo Andreas,

          das Problem ist, dass Du dein HTML falsch schachtelst.

          <div id="menu">
             <ul>
                <a href="./index.html">
                   <e>
                      <li>Home</li>
                   </e>
                </a>
          <!-- ... -->
                <a>
                   <e tabindex="0" aria-current="page">
                      <li>Kontakt</li>
                   </e>
                </a>
             </ul>
          </div>
          

          Problem 1: li Elemente gehören direkt ins ul Element, nicht als Kinder weiterer Zwischenelemente.

          Problem 2: Ein e Element gibt es nicht. Der Browser behandelt es im Prinzip wie einen span. Und weil Du nun in deinem a Element inline-content hast, werden Zeilenumbrüche zu Leerstellen, und als Leerstellen formatiert. Dieser Unterstrich kommt von der Unterstreichung, die der Browser jedem Link zuordnet. Die schaltest Du erst im e Element ab, daher ist sie für den Leerraum um das e herum vorhanden.

          Aber zunächst einmal solltest Du dein HTML richtig strukturieren und auf unnötige Elemente verzichten. Folgendes HTML genügt:

          <nav>   <!-- statt <div id="menu"> -->
             <ul>
                <li><a tabindex="0" aria-current="page">Home</a></li>
                <li><a href="./geodaetischeBerechnungen.html">Geo</a></li>
                <li><a href="./kontakt.html">Kontakt</a></li>
                <li><a href="./impressum.html">Imp</a></li>
             </ul>
          </nav>
          

          Die tabindex=0 aria-current=page Attribute setzt du direkt auf das a Element dieser Seite.

          Es ist auch durchaus ok, mit flexbox zu arbeiten, womit Du in deinem Stylesheet schon experimentiert hast; du musst display:flex und justify-content:space-between lediglich auf das ul Element legen, dann werden die li per Flexbox verteilt. Zusätzlich solltest Du dem UL Element noch explizites Padding geben (z.B. padding: 0 2em), sonst hast Du das Default-Padding von UL - das ist nur links.

          Ich habe ein bisschen gefiddelt, wirf mal einen Blick darauf.

          Rolf

          --
          sumpsi - posui - clusi