CSS Vertikaler Strich?

regex9  13.12.2020, 15:43

Teile ein reproduzierbares Beispiel in einem Fiddle.
LopLop88 
Fragesteller
 13.12.2020, 15:45

https://jsfiddle.net/sm7ze3yq/f

Das Hintergrund Bild ist nicht vorhanden:

die vielen </br> waren damit das ganze Hintergrund Bild komplett angezeigt wird.

2 Antworten

regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, Technik, HTML
13.12.2020, 16:01

Deine Linie benötigt einen anderen Bezugspunkt. Derzeit richtet sie sich nach der Höhe des body-Elements aus.

Packe einen eigenen, relativ positionierten Container drumherum. Ein header würde sich bspw. gut eignen:

<header class="headline">
  <h1 id="titelLM">Luca LucaM</h1>
  <h3 id="titelMP">My Portfolio</h3>
</header>

Da der Strich selbst eher dekorativ ist, würde ich ihn via Pseudoelement einfügen.

CSS:

.headline {
  position: relative;
}

.headline:before {
  border-left: 6px solid #1E262D;
  content: '';
  height: 100%;
  left: 8%;
  position: absolute;
  top: 10%;
}

Die Positionierung kannst du ja nach eigenem Belieben nochmal ändern. Benutze dafür die Properties left, top, bottom und right. Mit Außenabständen herumzuschieben, ist an der Stelle nicht so schön.

Aktualisiertes Fiddle: https://jsfiddle.net/qyamtfp5/

Bezüglich dieser beiden divs:

<div class="bg">
  <!-- NavBar -->
  <div class="topnav" id="myTopnav">

würde ich dir stattdessen empfehlen, main und nav als Tags zu verwenden. Sie sind viel aussagekräftiger und beschreiben in diesen Fällen deinen Inhalt auch passend.
LopLop88 
Fragesteller
 13.12.2020, 16:04

Vielen Dank!

0
NackterGerd
13.12.2020, 16:11

Keine Ahung wie du den Strich erzeugt hast.

Aber vermutlich wäre Border left das geeignete Mittel für dein Problem

Dann kannst du mit Padding top und Padding bottom die Länge des Strichs abhängig vom Text einstellen