Navigationsleiste

[AlcoLix]

Hallo,

könnt ihr mir vielleicht sagen wie ich das alles in eine Linie bekomme (siehe Bild)



Hab schon einiges versucht, allerdings ohne Erfolg. Der Abschnitt "Rezepte" ist ein Dropdown-Menü.

 

[Aaron3219]

Überprüf die paddings. Oder schick mal den Code rein. Ich kann mir vorstellen, dass da noch mehr Fehler sind

 

[AlcoLix]

Das wäre der Code zur Navigationsleiste:

/* Navigation
* Alle Navigation Elemente zentrieren */
nav {
text-align: center;
float: right;
margin-top: 0;
}

/* Remove default list styling for navigation list */
.nav {
list-style: none;
margin: 0;
padding: 0;
}

.nav li {
display: block;
list-style: none;
background-color: #31B404;
color: #fff;
float: left;
margin: 0;
padding: 10px;
width: 100px; /* feste Breite wegen Zentrierung */
text-decoration: none;
}
Und das wäre das Dropdown - Menü:

/* Dropdown Button */
.dropbtn {
background-color: #31B404;
color: blue;
padding: 0.75em 1.25em;
font-size: 16px;
border: none;
cursor: pointer;
}

/* Der container <div> - zur positionierung des Dropdown contents benötigt */
.dropdown {
position: relative;
display: inline-block;
}

/* Dropdown Content */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

/* Links im Dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

/* Ändert die Farbe des Dropdowns wenn man drüber fährt */
.dropdown-content a:hover {background-color: #E8232B}

/* Zeigt das Dropdown Menü beim drüber fahren (hover) */
.dropdown:hover .dropdown-content {
display: block;
}

/* Ändert den Hintergrund des Dropdowns */
.dropdown:hover .dropbtn {
background-color: #E8232B;
}

 

[Aaron3219]

Der html-Code wäre auch nützlich. Ich glaube ich weiß wo ein weiterer Fehler liegen könnte. Aber ohne html wirds schwierig.

 

[AlcoLix]

Entschuldigung

Hier der HTML - Code von der Startseite:

<!-- Navigation -->

<nav class="nav-wrap">
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><div class="dropdown">
<button class="dropbtn">Rezepte</button>

<div class="dropdown-content">
<a href="vorspeise.html">Vorspeise</a>
<a href="hauptgericht.html">Hauptgericht</a>
<a href="nachspeise.html">Nachspeise</a>
</div>
</div>
</li>

<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="lifehacks.html">Lifehacks</a></li>
<li><a href="team.html">Team</a></li>
</ul>
</nav> <!-- / .nav-wrap -->

 

[Aaron3219]

Um dein eigentliches Problem zu klären:
Es liegt in der Tat an den paddings. Du setzt für die li-Elemente ein padding von 10px.
Der Button hat eine height, die sich von den anderen li-Text-Elementen unterscheidet. Er ist höher. Deswegen steht der Button unten raus.
In dem du NUR dem button ein padding-bottom: 7px; gibst, ist das Problem prinzipiell gelöst.

Nun aber zu einem anderen 'Problem', das kein richtiges Problem ist, sondern eher ein (Anfänger-???)ansatz bei deinem Dropdown-button. Hier mal eben deine Version (gekürtzt):

<nav class="nav-wrap">
    <ul class="nav">       
        <li><div class="dropdown">
                <button class="dropbtn">Rezepte</button>

                <div class="dropdown-content">
                    <a href="vorspeise.html">Vorspeise</a>
                    <a href="hauptgericht.html">Hauptgericht</a>
                    <a href="nachspeise.html">Nachspeise</a>
                </div>
            </div>
        </li>
    </ul>
</nav> <!-- / .nav-wrap -->

Du packst das Dropdown in ein div, welches beim hovern eines buttons dann das div anzeigt.
Dies ist ein sehr ungüblicher Ansatz.
Ich weiß, wenn ich dir die Lösung vorsetze, dann copy-pastest du es eventuell, aber ich kann dir nur empfehlen, dich damit genauer zu beschäftigen und es versuchen zu verstehen.
Schau dir aber erst die CSS-Selektoren an, da du diese eventuell brauchen wirst, um meine Lösung zu verstehen:
https://www.w3schools.com/cssref/css_selectors.asp
Ist nicht sonderlich schwer. Hier meine Lösung:
https://jsfiddle.net/Aaron3219/5daqy21p/

 

[AlcoLix]

Danke dir erstmal :)
Ich werde mal versuchen was ich hinbekomme