Verschiedene Listen anders stylen

[MapHD]

Wie kann ich für die Navigation die Klasse so umbenennen das ich wenn ich eine zweite Liste erstelle auch die dann nicht den Style von der Navigation hat.

 <ul>
  <li><a href="default.asp" class="active">Startseite</a></li>
  <li><a href="news.asp">Über mich</a></li>
  <li><a href="contact.asp">Erfahrung mit Minecraft / GommeHD.net</a></li>
  <li><a href="about.asp">Weshalb ich?</a></li>
  <li><a href="blog.html">Stärken und Schwächen</a></li>
  <li><a href="blog.html">Kontaktmöglichkeiten</a></li>
</ul>

body {
    margin:0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #AD6727;
    position: fixed;
    top: 0;
    width: 100%;
    font-size: 20px;
    
}

li {
    float: left;
}

li a {
    display: block;
    color:#AAA7AB;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

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

.active {
    background-color: #358415;
    color: white
}
li a:hover:not(.active) {
    background-color:#AD6727;
    color:white;
    
}

 

[MrMurphy]

Hallo

Dafür gibt es mehrere Lösungen. Mit deinen Quellcodeschnipseln lässt sich aber nicht sagen welche am sinnvollsten ist.

Du kannst dem ul-Element entweder eine Klasse vergeben oder dich mit CSS-Selektoren beschäftigen.

Gruss

MrMurphy

 

[MapHD]

Hallo

Dafür gibt es mehrere Lösungen. Mit deinen Quellcodeschnipseln lässt sich aber nicht sagen welche am sinnvollsten ist.

Du kannst dem ul-Element entweder eine Klasse vergeben oder dich mit CSS-Selektoren beschäftigen.

Gruss

MrMurphy

Ich habe schon probiert das ich die li eine Klasse zuordne aber dann funktioniert es nicht mehr.

 

[basti1012]

Ich habe schon probiert das ich die li eine Klasse zuordne aber dann funktioniert es nicht mehr.

Sinnvoller wäre

Du kannst dem ul-Element entweder eine Klasse vergeben oder dich mit CSS-Selektoren beschäftigen.

Noch besser wäre

Da es sich um eine Navigation handelt, bietet es sich an, das nav-Tag zu verwenden:

Zusammen gefasst wäre Navigation 1

<nav id="nav1">
<ul>
<li>Bla</li>
</ul>
</nav>

Und Navigatio 2

<nav id="nav2">
<ul>
<li>Bla</li>
</ul>
</nav>

Die Css wäre dann

/*Nav1*/
#nav1 > ul > li{
background:red;
}
/*Nav2*/
#nav2 > ul > li{
background:blue;
}

So ungefähr ganz grob erklärt
Hoffe du verstehst das jetzt so ?

 

[htmlMyAss]

würde auch sagen nav > class!