Jump to content
QbisieQ

Problemy z CSS-em i HTML-em

Recommended Posts

Przecinek oznacza, że wybieram dwie rzeczy za jednym zamachem. Przykładowo:

body, html, p, div {
   jakiś: kod
}

"obsłuży" 4 elementy za jednym zamachem.

Share this post


Link to post
Share on other sites

No właśnie widziałem, że jest coś takiego w 17 linii ale nie wiedziałem o co chodzi przez ten przecinek :P Teraz już wszystko działa, dzięki :)

Share this post


Link to post
Share on other sites

..jeżeli w kodzie dla głupiego położenia gradientu trzeba pisać tyle zastrzeżeń ile istnieje przeglądarek... to gdzie tu optymalizacja...:))).

przepraszam ale tu ostatnio jest tak nudno że muszę trochę się pośmiać..... dla mnie strona to projekt i jego realizacja... narzędzie nie ma znaczenia... ma działać na odbiorcę...!!!

Share this post


Link to post
Share on other sites

dziadek3D - Co do tych paru linijek dla gradientu i optymalizacji, to znacznie szybciej komputer przetworzy 1 plik, w którym będzie nawet 10 000 linijek tekstu niż parę plików po 1 linijce w każdym, bądź nawet bez tekstu, bo same operacje otworzenia i zamknięcia pliku, trochę trwają. Proponuję Ci zrobić prosty test, stwórz zwykły plik .txt i napisz w nim tyle tekstu, żeby ważył z 600 kb, po czym stwórz z 80 plików z jedną linijką tekstu, następnie przekopiuj najpierw plik ważący 600kb na pendriva (koniecznie, bo jak przekopiujesz w obrębie swojego dysku to nie zauważysz) a potem przekopiuj te 80 plików ważących pewnie po 1kb. Te 80 plików będzie się kopiować znacznie dłużej niż ten jeden, ważący parę razy więcej od nich.

 

Pewnie, że w przypadku tworzenia takiej strony jak portfolio, pewnie nikt by nie zauważył różnicy w działaniu przed i po optymalizacji, ale jeżeli mimo to się o nią postaram to przynajmniej się czegoś nauczę i w przyszłości może się to przydać.

 

Dzięki poruszeniu tego tematu (optymalizacji) dowiedziałem się np. o wcześniej wspomnianych sprite'ach .... i tak apropo's to właśnie nie wiem czy może jednak będzie widoczna różnica przed i po optymalizacji tego typu, że "przed" w galerii miniaturki będą wczytywane, każda z innego pliku graficznego, a "po" będą wczytywane z jednego czy dwóch przy pomocy sprite'ów (jak już się teg nauczę) i zauważ, że teraz będzie już chodzić nie o tekst ale o grafikę, która jak sam wspomniałeś już nieco może obciążać sprzęt.

Share this post


Link to post
Share on other sites

no bo na to trzeba trochę inaczej spojrzeć... w zasadzie to jesteśmy świadkami narodzin nowej technologii... albo raczej pierwszych kroków rozwoju technologii już dość długo letniej... :) HTML spał sobie snem zimowym... więc teraz mu trochę ciężko wygramolić się z jaskini ... ;)

Share this post


Link to post
Share on other sites
jeżeli w kodzie dla głupiego położenia gradientu trzeba pisać tyle zastrzeżeń ile istnieje przeglądarek... to gdzie tu optymalizacja

 

Na ten czas wiele właściwości (np. animacje w CSS) musi posiadać prefiksy. Będą to:

 

  • -moz- dla Firefoxa (silnik Mozilla)),
  • -webkit- dla Safari, Chrome, sporo przeglądarek i niektórych aplikacji hula na silniku Webkit,
  • -ms- dla nowych przeglądarek Microsoftu (silnik Trident),
  • -o- Opera (silnik Presto).

 

