byłbym mega wdzięczny gdyby ktoś pomógł mi z dodaniem jednego elementu. Próbowałem już we wszystkie strony ale ni czorta, nie działa
Chodzi o ten element na dole strony http://fundacjacrm.pl/strona13/index.php - “Wspierają nas”. Są tam loga które przesuwają się po naciśnięciu odpowiedniej strzałki. Ja chciałbym aby jeszcze dodatkowo te obrazki przesuwały się same, co mniej więcej 2 sekundy (oczywiście strzałki cały czas mają być aktywne). I teraz pytanie jak? Pomagałem sobie tą stroną http://csswizardry.com/2011/10/fully-fluid-responsive-css-carousel/ lecz w żaden sposób nie udało mi się tego tak uruchomić:/
A określiłeś “keyframes” dla tej swojej karuzeli? Animacja bez tego nie może działać, ponieważ nie wiadomo co konkretnie ma robić (masz to na końcu tutka, który podałeś, z tym że w nim masz określone przesunięcie w bok/lewą stronę…).
Określ tyle części procentowych ile masz elementów do przesunięcia w zakresie 0-100% (ogólnie określa to prędkość przesunięcia).
Dla każdego procentu podaj “top” o ujemnej wartości (pierwsza będzie miała top = 0px) równiej sumie wysokości przesuwanych elementów.
U Ciebie jest chyba 11 elementów ogółem, więc powinieneś podzielić % na 11 części (jak będą równe to prędkość przejścia będzie identyczna) i odejmować “top” każdej, biorąc pod uwagę wysokość elementu (u Ciebie jest chyba 100px)…
Przykład na 10 elementach (lenia mam na przeliczanie ;))
Strona tutaj http://fundacjacrm.pl/strona13/index.php#. Zerknijcie plis. Będę wdzięczny za podpowiedź co zmienić aby przewijały się wszystkie zdjęcia a nie tylko pierwsze dwa. Wrzucałem ten element w inne miejsca i niestety nic z tego nie wyszło.
Poza tym obrazki chowają się pod napis a nie pod tą przerywaną linię co też mnie wkurza Jakieś sugestie?
Animacja jest podpięta pod zły element, dałeś pod “.jCarouselLite”, powinno być pod “ul#carousel” (jest dzieckiem tego pierwszego), przez to masz wjazd na tytuł (przenieś “animation…” w odpowiedni/podany element).
Poza tym keyframes źle nastawiłeś, według tego co masz teraz na stronie (i w podanym kodzie css) elementy “#carousel li” mają wysokość 100px, a nie jak w Twoim ustawieniu 20px (o tyle właśnie jest przesunięcie…). Mając jedenaście elementów, powinieneś odejmować 100 pikseli każdego, zaczynając od drugiego % (patrz przykład z poprzedniego postu, bo na dobrą sprawę musisz w nim jedynie powiększyć ilość elementów, zmniejszając/dzieląc odpowiednio %).
Łaaa!! Działa!! Kolego przepraszam ale jeszcze Cie pomęczę Działa ale teraz brakuje mi jeszcze dwóch rzeczy. Ustawiłem tak jak napisałeś ale obrazki lecą jednostajnie praktycznie bez zatrzymywania.
A ja chciałbym aby skakały co jeden w górę i tak wkoło. Czego tam brakuje?
Hehe, teraz ja z lekka strzeliłem błędem ;). Spojrzałem jeszcze raz w tego tutka, którego podałeś w pierwszym poście i zauważyłem na jak wyglądają “pauzy”:
A poniższe dla Ciebie, ale do “dopieszczenia” (coś nie trybi z wysokością przesunięcia, więc będzie trzeba poprzesuwać odpowiednio, no i może będziesz chciał pobawić się z czasem -teraz jest po 5% na pauzę i 1% na przesunięcie):
A na jakiej zasadzie one działały, nie były/są podpięte pod jakiś skrypt js?
Ja bym zasadzie się tych przycisków pozbył (skoro się wsio rusza z automatu ;)) i dodał do css’a “animation-play-state:paused;” dla dodatkowego wpisu “ul#carousel:hover”, czyli coś w tym stylu:
W sumie masz rację. Tak się zastanowiłem na spokojnie i tak będzie lepiej. Schowałem te przyciski i zrobiłem też tak jak napisałeś, także jest spoko. Śmiga!
Dobra, to jak już tak sobie miło piszemy:D to mam jeszcze do Ciebie pytanko. Widzę, że ogarniasz temat dość biegle więc tutaj też pewnie podpowiesz mi coś mądrego. Chodzi o menu.
Wejdź na stronkę http://fundacjacrm.home.pl/strona13/ i najedź mychą na “odpowiedzialność społeczna”. Wysunie Ci się podmenu. Tutaj np. jak najedziesz na “pomagamy tym większym” to zielone podkreślenie nie zaznacza całego tekstu bo jest on w dwóch linijkach. Wkurza mnie to strasznie. Żeby to zmienić to musiałbym w stylach dodać drugą grupę/drugie submenu. Ale za nic mi to nie wychodzi. Można zrobić class tylko dla pozycji lub ?
Najłatwiejszym obejściem w tej sytuacji będzie tym “dwuwierszowcom” zmniejszenie wartości przynajmniej górnego obramowania (padding).
Po swojej stronie zrobiłem to w ten sposób, że dla wewnętrznych em (tym em, które są w em ;)) elementów dwuwierszowych menu, dopisałem klasę “big” (może być inna nazwa…), a do css’a dopisałem .big {padding: 4px 8px 5px !important;} (u ciebie teoretycznie dopisek “!important” nie powinien być potrzebny, ale jak nie zatrybi to go wstaw).
A co do Twojego pomysłu z wyższym tłem dla “hover”, jest znacznie bardziej skomplikowany do wykonania, choćby ze względu na to, że te tło jest złożone z trzech grafik (lewa i prawa z zaokrąglemiem, oraz środkowa), a ono samo ma “zdolność” do dostosowanie się tylko do szerokości obiektu. Ogólnie trzeba byłoby stworzyć te grafiki na nowo, o większej wysokości i podopisywać więcej do kodu strony, na podobnej zasadzie jak w powyższym rozwiązaniu, tyle że wpisać trzeba byłoby trzy różne klasy w trzy miejsca dla jednego obiektu i powtórzyć je dla reszty (“li a” ma grafikę lewą, pierwsze “em” ma grafikę prawą, a w drugim/wewnętrznym “em” siedzi powtarzająca się grafika dla środka…).
PS. Jest jeszcze inne rozwiązanie, można by te wspomniane grafiki dla “hover” zastąpić/odtworzyć jako stylowanie css dla jednego elementu (byłoby bez podziału na trzy…) i bodajże podpięcie jego pod “li”, ale trzeba byłoby pozbyć się jeszcze samych grafik…
Dzięki!!
Jakieś sugestie? 