Jump to content
QbisieQ

Problemy z CSS-em i HTML-em

Recommended Posts

Synek Torm.... był bardzo delikatny... to jest zgroza przez duże "G"...:))).... ale ja na szczęście jestem stary i głupi i moGę się mylić... ale nie w tym wypadku...!!!

Share this post


Link to post
Share on other sites

QbisieQ - zarówno asymetria jak i duże kontrasty jak najbardziej.. zwłaszcza w webdesignie są mile widziane... ale to tak jakbyś tłumaczył poziom hałasu w maluchu... tym, że mocny silnik zawsze jest głośny ;)

 

-- edit --

odnośnie kodu to wszystko Ci działa :)

Edited by torm

Share this post


Link to post
Share on other sites

Pojawił mi się kolejny drobny kłopot. Dopóki grafiki ze strony nie zostaną zcache'owane przez przeglądarkę, wczytanie ich zajmuje parę sekund. O ile z tłem czy menu nie stanowi to problemu to podświetlenia i aktywacje przycisków powinny się wyświetlać natychmiast. Zastanawiam się więc czy jest jakiś sposób na pre-cache'owanie wybranych elementów? Tj. wczytanie grafik zenim nastąpi żądanie ich wyświetlenia.Poszukałem chwilę w google ale nie znalazłem nic ciekawego.Jedyny sposób jaki przychodzi mi do głowy to wstawienie tych grafik gdzieś na stronie i ukrycie ich.Ale może znacie jakiś bardziej profesjonalny i elegancki sposób?

Share this post


Link to post
Share on other sites

Dzięki torm, widocznie pod złymi tagami szukałem :P Znalazłem tez nieco prostsze wersje skryptów preloadujących, ale nie wiem czemu nie działają. help!

W pliku html mam między znacznikami

i (w paru miejscach widziałem, że tu powinno się umieszczać skrypty a w innych źródłach podają że przed

Share this post


Link to post
Share on other sites

ok, widzę, że chyba jest jakiś problem ze ścieżką dostępu do skryptu, i być może do plików do których skrypt się odwołuje, tylko nie wiem czemu.

 

Dopisałem wypisywanie tekstu w skrypcie ale nic nie wypisało, poza tym dla sprawdzenia, w pliku .html wpisałem i również nie wczytało obrazka (na serwerze, u mnie wczytuje). Wczytuje tylko wtedy gdy obrazek jest w tym samym katalogu co plik i w ścieżce znajduje się tylko jego nazwa. Dodam, że używałem ścieżek względnych, więc chyba powinno działać? Nie mam pojęcia czemu tak się dzieje. Szczególnie, że arkusz css też znajduje się w innym folderze niż html i jakoś nie ma problemu z jego odczytaniem.

Share this post


Link to post
Share on other sites

hmm choćby taka, że obrazki nie są wczytywane javascriptem (czy tam preloadowane)

Jak sobie podejżysz w źródła większych zawodników jak facebook, google czy choćby nawet onet to wszyscy oni mają obrazki w sprite.

Korzyści z używania spritów to np. choćby brak problemu z hoverem na przycisku (jaki Ty masz), wczytywany jest jeden obrazek od strzału i cała strona jest już widoczna, bez późniejszego doczytywania. Mocno ograniczone są requesty do serwera! zamiast np 80 zapytań o obrazki leci raptem jeden! Przez co oczywiście zwiększa się szybkość wczytywania strony i jej 'wydajnosc' ;)

 

Są różnej maści programy, które ułatwiają tworzenie spritów (same Ci ułożą obrazki i podadzą koordynaty), ale można to zrobić nawet samemu w Photoshopie.

Share this post


Link to post
Share on other sites

Dzięki za komentarze, olałem te skrypty i zrobiłem sprite'y w PS-ie, działa wszystko teraz tak jak powinno :)

Share this post


Link to post
Share on other sites

Następny problem: jak zrobić przycisk, który nie będzie prostokątem ? Konkretnie chodzi mi o to, żeby np. okrągły czy trójkątny button nie podświetlał się od razu po najechaniu na prostokąt w który jest wpisany? Chociaż, właściwie okrągły, czy trójkątny itak nigdy nie jest bo grafika itak zawsze zawiera się w prostokącie, może mieć co najwyżej przezroczyste jakieś pixele, więc właściwie chodzi chyba o sposób nałożenia jakiejś maski ograniczającej.

Share this post


Link to post
Share on other sites

