Beiträge von dadscho

dadscho

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^

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

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

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?

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

Beiträge von dadscho

Navigation :first-child problem

Navigation :first-child problem

Navigation :first-child problem

Navigation :first-child problem

Navigation :first-child problem