CSS - podświetlenie napisów


(northwest) #1

Witam serdecznie :slight_smile:

Mam pytanie, robię sobie stronę z podświetlanym menu: http://stepby.no-ip.org/MONIKA/pracka/ (hover)

ale niestety nie za bardzo mi to działa :frowning: Tzn. są jakieś przesunięcia, podświetlenie nie jest na środku napisu...

Mogłabym prosić o pomoc? :slight_smile:

Monika


(ziggurad) #2

Z #lista li a:hover usuń:

position: absolute;

width: 117px;

Po co nadajesz height: 145px; ? Dla #lista ul dodaj:

overflow: hidden;

Chcesz żeby na hoverze zielone tło przykrywało czarne tak?


(northwest) #3

dokładnie :slight_smile: chce taki pionowy prostokąt obejmujący cały napis :slight_smile:

ps. ten zmiany nie pomogły za bardzo :frowning:


(ziggurad) #4

Bo te zmiany nie wystarczą :wink:

Na hover wrzuć ten sam obrazek ale o szerokości 1px i powtarzaj w osi x.

#lista usuń:

margin: 22px 0 0;

#lista ul dodaj:

margin:0;

#lista li usuń:

height: 56px;

#lista li a zmień na:

padding: 45px 35px;

Robię w FireBugu ale wygląda okey… Tylko to tło popraw.

Jeśli będą jeszcze problemy uaktualnij na serwerze i daj znać.


(northwest) #5

super, dziękuję bardzo :slight_smile:

wiesz może tylko dlaczego te podświetlenie jest takie brzydkie??:frowning:


(ziggurad) #6

No jeśli podświetlenie Ci się nie podoba to wina tylko i wyłącznie obrazka.

Może przy edycji pliku zapisałeś go w słabej jakości?


(northwest) #7

tzn on jest jakiś szarawy, jakby miał plamy… a wcześniej był równomierny http://stepby.no-ip.org/MONIKA/pracka/img/hover.png :slight_smile:

może ten 1px to za mało?


(ziggurad) #8

Mój błąd, sorry, nie widziałem że ten obrazek ma ukośny efekt jakiś pasków.

Myślałem że to jednolity gradient i można powtórzyć tło paskiem o szerokości 1px.

W tym przypadku musisz mieć taki obrazek jak na początku a nawet dłuższy żeby “starczył” na dłuższe linki.

Tylko pamiętaj o tym że masz tam jakby “ramkę” jak obrazek będzie dłuższy niż link nie będzie jego zakończenia, jak będzie za krótki nie starczy na całego linka :wink: Albo zrezygnuj z tego obramowania i dodaj w css jakieś zielone 1-2px albo możesz się bawić w rozdzielenie tła na początek i środek i nałożyć koniec np spanowi którego dodasz do każdego

.


(northwest) #9

Ok, dziękuję :slight_smile:

czy dałoby się zrobić tak żeby ten obrazek pozostał tej samej szerokości co jest oryginał (bez rozciągania)?:slight_smile:

Dodałam ramkę na to podświetlenie i teraz też mi ją powiela… chciałabym żeby to działało tak jak teraz, ale żeby podświetlenie miało stałą

szerokość obrazka :slight_smile:


(ziggurad) #10

Obrazek ma szerokość 117px więc jeśli chcesz żeby pasował do wszystkich pozycji taką szerokość nadaj każdemu z odnośników (minus boczny padding (35px *2) czyli 47px.

Ale obrazek ten jest za mały na większość linków, więc jeśli chcesz stałą szerokość i ten konkretny obrazek musisz zmniejszyć boczny padding (zwiększając odpowiednio szerokość).

Np:

padding: 45px 10px;

    text-align: center;

    width: 97px;

Przy okazji dla #lista li a:hover daj:

background-repeat: no-repeat;