Niedziałający kod

Question

Witam!

Chcę zmienić kolor listy <ol> na kolor biały. A co sie dzieje? - Zima.

Nawet po dodaniu klauzuli !important nic nie chce współgrać

Niech ktoś mądrzejszy mnie poprawi

Kod HTML:

<nav id="navigation">
<ol id="options">
<a href="#home">Strona Główna</a>
<a href="#about">O mnie</a>
<a href="#contact">Kontakt</a>
</ol>			
<div class="parallax-window" data-parallax="scroll" data-image-src="slide1.jpg"></div>
</nav>

Tu CSS:

body{
	margin:0 !important;
}
#navigation{
	text-align:right;
	font-family: 'Open Sans', sans-serif;
	color:#ffffff !important;
}
.parallax-window {
    min-height: 400px;
    background: transparent;
}
.wrapper{
	height:100%;
	width:100%;
}

 

Answer 1

Jesli chcesz zmienic kolor tekstu tych linkow na biale, mozesz dac:

#options a {color: #ffffff;}

Answer 2

Co prawda _coder_ podał Ci odpowiedź, ale w Twoim kodzie brakuje li! Dopiero w nich powinny być linki

Answer 3

Warto powiedzieć, skąd się bierze dany problem - przeglądarka ma domyślnie zdefiniowany kolor dla linków: niebieski. Dlatego stylowanie rodzica nie przynosi efektów. W przypadku większości elementów (div, p, itd.) przeglądarki mają zakodowane coś w stylu: color: inherit; co oznacza, że element dziedziczy kolor po rodzicu.

W związku z tym, że praktycznie nigdy nie chcemy, aby link miał kolor niebieski, a dodatkowo bardzo często ma mieć kolor jak pozostała treść w rodzicu, zazwyczaj stosuję taki mały snippet:

a
{
   color: inherit;
   text-decoration: none;
}

Czyli styl ogólny dla wszystkich linków - kolor dziedziczyć ma po rodzicu i nie podkreślać tekstu. Dopiero potem styluję już konkretne znaczniki <a> w zależności od potrzeb.

Ale oczywiście rozwiązanie _codera_ jest prawidłowe ^^

Comments

Jak dla mnie to ta odpowiedź bardziej mnie zadowala ;)

I oczywiście dziękuję za nią - gdyż jest przydatna.