CSS Trennlinie in Navigation richtig positionieren

Anon1216 · 6. März 2016

Hallo

Ich habe in meiner Navigation eine kleine senkrechte Trennlinie und habe schwierigkeiten beim Positionieren und die Farbe zu ändern.
In meiner Navigation sind ~ 10 Links und zwischen dem 1. und 2. Link habe ich eine Trennlinie.

Das erste Problem ist, da die hr kein li ist nehme ich den Abstand von der Navigationsleiste und nicht von den Links und wenn ich mir die Seite auf dem Handy angucke überlappen sich hr und Link.

Das zweite Problem wäre, wenn ich die hr als li hinzufüge kann ich den Abstand von den Links nehmen aber dann kann ich die Farbe nur ändern wenn die position: absolute ist. So verschiebt sich die hr aber wieder und lässt sich nicht / sehr schlecht positionieren.

Kann ich das irgendwie einfacher machen? Einfach nur eine Trennlinie zwischen 2 Links wo ich noch die Farbe ändern kann.

Code:

html:

 <nav>
                    
                    <ul>
                        
                        <li><a>link</a></li>
                        <hr>
                        <li><a>link</a></li>
                        <li><a>link</a></li>
                        <li><a>link</a></li>
                        <li><a>link</a></li>
                        <li><a>link</a></li>
                        <li><a>link</a></li>
                        <li><a>link</a></li>
                        <li><a>link</a></li>

                        
                    </ul>
                    
                </nav>

css:

nav hr{
    position: absolute;
    width: 2px;
    height: 17px;
    margin-left: 90px;
    margin-top: -20px;
    background-color: #575757;
    border-right-style: none;
    border-bottom-style: none;
}

kachiri · 6. März 2016

Wäre es nicht einfacher, dem ersten Listenpunkt eine eigene Klasse zuzuweisen und da einen Border zu definieren?

blablub1212 · 6. März 2016

Ich schließe mich kachiri an, man könnte aber auch einfach Pseudo-Elemente verwenden. Bspw. wie folgt:

Code:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Test</title>
  <style>
    nav ul li:first-child {
      border-bottom: 2px solid black;
    }
  </style>
</head>

<body>

  <nav>
    <ul>
      <li><a>link</a></li>
      <li><a>link</a></li>
      <li><a>link</a></li>
      <li><a>link</a></li>
      <li><a>link</a></li>
      <li><a>link</a></li>
      <li><a>link</a></li>
      <li><a>link</a></li>
      <li><a>link</a></li>
    </ul>
  </nav>

</body>

</html>

Anon1216 · 6. März 2016

Ja habs mal ausprobiert und bis jetzt siehts ganz gut aus, danke

Ich teste noch 1-2 Dinge.

Suche

CSS Trennlinie in Navigation richtig positionieren

Anon1216

Gast

kachiri

Fleet Admiral

blablub1212

Rear Admiral

Anon1216

Gast

Ähnliche Themen