Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] Podświetlanie w menu
Forum PHP.pl > Forum > Przedszkole
-Karolina-
Hejka,
Nie jestem w stanie sobie poradzić z menu w CSS. Mam takie menu http://jsfiddle.net/QLk5a/ chciałabym żeby niebieskie podkreślenie było równe szerokości napisu w głównym menu, a nie jak teraz czyli jest szersze niż napisy. Może ktoś mnie wspomóc?

Bardzo dziękuję.
Kshyhoo
Nadaj a a nie li.
-Karolina-
Jak rozumiem chodzi o ten kawałek?

  1. #cssmenu > ul > li:hover:after {
  2. content: '';
  3. display: block;
  4. width: 90%;
  5. height: 0;
  6. position: absolute;
  7. bottom: 0;
  8. border-bottom: 5px solid #0774E8;
  9. margin-left: 10px;
  10. }
  11.  
  12. #cssmenu > ul > li.active:after {
  13. content: '';
  14. display: block;
  15. width: 85%;
  16. height: 0;
  17. position: absolute;
  18. bottom: 0;
  19. border-bottom: 5px solid #0774E8;
  20. margin-left: 9px;
  21. }
-Karolina-
Mogę mimo wszystko prosić o pomoc? Podpowiedź lub naprowadzenie na rozwiązanie problemu?
trueblue
Dlaczego masz dwa różne stylowania dla :hover i .active? Taki jest cel?

Ksyhoo już Ci podpowiedział, wedle tego:
  1. #cssmenu > ul > li:hover>a {
  2. ...
  3. }
  4.  
  5. #cssmenu > ul > li.active>a {
  6. ...
  7. }
-Karolina-
Dlaczego dwa? Tak bo chciałam osiągnąć inne stylowanie głównego menu jak i submenu.

Natomiast wracając do mojego głównego problemu, trochę wyczyściłam kod, zmodyfikowałam zgodnie z radą i niestety nie działa http://jsfiddle.net/QLk5a/2/ sad.gif Jeśli usunę pseudoelementy :after to menu całkowicie się rozjeżdża :/
trueblue
  1. #cssmenu > ul > li:hover>a > span {
  2. #cssmenu > ul > li.active>a > span {
  3. border-bottom: 5px solid #0774E8;
  4. }
-tomm-
to usuń padding z "a":
  1. #cssmenu a {
  2. ...
  3. line-height: 35px;
  4. padding: 0;
  5. ...
  6. }


a nadaj go otaczającenu je "li"
  1. #cssmenu > ul > li {
  2. float: left;
  3. padding: 0 10px;
  4. }
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.