Zawsze na końcu powinno się dodawać "normalną" właściwość, bez prefiksu. Te przedrostki to rzecz tymczasowa, zawsze znikają po pewnym czasie. Tak. To jest uciążliwe - zgadzam się. Gdzie tu są korzyści? Można używać nowych rzeczy (jak np. gradienty) z wyprzedzeniem, promować i testować nowe technologie. Poza tym (odnośnie gradientu generowanego przez CSS) posiada on unikalną właściwość dostosowywania swoich rozmiarów do elementu, który go używa. Te gradienty to znacznie ciekawsza rzecz niż mogłoby się wydawać: http://attasi.com/labs/picsselz/ Ta animacja jest oparta na gradientach. Nie ma tam żadnej bitmapy, a, powtarzam, jedynie gradienty. Należy to traktować bardziej jako eksperyment. Poziom komplikacji pinezkowany przez dziadka3d osiąga tam zenit. :)

 

dla mnie strona to projekt i jego realizacja... narzędzie nie ma znaczenia... ma działać na odbiorcę

 

Zgadzam się po części. Dla mnie strona to przede wszystkim treść. Z reguły odwiedzamy strony by czegoś się dowiedzieć, nauczyć. Zły projekt, zdarza się nie rzadko, potrafi to skutecznie utrudnić. Zły kod również. Chociaż fakt - tylko ten naprawdę zły, wiele potknięć przechodzi niezauważone (zwłaszcza w HTMLu). Być może to jeden z atutów? Zgadzam się, że narzędzie nie ma znaczenia (byle działało oczywiście). Inna sprawa to jak to narzędzie jest użyte! Najważniejszy jest tutaj, jak sądzę, balans. Dobrze jeśli ciekawa treść otoczona jest przemyślanym interfejsem, typografią na wysokim poziome, ciekawą grafiką oraz dobrej jakości kodem. To jest to.

Share this post


Link to post
Share on other sites
dla mnie strona to projekt i jego realizacja... narzędzie nie ma znaczenia... ma działać na odbiorcę

Jak robisz dla siebie to tak. Jak dla klienta i wytrzymać choćby zwykła tygodniową kampanię za 20-50tys pln to nie ma mowy o takiej nonszalancji.

Share this post


Link to post
Share on other sites

no i proszę jak się zrobiło miło przyjemnie i twórczo....:))

 

przy średnim internecie 4mb wszystko wpada bez zauważenia procesu... nawet filmy się buforują w czasie rzeczywistym....jest oczywiście jeden idiotyzm, który z tym udanie walczy... czyli stront flashowe... po długim ładowaniu.... dostajesz porcję fikołków przesłaniających treść...:))).

Były tu kiedyś bitwy na projekty... bo to jak by nie było dział WebArt.... pokazywały jednoznacznie jaka to trudna sztuka ogarnięcie tematu graficznie.... a co by się działo przy kodowaniu, to aż strach pomyśleć.... szkoda, że już Bitew nie ma.... albowiem tylko przez działanie można się czegoś nauczyć.... w gadaniu to każdy ma tyle samo racji co jej nie ma...:)))

Share this post


Link to post
Share on other sites

no tak, ale niektorzy bitwy htmlowe maja kilka razy w tygodniu i wiedzą o czym mówią. Ogolnie rozmowa osoby ktora nie puszczala na sajcie kampanii z taka, ktora puszczala to jak dyskusja o wchodzeniu w zakret zawodowego kierowcy z operatorem wózka golfowego.

Share this post


Link to post
Share on other sites

Pani Olu.... to znowu jest tylko gadanie... pokarz mi to co robisz... a ja Ci zacznę wierzyć oceniając TO.... to po pierwsze...:))

....a po drugie kierowców wyścigowych jest niewielu bo takie są wymagania rynku... operatorów wózków golfowych u nas prawie wcale nie ma ... natomiast jest masa operatorów wózków widłowych... i oni w swoim miejscu pracy są tak samo potrzebni jak kierowcy.... każdy zawodowiec jest potrzebny... jak Ci w supermarkecie nie dowiozą wózkiem z magazynu to będziesz musiał sam sobie zrobić piwo i kiełbasę.... a jak nie będzie wyścigów F1.... to nawet tego nie zauważysz....:)))

Share this post


Link to post
Share on other sites

ja nie mowie ze nie są potrzebni, podałem przykład techniki wchodzenia w zakręt jako obrazowego przykładu, podobnego do tej dyskusji. Nie mam nic przeciwko nieoptymalizowanym stronom, nie kazda wymaga takich zabiegów, szczegolnie ze one dodatkowo kosztują niemniej nonszalanckie zabieranie głosu brzmi w tym wypadku jak własnie opinia o rajdach kierowcy melexa.

Nie chodzi o to,zebyś wierzył, tylko by ktos, kogo interesuje lepsze tworzenie stron zwrócił uwagę na pewne aspekty działania serwisów.

Share this post


Link to post
Share on other sites

odpowiadasz wymijająco... ale to Twój problem... na wszystkich portalach jest masa wszystko wiedzących, za którymi nie stoją ich realizacje... bo nie chcą ich ujawniać z tych czy innych powodów... taka uroda tego miejsca... dla mnie wiarygodny jest mistrz stojący koło swojego dzieła... a nie opowiadający o nim w ciemnym pokoju... takie moje zboczenie....:)))

Share this post


Link to post
Share on other sites

bo ja nie jestem artysta tylko rzemieślnikiem. Robie serwisy, ktora pojawiaja sie pod adresami typu wygrajpralke.pl są obecne miesiąc, musza wytrzymac kilkadzies. tys wejsc na godzine, mieć zainstalowane systemy raportujące oszustwa, czasami analize bechawioaralną. Klienci nawet nie wiedzą, ze moja firma wykonała stronę ja tez się tym nie chwalę bo mi d niczego to nie jest potrzebne - wole pracować z agencjami lub wydawcami gier (gdy robie gry). Przy kazdej niemal akcji mam inny serwer klienta, inny ekosystem programistyczny i czesto rozne api do ktoreg mam się podłączyć oraz zwykle godzine by dokladnie przeczytac dokumentacje i wyslać uwagi lub zastrzeżenia.

Pracuje na wyscigi i nie podpisje sie pod tym co robie, bo nie wydaje mi się to właściwe - nie chciałbym by mi sie sprzątaczka podpisywała na kafelkach jak robi sprzątanie domu.

Szczerze powiedziawszy mało kiedy mam okazje dowiedziec sie kiedy serwis zaczyna i konczy swoj zywot, bo mam inne realizacje.

Share this post


Link to post
Share on other sites

rozumiem... tutaj znalazłeś miejsce żeby w końcu być kimś... strasząc ile to guziczków jest w bolidzie.... ale sam nim nigdy nie jechałeś... prawdopodobnie robią to inni........ majster rzemieślnik widocznie też chce być celebrytą... i nie ważne gdzie....:)))

Share this post


Link to post
Share on other sites

faktycznie przejżałes mnie. Jeżeli podalismy argumenty dla ktorych warto się czyms zainteresować i ew. wziąć pod uwagę, to mozesz tez podac argumenty przeciwne.

Wyraznie waidać, że nasze oba ego nie mieszczą się w jednym zaledwie czterostronicowym wątku ale warto pamiętać, ze to nie nasz temat tylko autora.

Share this post


Link to post
Share on other sites

dziadku3D nie wiem po co te złośliwości, ola-f (i raczej Olaf niż pani Ola sądząc po podpisie) jako osoba dużo bardziej obeznana z tematem "webmasteringu" od mnie i z tego co pisze wydaje mi się, że również od Ciebie, próbuje pomóc rozwiązać moje problemy w tym temacie i nie wiem po co się czepiać słówek i zaśmiecać mój watek przytykami? Oczywistym jest, że na wirtualnym forum pozostaje nam jedynie wierzyć w kompetencje innych userów, bo jakby każdy miał przed swoją wypowiedzią przesyłać CV wraz ze zdjęciem siebie obok swoich dokonań to byśmy tu mieli niezły bajzel. Więc stwierdzenie:

dla mnie wiarygodny jest mistrz stojący koło swojego dzieła

na internetowym forum jest nieco dziwne.

Szczególnie, że punkty reputacji ola-f'a czynią go dosyć wiarygodnym użytkownikiem.

Share this post


Link to post
Share on other sites

ok... już nie zaśmiecam śmietnika....:)))

dla mnie webmaster bez strony.... to...........:))

a ja tu wszystkich dobrze znam... więc wiem co piszę...

dobranoc

Share this post


Link to post
Share on other sites

A ja mam stronę. :] Ale co z tego? Ola-f i tak bardziej zaprawiony w bojach ode mnie! :) Poza tym - taki już los freelancerów, że nie mają czasu zająć się swoją stroną. Są ważniejsze rzeczy. :P

Share this post


Link to post
Share on other sites

Zrodził się kolejny kłopot :) ... mianowicie, zrobiłem 3 obrazki, które mają być przyciskami, tj, po najechaniu na nie myszką powinny się jakoś zaznaczyć. problem w tym, że nie wiem jak za pomoca czystego css'a (jakiegoś atrybutu, dodać obrazek)

 

Mam w html-u taki kod:

 

O_mnie.png

Galeria_2D.png

Galeria_3D.png

 

W arkuszu css powinno się pojawić chyba coś takiego:

 

#button_O_mnie:hover

{

tutaj jakas komenda umożliwiająca mi podmianę obrazka

}

 

Szukając w necie natrafiłem na taki sposób, że w hover podmienia się po prostu tło w divie, ale ja nie chcę podmieniać tła bo wydaje mi się, że wtedy samo najechanie na blok div spowoduje podmianę obrazka, a nie po najechaniu na sam obrazek :/

Share this post


Link to post
Share on other sites

po pierwsze, żeby wszystko dobrze działało, musisz obrazki zamknąć w , bo inaczej ich nie podlinkujesz (chyba, że z javascripta, ale to nie ma sensu, bo z tego co wiem to google nie indeksuje).

 

po drugie nie da się z css'a podmienić obrazka, bo musiałby bezpośrednio ingerować w kod html, a CSS tego nie robi (więc znów możesz zastosować javascript)

 

jednak jeśli chcesz to zrobić koniecznie przy użyciu CSS'a, to robisz to tylko, podmieniając tło w ten sposób:

O mnie

// i odpowiednio w css

a#oMnie { display:block; width:30px; height:20px; background-image: url("../images/obrazek_normalny.jpg"); }
a#oMnie:hover { display:block; width:30px; height:20px;  background-image: url("../images/obrazek_po_najechaniu.jpg"); }

 

chociaż domyślam się, że kombinujesz trochę pod górkę, bo pewnie na wszystkich buttonach masz takie samo tło... tylko różnią się napisami... więc nie baw się w zamykanie w odpowiednie id, tylko daj wszystkim buttonom takie samo tło, a zmieniaj tylko napisy czcionką w html'u :)

Share this post


Link to post
Share on other sites

torm- dzieki, pamiętam o , tylko nie wstawiałem bo narazie nie mam do czego... no właśnie u mnie buttony to stylizowane napisy, ale właściwie są to obrazki png o różnych kształtach, więc prosta zmiana napisu nie wchodzi w grę, tylko podmiana grafiki... niestety chciałbym, żeby po najechaniu kursorem na przycisk, on nie tylko się jakoś podświetlał, ale również chciałbym co nieco domalować koło niego - czyli zmienić jego wielkość i nie wiem czy będę wstanie to zrobić za pomocą podmiany tła w , ale to sprawdzę niedługo.

 

Mam jeszcze prośbę: jeżeli ktoś zna jakieś strony oferujące za darmo hosting www, to byłbym wdzięczny za linki, szukałem trochę ale albo się okazywało, że za darmo to jest ale przez parę pierwszych miesięcy, albo były jakieś dziwne ograniczenia co do rozszerzeń plików, lub wyłączności wrzucanych elementów :/

Share this post


Link to post
Share on other sites

Rozwiązałem część problemów ale oczywiście pojawiły się kolejne, mianowicie:

 

1.Ustawiłem, że po najechaniu kursorem na przycisk włącza się .gif - krótka animacja "podświetlania" przycisku. Problem w tym że np. w Safari gif ładuje się tylko raz, a później jest wyświetlana już tylko ostatnia klatka animacji. W Firefoxie- różnie, raz się wyświetla cała animacja, raz tylko ostatnia klatka, a czasem tylko pierwsza - totalny random. Domyślam się, że jest to związane z cache'owaniem, ale nie wiem jak ustalić żeby tylko niektóre elementy nie były cache'owane... chyba, że to o w ogóle o coś innego chodzi.

Kod dla jednego przycisku:

#button_O_mnie

{

display:block;

width:130px;

height:41px;

background-image:url(O_mnie.png);

}

#button_O_mnie:hover

{

display:block;

width:241px;

height:74px;

position:relative;

bottom:14px;

right:55px;

background-image:url(O_mnie_highlight_anim.gif);

}

#button_O_mnie:active

{

display:block;

width:263px;

height:114px;

position:relative;

bottom:19px;

right:56px;

background-image:url(O_mnie_active.png);

}

 

2.Aktywacja przycisku implikuje wyświetlenie obrazka .png, kiedy jednak nie zwolni się przycisku myszy, a zamiast tego spróbuje przeciągnąć obrazek i puścić, wówczas button nie wraca do swojego pierwotnego obrazka ale cały czas jest wyświetlany ten po aktywowaniu (w Firefoxie i IE). Wraca dopiero po kliknięciu.

Screeny dla ilustracji problemu:

 

hoverjpg_reprehq.jpg

 

grabjpg_reprerh.jpg

 

releasejp_reprern.jpg

 

 

3.Po zmniejszeniu okna przeglądarki i przesunięciu suwakiem w prawo, zielona belka zostaje ucięta :( Nie wiem jak to naprawić.

screeny:

 

beforescr_repreea.jpg

 

after-scr_repreep.jpg

 

 

4. W IE po zmniejszeniu okna przeglądarki w ogólnie nie ma dolnego suwaka, więc nie da się przewijać strony w poziomie. Da się jakoś wymusić istnienie suwaka?

Share this post


Link to post
Share on other sites

u mnie we wszystkich przeglądarkach jest ok... (Opera, FF, IE) i tak też być powinno - w kodzie wszystko się zgadza...

... poza tym portfolio prezentuje się ... hmmm... jakby Ci to powiedzieć, żeby Cię nie urazić... ;)

 

kilka uwag technicznych na temat grafiki (w końcu na forum graficzne wrzuciłeś projekt,... więc masz pecha, a może i szczęście ;)

 

1. brak spójności kompozycji... logo ucieka Ci do lewej... a cała strona jest wyśrodkowana...

2. jak już zdecydowałeś się na ramkę, której nie da się powtarzać, to wstaw treść do środka razem z suwakiem...

3. menu jest bardzo duże, a do tego ma oczojebny kolor, przez co sprawia wrażenie jedynego istotnego elementu na stronie, reszta gdzieś ginie...

4. style w menu też dałeś jakieś takie chyba trochę na chybił trafił (z jednej strony ostre paski, z drugiej obłe obrysy liter)... kontrast pomiędzy paskami a menu jest zbyt duży - zmniejsza to czytelność... poza tym menu jest z zupełnie innej beczki... i cała reszta również... nie pasuje to do siebie ani troszkę... razi po oczach... oczy mnie dzisiaj bolą... głowa też mnie boli... ;) mam humory jak baba w czasie menopauzy... ale ocena nie jest przez to przesadzona... :)

 

chociaż sorry, jeżeli byłem zbyt brutalny przy rozdziewiczaniu, ale wyszedłem z wprawy ;)

 

najlepiej będzie jak wyrzucisz to do kosza i zaczniesz jeszcze raz... później pewnie znowu będziesz musiał wyrzucić... i znowu zacząć... z każdym następnym projektem będziesz mniej wyrzucał...

Share this post


Link to post
Share on other sites

torm - dzięki za krytykę, chociaż nie do końca wiem o co Ci chodziło w punkcie 2. ?

Ogólnie co do kompozycji to wydaje mi się, że kontrasty wszelkiego rodzaju właśnie całkiem nieźle się ze sobą komponują, np. ta oczojebna zielona belka z czernią i szarościami, okrągłe z kanciastymi itd. wydaje mi się, że dzięki temu całość nie jest nudna i nie mdli od powtarzalności...tak samo, jeżeli wszystko byłoby wyśrodkowane, byłoby moim zdaniem nudne - asymetria to całkiem naturalna rzecz. Zanim jednak skończę stronę, na pewno przemyślę i pozmieniam wygląd jeszcze parę razy.

 

Tak czy inaczej, dzięki za podanie swojego punktu widzenia. Niezależnie jednak od tego czy i w jakim stopniu będę zmieniał szatę graficzną na tej stronie lub projektował ją do innego serwisu, będę borykał się z problemami które wypisałem w poprzednim poście i będę wdzięczny za pomoc w tej sprawie :)

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