Jak zrobić aktywny przycisk w css?


(lutum2012) #1

Mój kod html to:

Start


(manieKMP) #2

Pewnie to przez href="site" , brak podanego rozszerzenia i/lub ścieżki do pliku (ścieżka potrzebna, jesli plik html i css nie są w tym samym miejscu).


(lutum2012) #3

Ale są razem na pulpicie

-- Dodane 28.11.2012 (Śr) 19:39 --

Ale są razem na pulpicie


(manieKMP) #4

A co się stanie jak za href="site" dasz href="site.css"?


(Grzelix) #5

Na początek błędy:

  1. brak znacznika

  2. background-image - źle wpisany dla hover literówka

a żeby wszystko działało ok potrzebny jest

display:block;

i dla przyzwoitości rozszerzenie css dla pliku ze stylami powinno być.


(lutum2012) #6

loguj


(Drobok) #7

class/ id się nie pisze cyframi. napisz _1, albo jeden etc


(Grzelix) #8

wszystkie pliki są w jednym folderze?

plik.html

stie.css

1.png

2.png


(lutum2012) #9

Tak


(Drobok) #10

Widzę, że mnie olałeś więc powtórzę.

Powinno być nie zaczyna się, lecz w twoim przypadku to jedno.

MASZ ZŁY SELEKTOR, więc jak chcesz cokolwiek zmieniać ? ...


(lutum2012) #11

:slight_smile: Teraz już działa, wielkie dzięki za pomoc...


(Pablo_Wawa) #12

Ciekawostka: http://www.davidjrush.com/blog/2009/01/css-rollover-button/ - już nie potrzebujesz 2 osobnych obrazków, tylko jeden. :slight_smile:


(Grzelix) #13

@Pablo_Wawa ja nie nazwałbym tego ciekawostką, Jest to przykład wykorzystania technologi css sprites (http://www.w3schools.com/css/css_image_sprites.asp) i jest to dość stara technika (jak na IT).

Jej głównym celem jest zmniejszenie ilości zapytań do serwera, ale to pewnie już wiesz.

@lutum2012 widzę że jesteś początkujący w tym temacie, więc zachęcam do zapoznania się z powyżej przywołaną techniką. Znajomość wielu metod i technik jest bardzo przydatna.


(Pablo_Wawa) #14

Ciekawostka to miała być dla autora (lutum2012) i chciałem mu to pokazać, bo może to kiedyś wykorzysta.

Ja sam też kilka lat temu o takiej "sztuczce" nie wiedziałem i miałem pasek narzędzi (w aplikacji internetowej) składający się z mnóstwa obrazków (dla każdej pozycji aż 4 wersje: normalna, nieaktywna, po najechaniu i po kliknięciu). Potem, jak się dowiedziałem o tej technice, w nowej wersji poszedłem o krok dalej i zrobiłem tak, że cały pasek narzędziowy składa się z 1 pliku (w poziomie są kolejne pozycje, a w pionie wszystkie 4 wersje) i każdą opcję pozycjonuję CSS'em, oczywiście wspierając się (np. przy kliknięciu) JavaScriptem.

Jak ktoś chce zobaczyć, jak to jest zrobione (projekt jest w trakcie prac, więc nie wszystko działa, a w zasadzie to niewiele), to podaję link: http://programistrz.pl/projekty/webcell/demo/index.html (w Internet Explorerze 8, jak się włączy tryb zgodności wstecznej z IE 6, widać wyraźnie, jak to jest zrobione, bo całość się "pięknie" rozjeżdża - nie wspieram w tej aplikacji IE<8).


(Drobok) #15

W twoim demo nie działa żaden z przycisków (przynajmniej u mnie, chrome :P) (menu też tylko się rozwija) :))

A jak czasami po zmianie języka sprites się sypie :))


(Pablo_Wawa) #16

Te przyciski nie działają, w sensie nie są klikalne, ale hover działa (i to miałem na myśli w tym przykładzie), również w Chrome (pod Windows):

chromescreen.jpg

Pod Linuksem nie testowałem.

Menu też nie jest klikalne z wyjątkiem zmiany języka.


(Drobok) #17

Myślałem że to ma działać. Ogólnie fajny przykład, ale za dużo roboty jak na samą demonstracje css sprites imo :slight_smile:


(Pablo_Wawa) #18

No niestety wiele rzeczy jeszcze nie jest skończonych.

Przecież to nie służy do demonstrowania tego efektu, ja tylko pokazałem użycie go w konkretnym, praktycznym zastosowaniu - zamiast 100 plików jest tylko jeden:

standard.png