Border-Bottom länger als gewollt

[Andreas Schwab]

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 !

[MudGuard]

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

[Andreas Schwab]

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.

[Matthias Apsel]

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

[Gunnar Bittersmann]

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

[Andreas Schwab]

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 ?

[Sophie]

Hallo,

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

display: inline-block;

Dann sollte es so ausscheun

[Rolf B]

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