Niebawem. Kwestia tygodnia lub dwóch. Zależy od tego czy będę miał dużo do nauki na uczelni, bo w samej stronce zostało mało do zrobienia...i hope :)

Share this post


Link to post
Share on other sites
Następny problem: jak zrobić przycisk, który nie będzie prostokątem ? Konkretnie chodzi mi o to, żeby np. okrągły czy trójkątny button nie podświetlał się od razu po najechaniu na prostokąt w który jest wpisany? Chociaż, właściwie okrągły, czy trójkątny itak nigdy nie jest bo grafika itak zawsze zawiera się w prostokącie, może mieć co najwyżej przezroczyste jakieś pixele, więc właściwie chodzi chyba o sposób nałożenia jakiejś maski ograniczającej.

 

Nie da się.

Jedyny sposób to flash lub (chyba) html5 i canvasy - z tego drugiego nie miałem jeszcze przyjemności korzystać, ale generalnie służy to do rysowania elementów różnych kształtów więc obstawiam, że się da :)

 

Ewentualnie możesz pobawić się w zaokrąglane rogi

Share this post


Link to post
Share on other sites

jest jeszcze area map... :) ale do tego to Ci się przyda Fireworks... bo ręcznie taką mapę napisać... to można się skichać..:/

Share this post


Link to post
Share on other sites

Kolejny post i niestety nie jest to prezentacja stronki lecz kolejny problem. Co prawda pozostało mi już tylko wrzucić jeszcze parę obrazków i jakieś kosmetyczne zmiany ale zauważyłem, że strukturę galerii zorganizowałem beznadziejnie i z czasem będzie coraz gorzej :/ Chodzi o to, że każda strona galerii i każda powiekszona miniaturka to osobna strona html. Dodatkowo, wymyśliłem sobie, że najnowsze prace będą najpierw (najwyzej na pierwszej stronie) więc jeżeli chcę wrzucić jakąś nową pracę to muszę w tabeli i między stronami jeżeli jest ich więcej niż jedna, wszystkie inne przesuwać. Czyli aktualne rozwiązanie generuje mnóstwo bezmyślnego ctrl+c ctrl+v.

Na początku chciałem napisać zewnętrzny program, który zrobi to za mnie, ale perspektywa miliona plików średnio przypadła mi do gustu, więc ostatecznie chciałbym mieć jeden plik z galerią i jeden z podglądem na których byłyby osadzone skrypty podmieniające treść według potrzeb. Php czy java script ? Ponieważ php działa po stronie serwera, co daje pewność, że nie dojdzie do sytuacji w której klient nie zobaczy galerii bo nie ma odpowiedniego/aktualnego oprogramowania, wybrałbym ten język. Niestety w różnych kursach nie znalazłem informacji na temat obsługi zdarzeń typu kliknięcie myszą - co jest mi niezbędne :/.

 

Pytanie do Was: Czy php umożliwia obsługę zdarzeń, jeżeli tak to, który Wy byście język wybrali i dla czego + dla chętnych, inne pomysły zorganizowania galerii :)

Share this post


Link to post
Share on other sites

Witaj,

Z tego co wcześniej przeczytałem, masz galerię osadzoną na tabeli? Jeśli nie zmieniłeś tego jeszcze, to wrócił bym jednak do kodu i naniósł poprawki. Otóż zaproponowałbym Ci przeniesienie "galerii" na listę. Zrobiłbym to tak:

  • Nazwa Projektu

    data

    sciezka_do_obrazka.jpg

    .

    .

    .

 

Używanie tabel do pozycjonowania elementów na stronie to "błędy" poprzedniej epoki. Dziś robimy to za pomocą css. Wystarczy wtedy zrobić tak

 

ul > li {

display: inline-block; /*dzieki temu elementy listy beda ukladac sie obok siebie*/

width: 200px; /*Zalezy jaki chcesz rozmiar*/

height: 200px;

}

 

