HTML: Was muss ich tun, damit dieser schwarzer Strich nur bis zum Menü geht (nicht darüber) und wie kann ich das Menü zentral ausrichten?

Hallo,

was muss ich tun, damit dieser schwarzer Strich nur bis zum Menü geht und nicht darüber? Und wie kann ich das Menü zentral ausrichten, also damit die nicht links sind, sondern mittig?

Strich:

.vl {
  border-left: 2px solid black;
  height: 4000px;
  position: fixed;
  left: 18%;
  margin-left: -3px;
  top: 0;
}

Menü:

<ul>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Mods</a>
    <div class="dropdown-content">
      <a href="#">Bedrock mods</a>
      <a href="#">Java mods</a>
  <li><a href="#home">Skins</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Seeds</a>
    <div class="dropdown-content">
      <a href="#">Bedrock seeds</a>
      <a href="#">Java seeds</a>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Maps</a>
    <div class="dropdown-content">
      <a href="#">Bedrock maps</a>
      <a href="#">Java maps</a>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Texture packs</a>
    <div class="dropdown-content">
      <a href="#">Bedrock Textures</a>
      <a href="#">Java Textures</a>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Guide</a>
    <div class="dropdown-content">
      <a href="#">..................</a>
      <a href="#">..............</a>
    </div>
  </li>
</ul>

Answer 1

[EinAlexander]

damit dieser schwarzer Strich nur bis zum Menü geht und nicht darüber?

Mit

.vl {
  border-left: 2px solid black;
  height: calc(100vH - 3em);
  position: fixed;
  left: 18%;
  margin-left: -3px;
  top: 3em;
}

Und wie kann ich das Menü zentral ausrichten, also damit die nicht links sind, sondern mittig?

Mit

<style>
ul { display:table; margin:auto }
</style>

Alex

Answer 2

[regex9]

1) Du kannst absolut positionierte Elemente zwar mit den CSS-Properties top / bottom / left / right verschieben, doch sehe ich für deinen Anwendungsfall keinen Grund, überhaupt auf einer absoluten Positionierung aufzubauen. Du machst es dir doch so eher schwerer als nötig. Der Container für den Inhalt (Welcome, etc.) kann genauso gut die Randlinie liefern.

HTML:

<nav><!-- your menu --></nav>
<main><!-- your main content --></main>

CSS:

main {
  border-left: 2px solid black;
  height: 4000px;
  margin-left: 18%;
}

2) Gib deinem ul-Element eine Klasse

<ul class="menu">

und mache aus dem Element via CSS eine Flexbox.

.menu {
  column-gap: 5px;
  display: flex;
  justify-content: center;
}

Daraufhin werden die li-Elemente horizontal nebeneinander positioniert. Mit dem column-gap-Property kannst du den Abstand zwischen jedem Element bestimmen, mit justify-content erfolgt eine zentrierte Ausrichtung auf der horizontalen Achse.

PS.: Beachte, dass deine Listenelemente neben dem öffnenden li-Tag auch einen schließenden li-Tag erwarten. Der ist bei dir nicht immer gegeben. Auch schließende Tags für div-Elemente fehlen.

Answer 3

[TechPech1984]

.vl {
 border-left: 2px solid black;
 height: 4000px;
 position: fixed;
 left: 18%;
 margin-left: -3px;
 top: 0;
}

das top anpassen würde ich mal behaupten .

Comments

[Patrick649]

ja aber wie? weil wenn ich dort z.B. -1 schreibe ist es viel zu weit unten.Und wenn ich 1,2,3,4 oder 5 schreibe passiert nichts

[TechPech1984]

@Patrick649

schon mal pixel angabe versucht etc . sorry aber etwas css grundwissen sollte man schon mitbringen .

ausserdem sehe ich nur ein snipe einer ganzen seite .

[Patrick649]

@TechPech1984

ups war irgendwie dumm sorry mit "px" klappt es. Und wie kann man beim menü diese kästchen mittig stellen?