Navigation :first-child problem

dadscho

Hey, muss grade für den Info. Unterricht ne Website bauen, und habe grade Probleme bei der Navigation. Ich habe bei den Menüpunkten mit border-left eine "Trennlinie" und gleichzeitig ein Designelement der sich beim hovern mit dem Text färbt (falls ihr nicht wisst was ich meine, guckt selbst) nur sieht es beim ersten Menüpunkt "Home" blöd aus, wenn er eine Trennlinie hat, ich will dass die Trennlinie/Designelement von "Home" erst sichtbar wird, wenn ich mit der Maus hovere. Dazu wollte ich :first-child benutzten aber irgendwie klappt das nicht entweder alle Trennlinien verschwinden oder "Home" hat immer noch eine Trennlinie. HTML & CSS:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Website</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <!-- Navigation -->
    <div id="nav">
        <!-- Logo -->
        <img src="BILD" alt="Logo">


        <!-- Menü -->
        <ul>
            <a href="#"><li>Home</li></a>
            <a href="#"><li>Über mich</li></a>
            <a href="#"><li>Projekte</li></a>
            <a href="#"><li>Kontakt</li></a>
        </ul>
    </div>
</body>
</html>

Alles anzeigen

CSS-Code:

Code

[COLOR=#26a6a6]body [/COLOR]{
    [COLOR=#ff4427]margin[/COLOR]: [COLOR=#acc814]0[/COLOR];
    [COLOR=#ff4427]padding[/COLOR]: [COLOR=#acc814]0[/COLOR];


    [COLOR=#ff4427]font-family[/COLOR]: sans-serif;
}


[COLOR=#ff4427]#nav [/COLOR]{
    [COLOR=#ff4427]background-color[/COLOR]: [COLOR=#acc814]rgba[/COLOR]([COLOR=#acc814]0[/COLOR], [COLOR=#acc814]0[/COLOR], [COLOR=#acc814]0[/COLOR], [COLOR=#acc814]0.4[/COLOR]);
    [COLOR=#ff4427]height[/COLOR]: [COLOR=#acc814]66[/COLOR]px;
}


[COLOR=#ff4427]#nav [/COLOR][COLOR=#26a6a6]ul [/COLOR]{
    [COLOR=#ff4427]margin[/COLOR]: [COLOR=#acc814]0[/COLOR];
    [COLOR=#ff4427]padding[/COLOR]: [COLOR=#acc814]0[/COLOR];


    [COLOR=#ff4427]list-style[/COLOR]: none;
    [COLOR=#ff4427]float[/COLOR]: right;


    [COLOR=#ff4427]text-transform[/COLOR]: uppercase;
}


[COLOR=#ff4427]#nav [/COLOR][COLOR=#26a6a6]ul li [/COLOR]{
    [COLOR=#ff4427]float[/COLOR]: left;


    [COLOR=#ff4427]padding[/COLOR]: [COLOR=#acc814]24[/COLOR]px [COLOR=#acc814]10[/COLOR]px [COLOR=#acc814]24[/COLOR]px [COLOR=#acc814]10[/COLOR]px;


    [COLOR=#ff4427]border-left[/COLOR]: [COLOR=#acc814]2[/COLOR]px solid black;


    [COLOR=#ff4427]transition[/COLOR]: [COLOR=#acc814]200[/COLOR]ms;
}


//Hier das Problem :/
[COLOR=#ff4427]#nav [/COLOR][COLOR=#26a6a6]ul li[/COLOR]:[COLOR=#ff4427]first-child [/COLOR]{
    [COLOR=#ff4427]border-left[/COLOR]: none;
}


[COLOR=#ff4427]#nav [/COLOR][COLOR=#26a6a6]ul li[/COLOR]:[COLOR=#ff4427]hover [/COLOR]{
    [COLOR=#ff4427]background-color[/COLOR]: [COLOR=#acc814]rgba[/COLOR]([COLOR=#acc814]0[/COLOR], [COLOR=#acc814]0[/COLOR], [COLOR=#acc814]0[/COLOR], [COLOR=#acc814]0.6[/COLOR]);
    [COLOR=#ff4427]color[/COLOR]: orangered;
    [COLOR=#ff4427]border-left[/COLOR]: [COLOR=#acc814]2[/COLOR]px solid orangered;
}


[COLOR=#ff4427]#nav [/COLOR][COLOR=#26a6a6]ul a [/COLOR]{
    [COLOR=#ff4427]text-decoration[/COLOR]: none;


    [COLOR=#ff4427]font-weight[/COLOR]: [COLOR=#acc814]600[/COLOR];


    [COLOR=#ff4427]color[/COLOR]: white;
}

Alles anzeigen

MrMurphy

Hallo

Du hast die li- und a-Elemente falsch herum verschachtelt. Das ul-Element darf nur li-Elemente als direkte Kinder haben.

Durch die falsche Verschachtelung ist gleichzeitig jedes li-Element ein first-child, nämlich vom übergeordneten a-Element.

Gruss

MrMurphy

dadscho

Hey danke für die Antwort Eigentlich ist es absicht, dass die <li> in einem <a> steckt, sieht besser aus.
Wie kann ich das umgehen ohne die li's mit den a's zu tauschen?

MrMurphy

Hallo

Du kannst Flexbox verwenden. Dann wird es noch schlichter und schöner. Dann noch gleichzeitig die passenden HTML-Elemente und gut ist.

Gruss

MrMurphy

djheke

Zitat von dadscho

Hey danke für die Antwort Eigentlich ist es absicht, dass die <li> in einem <a> steckt, sieht besser aus.
Wie kann ich das umgehen ohne die li's mit den a's zu tauschen?

Was sieht besser aus?

HTML

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8">
<title>navi</title>
<style>
nav {
    background-color: rgba(0, 0, 0, 0.4);
    height: 66px;
}




nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: right;
    text-transform: uppercase;
}




nav ul li {
    float: left;
    padding: 24px 10px 24px 10px;
    border-left: 2px solid black;
    transition: 200ms;
}








nav li:nth-of-type(1) {
    border-left: none;
}




nav ul li:hover {
    background-color: rgba(0, 0, 0, 0.6);
    color: orangered;
    border-left: 2px solid orangered;
}




nav ul a {
    text-decoration: none;
    font-weight: 600;
    color: white;
}
</style>
</head> 
<body>
   <!-- Navigation -->
    <nav>
        <!-- Logo -->
        <img src="BILD" alt="Logo">




        <!-- Menü -->
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Über mich</a></li>
            <li><a href="#">Projekte</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </nav>
</body>
</html>

Alles anzeigen

dadscho

Weiß leider nicht was Flexboxen sind und wie ich sie in meiner Navigation verwende Die selfhtml.org Erklärung bringt mich auch nicht weiter

djheke

Nimm doch einfach den modifizierten Code von mir und alles ist gut. Reicht für den Anfang völlig aus.

dadscho

Zitat von djheke

Was sieht besser aus?

HTML

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8">
<title>navi</title>
<style>
nav {
    background-color: rgba(0, 0, 0, 0.4);
    height: 66px;
}




nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: right;
    text-transform: uppercase;
}




nav ul li {
    float: left;
    padding: 24px 10px 24px 10px;
    border-left: 2px solid black;
    transition: 200ms;
}








nav li:nth-of-type(1) {
    border-left: none;
}




nav ul li:hover {
    background-color: rgba(0, 0, 0, 0.6);
    color: orangered;
    border-left: 2px solid orangered;
}




nav ul a {
    text-decoration: none;
    font-weight: 600;
    color: white;
}
</style>
</head> 
<body>
   <!-- Navigation -->
    <nav>
        <!-- Logo -->
        <img src="BILD" alt="Logo">




        <!-- Menü -->
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Über mich</a></li>
            <li><a href="#">Projekte</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </nav>
</body>
</html>

Alles anzeigen

Naja, dass ich auch die "Box" anklicken kann und nicht nur das Wort

djheke

Na dein A-Element musst du zum Blockelement befördern.

nav a {
display:block;
}

HTML

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8">
<title>navi</title>
<style>
nav {
    background-color: rgba(0, 0, 0, 0.4);
    overflow:hidden;
}


nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: right;
    text-transform: uppercase;
}


nav ul li {
    float: left;
}


nav a {
    padding: 24px 10px 24px 10px;
    border-left: 2px solid black;
    transition: 200ms;
    text-decoration: none;
    font-weight: 600;
    color: white
    display:block;
}


nav li:nth-of-type(1) a {
    border-left: none;
}


nav ul li:hover a {
    background-color: rgba(0, 0, 0, 0.6);
    border-left-color: orangered;;
}


</style>
</head> 
<body>
   <!-- Navigation -->
    <nav>
        <!-- Logo -->
        <img src="BILD" alt="Logo">








        <!-- Menü -->
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Über mich</a></li>
            <li><a href="#">Projekte</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </nav>
</body>
</html>

Alles anzeigen

dadscho

Zitat von djheke

Na dein A-Element musst du zum Blockelement befördern.

nav a {
display:block;
}

HTML

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8">
<title>navi</title>
<style>
nav {
    background-color: rgba(0, 0, 0, 0.4);
    overflow:hidden;
}


nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: right;
    text-transform: uppercase;
}


nav ul li {
    float: left;
}


nav a {
    padding: 24px 10px 24px 10px;
    border-left: 2px solid black;
    transition: 200ms;
    text-decoration: none;
    font-weight: 600;
    color: white
    display:block;
}


nav li:nth-of-type(1) a {
    border-left: none;
}


nav ul li:hover a {
    background-color: rgba(0, 0, 0, 0.6);
    border-left-color: orangered;;
}


</style>
</head> 
<body>
   <!-- Navigation -->
    <nav>
        <!-- Logo -->
        <img src="BILD" alt="Logo">








        <!-- Menü -->
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Über mich</a></li>
            <li><a href="#">Projekte</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </nav>
</body>
</html>

Alles anzeigen

Ok, jetzt hab ichs, danke^

Navigation :first-child problem

Tags

Benutzer online in diesem Thema