Musisz tez dostosować elementy znajdujące się w znacznikach

  • aby nie były większe niż zdefiniowany przez Ciebie rozmiar lub nadać znacznikowi atrybut overflow: hidden.

     

    To jest pierwsza część. I mogło by tak zostać gdybyś nie chciał tego sortować. Jednak zdecydowałeś się na sortowanie tego wg. daty, w związku z czym nie obejdzie się bez języka skryptowego. Metod na zrobienie tego znajdzie się kilka, ale ja mógłbym zaproponować Ci następujące rozwiązanie. Otóż pokusiłbym się o stworzenie pliku xml z wszystkimi Twoimi pracami. Zamieszczał byś tam np. link do obrazka, datę projektu itp. Dzięki temu plikowi nie potrzebował byś za każdym razem w ingerencję kodu html. Przyśpieszyło by też proces aktualizowania Twojego portfolio. Mając taki plik mógłbyś w php stworzyć prosty parser (przykładowy kod do przekopiowania podpowie Ci wujek Google.) i w sposób dynamiczny renderować rezultat. Należało by też dopisać jakąś funkcję sortującą. Ze względu, iż parser czyta plik xml od deski do deski, musiałbyś w jakiejś zmiennej magazynować rezultat, po czym go sortować. Trochę zabawy jest, ale czego się nie robi żeby później mieć spokój. Możesz również pominąć funkcję sortującą i ręcznie sortować wpisy w pliku. Ale wtedy mógłbyś ominąć zabawę w plik xml. Posortowane dane potem po prostu "renderujesz" do kodu html. Css'em pozycjonujesz i robisz to ślicznym.

     

    Mam nadzieję że to co napisałem będzie pomocne, i dałeś to ogarnąć. To samo można by zrobić javascriptem, ale zawsze istnieje ryzyko że użytkownik będzie miał ją wyłączoną. Ale jest to znikomy procent.

     

    Pozdrawiam :)

     


    Moja Strona

    Mój Blog

  • Edited by Inky

    Share this post


    Link to post
    Share on other sites

    Dzięki za podpowiedź. W xml'a się jeszcze nie bawiłem, ale dzisiaj na szybko zapoznałem się z kursem online :) Po tym kursie za bardzo nie wiem jak połączyć xmla z html'em ? Pewnie do tego miałby mi posłużyć ten parser php (czytać z pliku xml i odpowiednio konwertować do html) ale właśnie dzisiaj odkryłem że serwer interii na którym mam stronę, nie obsługuje php :/

    ...więc chyba jednak zostaje mi zapoznać się bliżej z javascriptem

     

     

    PS. Dla czego teraz tworzy się galerię na listach ? Są jakieś sensowne powody? Wydaje mi się, że tabela jest idealnie i naturalnie się do tego nadającą strukturą.

    Share this post


    Link to post
    Share on other sites

    php działa po stronie serwera nie obsługuje zdarzen. Tak na przyszłość. Mozna to zrobic na dwa sposoby:

    -klasycznie - przekazanie zmiennych w get, czyli po klinieciu odswierzasz strone z podaniem parametrow np. ?obrazek=starebaby.jpg i php odczytuje zmienną obrazek.

    -nowoczesnie - za pomocą jquery. duzo wiecej roboty, bo trzeba znać składnie jquery i obsluzyc jak najwiecej zdarzen (errory itp) oraz wyswietlać loadery, by user wiedział co sie dzieje.

     

    Przykłady prostych parserów js masz w sieci ale parsowanie xmla jsem troche zajmie. Jak nie masz obslugi php to nie bedzie też bazy wiec faktycznie wszystko musialbys trzymać w plikach. json czy xml parser będzie na pewno jako klasa dostępny gdzieś.

     

    Listy są naturalniejsze dla wyszukiwarek. Lepiej indeksują treść.

    Share this post


    Link to post
    Share on other sites

    Tabele są przeznaczone głównie do treści sticte tabelarycznych. Standardy W3C tak nakazują. Oczywiście można robić po swojemu, ale po co iść pod prąd?

     

    Pozdrawiam

    Share this post


    Link to post
    Share on other sites

    Ok, dzięki za wyjaśnienia, ostatnie szlify i wrzucam stronę. Js-em zajmę się jak będę miał chwile, narazie nadciąga sesja :P

     

    Jeszcze tylko jedno pytanie: Jeżeli chce mieć na swojej stronie linki do innych stron typu: max3d czy digart itp. i chciałbym umieścić u siebie logotyopy tych stron to muszę mieć jakieś pozwolenie ? Ktoś się orientuje jak to prawnie wygląda ?

    Share this post


    Link to post
    Share on other sites

    Create an account or sign in to comment

    You need to be a member in order to leave a comment

    Create an account

    Sign up for a new account in our community. It's easy!

    Register a new account

    Sign in

    Already have an account? Sign in here.

    Sign In Now

    ×
    ×
    • Create New...

    Important Information

    We are using cookies. Read about our Privacy Policy