Jak zrobić aktywny przycisk w css?

Dla specjalistów Webmastering
#1

Mój kod html to:

Start

#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).

#3

Ale są razem na pulpicie

– Dodane 28.11.2012 (Śr) 19:39 –

Ale są razem na pulpicie

#4

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

#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ć.

#6

loguj

#7

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

#8

wszystkie pliki są w jednym folderze?

plik.html

stie.css

1.png

2.png

#9

Tak

#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ć ? …

#11

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

#12

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

#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.

#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).

#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 :))

#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.

#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:

#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