Hilfe bei Navigations Leiste auf Meiner Webseite

  • Also ich muss für die Schule eine Webseite Programmieren nur bringt mich die Navigationsleiste an meine Grenzen. Ich habe die letzten 1 1/2 Stunden damit verbracht es zu beheben und habe keine Lösung gefunden. Ich wäre sehr erleichtert wenn mir einer helfen könnte.


    Wie schaffe ich es Das das grüne Feld (activ) nicht so gross ist und auf das andere passt. (Ich weiss total schlecht beschrieben aber ihr werdet sehen was ich meine)


    Foto: https://ibb.co/hs0WAd


    Code HTML:
    <nav> <ul>
    <li>
    <a class="active" href="home.html">Home</a>
    </li>
    <li>
    <a href="https://bit.ly/2pHT2Cy">Hausaufgaben</a>
    </li>
    <li>
    <a href="bilder.html">Bilder</a>
    </li>
    <li>
    <a href="email.html">E-Mail</a>
    </li>
    <li>
    <a href="kontakt.html">Kontakt</a>
    </li>
    </ul>
    </nav>



    Code CSS:
    nav ul {
    list-style-type: none;
    background-color: #333;
    font-family: sans-serif;
    font-weight: bold;
    padding: 16px;

    }
    nav ul li {
    display: inline;
    border-right: 1px solid #bbb;
    padding-right: 8px;
    padding-left: 8px;

    }
    nav ul li:last-child {
    border-right: none;
    }
    nav ul li a {
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }



    .active{
    background-color: #4CAF50;
    }
    li a:hover:not(.active) {
    background-color: #111;
    }



    Wenn mir jemand helfen Könnte wäre ich mega dankbar. Sorry für die Rechtschreibe Fehler aber bin gerade etwas angepisst.:-D:-D:roll:

  • Code
    1. <div id="menü-div"><nav>
    2. <ul>
    3. <li><a href="index.php">Start</a>
    4. <li><a href="news.php">News</a>
    5. <li><a href="clans.php">Clans</a>
    6. <li><a href="range.php">Ränge</a>
    7. <li><a href="games.php">Games</a>
    8. <li id="sonderbutton"><a href="bewerben.php">Bewerben</a></li>
    9. </ul> </nav> </div>


    Und CSS



    So hab ich das...


    - - - Aktualisiert - - -


    Was du nicht brauchst, wie z.B den Sonderbutton, kannst du einfach aus der CSS-Datei löschen!