Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Podświetlenie napisu w menu

Chcesz wiedzieć jak sterować wyglądem strony za pomocą styli? Tutaj dowiesz się jakie możliwości ma CSS i jak poprawnie go stosować, aby uzyskać zamierzone efekty. Dowiesz się jakie nowości udostępniono w CSS3 i jak z nich korzystać.

Podświetlenie napisu w menu

Post 02.04.2018, 14:05:30

Witam,

na stronie głównej http://wedpixels.pl są podświetlone na czerwono napisy STRONA GŁÓWNA i PORTFOLIO.

Chciałbym, gdy jak jesteśmy na stronie głównej to napis STRONA GŁÓWNA jest podświetlona na czerwono, a napis PORTFOLIO nie.

Jak klikniemy w zakładkę PORTFOLIO to napis ma być podświetlony na czerwono, a napis STRONA GŁÓWNA nie.

Wyjaśnię to na przykładzie obrazka:

Obrazek

Po kliknięciu Portfolio, ekran automatycznie przesuwa się na dół na fotografie, dlatego nadałem taki kod w HTML:

Kod: Zaznacz cały
<a name="portfolio">[envira-gallery id="378"]</a>

W pliku style.css:
Kod: Zaznacz cały
a {
    color: #ff3838;
    text-decoration: none;
    cursor:pointer;
}
a:focus,
a:active,
a:hover {
    text-decoration: none;
}


Spróbowałem dać w pliku style.css:

Kod: Zaznacz cały
#portfolio {
    color: #fff;
    text-decoration: none;
    cursor:pointer;
}

#portfolio a:hover {
    text-decoration: none;
}

W HTML:
Kod: Zaznacz cały
<a name="portfolio" id="portfolio">[envira-gallery id="378"]</a>


Niestety nie zadziałało. Nie mam już pomysłów. Czy mogę liczyć na Waszą pomoc?
saszaw90
Posty: 4
Dołączył(a): 02.04.2018

Re: Podświetlenie napisu w menu

Post 02.04.2018, 16:03:04

Narzędzia dewelopera w przeglądarce wskazują, że na stronie głównej link "portfolio" jest ostylowany na czerwono poprzez 2 selektory, na które wskazuje ten styl:
.main-navigation ul li.current-menu-item a
oraz
navigation ul li.current_page_item a

Jakiś skrypt (czy co tam to robi), który wstawia te atrybuty identyfikowanym elementom, wstawia również temu.

I tak prywatnie ode mnie - ta dżungla klas oraz przekombinowanych selektorów - pisząc bardzo eufemistycznie - jest złem.
kabexxx
Posty: 212
Dołączył(a): 27.11.2011

Re: Podświetlenie napisu w menu

Post 02.04.2018, 16:16:40

Wiem, dlaczego tak się dzieje.

Myślałem, że jak utworzę nową klasę i nadam kolor tej klasie, to kolor odnośnika się zmieni. Nie da się.

http://wedpixels.pl - napis Portfolio ma się nie podświetlać na czerwono
http://wedpixels.pl/#portfolio - napis Portfolio ma się podświetlać na czerwono

Tak bym chciał.

Myślę, że da się coś z tym zrobić, tylko brak mi pomysłów. Co byś mi doradził?
saszaw90
Posty: 4
Dołączył(a): 02.04.2018

Re: Podświetlenie napisu w menu

Post 03.04.2018, 05:25:24

Da się, tylko że element odnośnika nie dziedziczy po elemencie nadrzędnym stylów tekstowych. Musisz je dodać wprost dla elementu "a", czyli
Kod: Zaznacz cały
.twoja klasa a { ...}
kabexxx
Posty: 212
Dołączył(a): 27.11.2011

Re: Podświetlenie napisu w menu

Post 03.04.2018, 05:25:24

Da się, tylko że element odnośnika nie dziedziczy po elemencie nadrzędnym stylów tekstowych. Musisz je dodać wprost dla elementu "a", czyli
Kod: Zaznacz cały
.twoja klasa a { ...}
/* Bo faktycznie .twoja klasa {...} dla odnośnika będącego w <a> nie zadziała*/
kabexxx
Posty: 212
Dołączył(a): 27.11.2011

Re: Podświetlenie napisu w menu

Post 03.04.2018, 12:56:53

Niestety nie działa :(

Kod: Zaznacz cały
.portfolio a{
    color: #fff;
    text-decoration: none;
    cursor:pointer;
}

.portfolio a:hover {
    text-decoration: none;
}


Kod: Zaznacz cały
<a name="portfolio" class="portfolio">[envira-gallery id="505"]</a>
saszaw90
Posty: 4
Dołączył(a): 02.04.2018

Re: Podświetlenie napisu w menu

Post 03.04.2018, 20:21:55

Wstyd, że nie ma możliwości edycji postu. Takie forum powinno mieć :(
saszaw90
Posty: 4
Dołączył(a): 02.04.2018

Re: Podświetlenie napisu w menu

Post 04.04.2018, 09:22:21

Otwórz sobie narzędzia dewelopera w przeglądarce. Przez skopane nadawanie klas oraz stylowanie, masz tak, że do jednego elementu odnosi się wiele stylów wzajemnie wykluczających się. Np. do samego koloru tekstu w tym menu odnosi się aż 7 różnych stylów (a o innych cechach ustawianych przez style szkoda mówić, bo style niektórych elementów masz poustawiane w kilkunastu różnych miejscach), więc po prostu ten najbardziej specyficzny - zgodnie z zasadą specyficzności - oraz najbardziej "wewnątrz" i "najpóźniej" - zgodnie z regułą kaskadowości - zwyczajnie pozostałe odwołuje. Możesz sobie stawać na głowie, a i tak nic nie zrobisz, jeśli styl będzie odwołany przez inny.
Już wyżej napisałem, zobacz sobie, co ci narzędzia dewelopera wypluwają oraz zrób "audyt" kodu. Bo po prostu jest on zły.

A edycja posta jest możliwa, tylko że przez ileś minut.
kabexxx
Posty: 212
Dołączył(a): 27.11.2011


Powrót do CSS


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 3 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 51433 zarejestrowanych użytkowników.
Najnowszy użytkownik: Prioleau


Nasi użytkownicy napisali:

  • 937602 wiadomości
  • w 247374 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)