Farbe

[ChechenHD]

Wie ändere ich im Menü Abnschitt die Background Farbe einer einzigen Liste. Die soll eine Liste z.B. Home andere Farbe haben damit man weis in welchem Menü man sich befindet.

HTML <header>

<ul>
<a href="#"><li>HOME</li></a>
<a href="#"><li>SERIEN</li></a>
<a href="#"><li>FILME</li></a>
<a href="#"><li>GENRES</li></a>
<a href="#"><li>INFORMATIONEN</li></a>
</ul>

CSS

header ul {
list-style-type: none;
margin-left: 200px;
margin-top: -27px;
}

header li {
display: inline;
color: white;
font-family: Helvetica;
letter-spacing: 0.5px;
padding-top: 15px;
padding-right: 15px;
padding-left: 15px;
padding: 12.5px;
margin-right: -4px;
}

header li:hover {
background-color: rgba(214,217,217,0.5);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

header a {
text-decoration: none;
}

 

[Cheffchen]

Hallo,

in dem erst mal richtig rum machst

<li><a href="#">HOME</a></li>

und dann li eine classe gibst die ja dann ansprechen kannst

<li class="home"><a href="#">HOME</a></li>

Cheffchen

 

[ChechenHD]

Hallo,

in dem erst mal richtig rum machst

<li><a href="#">HOME</a></li>

und dann li eine classe gibst die ja dann ansprechen kannst

<li class="home"><a href="#">HOME</a></li>

Cheffchen

Vielen Dank! Hat sehr geholfen. Eine Frage hab ich da noch, wieso klappt es nicht wenn ich eine div erstelle mit einer id? Was ist der unterschied zwischen div/ id und class? Und wenn ich link in die li schreibe dann ändern sich die links Texte in die Farbe lila.

 

[Cheffchen]

Hallo,

id ist einmalig auf der Seite, class kann öfter vorkommen.
Das mit der linkfarbe, ist bestimmt die standard farbe die halt anpassen musst oder pass man dein css an von "header li" in "header li a"

Cheffchen

 

[ChechenHD]

Ahh ok. Hab direkt eine neue Frage, mit transition : color 1s; lass ich die Farbe eines Textes langsam verändern breim drüber fahren mit der Maus. Bräuchte nun den passenden Quelltext für den background von Text. Der soll sich auch langsam verändern.

 

[threadi]

Die Möglichkeiten von transition werden z.B. hier beschrieben:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Background-Farben sollten damit änderbar sein, nur Hintergrundbilder denke ich (noch) nicht.

 

[ChechenHD]

Problem gelöst.. color zu background geändert.