jojo der anfänger :): Titel verschiebt sich durch Navbar

SELF-Forum

Titel verschiebt sich durch Navbar

jojo der anfänger :) (Versionen)
– Informationen zu den Bewertungsregeln

Hallo Leute

Ich bin neu im Programmieren und habe gerade folgendes Problem. Ich möchte einen schönen Titel in der Mitte erstellen und oben rechts eine Navbar machen, jedoch verschiebt sich der Titel durch diese Navbar.

Wie kann ich das beheben?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Coustard:wght@400;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Yanone+Kaffeesatz:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="index.css">
    <title>Test Website</title>
</head>
<body>
   
    <a href="#">Discord</a>
    <a href="#">Info</a>
    <a href="#">Forum</a>
    <a href="#">Regelwerk</a>
    <a href="#">Shop</a>
  

    <div class="Titlebar">
    <h1>NewFamily <br> State</h1>
    </div>

    <p class="underbar">Werde jetzt ein Teil der Community</p>

</body>
</html>

        body{
            font-family: 'Coustard', serif;
            height: 100%;
            background-color: azure;
        }



        .Titlebar{
            color: rgb(207, 2, 197);
            text-align: center;
            font-size: 300%;
        }

        .underbar{
            color: blueviolet;
            font-size: 25px;
            font-weight: bold;
            text-align: center;
        }

        a{
            text-decoration: none;
            color: blue;
            font-weight: bold;
            margin-left: 12px;
            float: right;
        }

        a:hover{
            color: blue;
            text-shadow: 1px 2px 0px #6f00ff;
            color: blue;
        }

so sieht es aus

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Titel verschiebt sich durch Navbar

    MrMurphy
    – Informationen zu den Bewertungsregeln

    Verzichte auf float, beschäftige dich mit CSS-Grid und Flexbox.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Titel verschiebt sich durch Navbar

    Robert B. (Versionen)
    – Informationen zu den Bewertungsregeln

    Moin jojo,

    Ich möchte einen schönen Titel in der Mitte erstellen und oben rechts eine Navbar machen, jedoch verschiebt sich der Titel durch diese Navbar.

    Wie kann ich das beheben?

        <a href="#">Discord</a>
    <a href="#">Info</a>
    <a href="#">Forum</a>
    <a href="#">Regelwerk</a>
    <a href="#">Shop</a>

    Sollte das nicht Gegenstand einer Navigation sein? Die echten Links kommen vermutlich noch in die href-Attribute, vermute ich.

        <div class="Titlebar">
    <h1>NewFamily <br> State</h1>
    </div>

    Das sieht doch nach einem header aus – sofern dir h1 nicht allein schon reicht; in deinem Beispiel ist das nämlich der Fall.

    .Titlebar{
    color: rgb(207, 2, 197);
    text-align: center;
    font-size: 300%;
}

    Diese Regeln können auch auf h1 angewendet werden.

    a {
    text-decoration: none;
    color: blue;
    font-weight: bold;
    margin-left: 12px;
    float: right;
}

    Die erste Zeile deiner Überschrift floatet um die Links herum – das sieht dann wie gezeigt aus.

    Viele Grüße
    Robert

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Titel verschiebt sich durch Navbar

      Rolf B
      – Informationen zu den Bewertungsregeln

      Hallo Robert,

      ja, das und noch viel mehr. Die Menü-Links sollten auch eine Liste sein.

      <header>
  <nav>
    <ul>
    <li><a href="#">Shop</a></li>
    <li><a href="#">Regelwerk</a></li>
    <li><a href="#">Forum</a></li>
    <li><a href="#">Info</a></li>
    <li><a href="#">Discord</a></li>
    </ul>
  </nav>
  <h1>NewFamily<br>State</h1>
  <p>Werde jetzt ein Teil der Community</p>
</header>

      Ob man den <br> in der H1 braucht, weiß ich nicht so recht. Wenn genug Platz ist, warum soll es dann zweizeilig sein? Aber wenn das Community-Logo so sein soll…

      Minimales Styling wäre dann

      header {
  background-color: #bff;
  contain: layout;   /* Margin vom p Element im header halten */
  text-align: center;
}
header nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: end;
}
header nav li {
  padding: 0.1em 0.4em;
}
h1 {
  margin-top: 0em;
}

      Die Angabe contain:layout ist nicht unbedingt nötig, nur wenn die Hintergrundfarbe außerhalb des Headers wechselt, sollte man das machen. Sonst ist das p Element wegen der collapsing margins möglicherweise ganz an den Rand des header geklatscht.

      Rolf

      --
      sumpsi - posui - obstruxi
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln