Hilfe bei Webseiten Projekt?

Heya, hab in der Schule gerade so n Projekt wo wir ne eigene Webseite erstellen müssen, eigentlich läuft's ziemlich gut, jetzt hat sich ein Problem gebildet (siehe Bild) unzwar muss ich irgendwie das Video hinter meine liste bekommen, aber ka wie ich das hinbekommen soll und googlen bringt irgendwie auch nichts, könnte mal bitte Hilfe gebrauchen von jemandem der sich mit html, css, editor und so n zeug auskennt und eventuell generell mir helfen kann ^^ (btw yea ich mach über Overwatch, hatte sonst keine Idee und Gefühlt jeder aus meiner klasse macht was über sport oder so,kb darauf -.-)

Comments

[Lukas187972]

Wieso Windows 10?

[GaymerFemboy]

Wieso nicht? Spaß beiseite, ist nicht mein Laptop, hab kein pc oder so Zuhause, ist der Arbeits Laptop meiner Schwester, und wollte da jetzt nichts Updaten oder so

[Henzo]

Kannst du deinen Code teilen?

[GaymerFemboy]

Nur der von dem eingefügten video? Und dann css und html? Hab halt davor div classes gemacht

Answer 1

[Xandros0506]

und googlen bringt irgendwie auch nichts,

Google kann dir unzählige Webseiten mitteilen, bei denen es um die Positionierung von Elementen geht. Und das nicht nur auf einer Ebene, sondern auch in mehreren Ebenen übereinander....

Comments

[GaymerFemboy]

Yea ik, aber keine hilft mir weiter, immer wenn ich was daran verändere geht auf einmal die liste nach unten, soll da halt bleiben

Answer 2

[regex9]

Zum einen kann man Navigation und Video in einen Container stecken.

HTML:

<header class="header">
  <nav class="top-navigation">
    <ul class="top-navigation__list">
      <li class="top-navigation__list-item">
        <a class="top-navigation__list-link" href="#">Rollen/Helden</a>
      </li>
      <li class="top-navigation__list-item">
        <a class="top-navigation__list-link" href="#">Merch</a>
      </li>
      <li class="top-navigation__list-item">
        <a class="top-navigation__list-link" href="#">Gameplay</a>
      </li>
    </ul>
  </nav>
  <div class="video-container">
    <video><!-- ... --></video>
  </div>
</header>

CSS:

.header {
  background: red;
}

.top-navigation__list {
  column-gap: 5px;
  display: flex;
  justify-content: center;
  list-style-type: none;
  margin: 0;
  padding: 5px 0;
}

.video-container {
  background: orange;
}

Die Hintergrundfarben sind lediglich zu Demonstrationszwecken.

Der Videocontainer würde in diesem Fall unter der Navigation liegen, beide könnten sich dasselbe Hintergrundbild oder dieselbe Hintergrundfarbe teilen.

Wenn die Navigation nicht Teil des Headers sein soll, kann man sie auch problemlos herausziehen.

<nav class="top-navigation"><!-- ... --></nav>
<header class="header"><!-- ... --></header>  

Zum anderen kann man durch eine absolute Positionierung ebenso dafür sorgen, dass die Navigation auf der z-Ebene über dem Videocontainer liegt. Sie müsste für diesen Fall wieder (wie im ersten Fall gezeigt) Kindelement des Headers sein.

.header {
  background: red;
  position: relative;
}

.top-navigation {
  background: yellow;
  left: 50%;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateX(-50%);
}