Problemy z CSS-em i HTML-em

[QbisieQ]

Mam następujący problem: Chciałem by tłem mojej strony był gradient, więc utworzyłem obrazek chciałem go rozciągnąć na cały ekran (w obu osiach) jako tło. Niestety nigdzie nie wyczytałem o takiej możliwość w background-image. Wiec wstawiłem obrazek za pomoca i ustawiłem mu z-index:1 następnie po dodaniu kolejnego małego obrazka pojawił się problem ponieważ jest przysłonięty przez tło mimo że ma z-index:2. Domyślam się, że to przez domyśle pozycjonowanie statyczne. Zmiana pozycjonowania na relatywne czy absolutne, rozwiązuje problem i już z-indexy działają poprawnie ale niestety kiedy przesuwam brzeg przeglądarki - obrazek też się przesuwa :/ ... przy większej ilości obrazki zaczynają na siebie najeżdżać i się nakładać.

 

Pytanie brzmi: jak ustawić pozycjonowanie małego obrazka tak, żeby był nad tłem, ale żeby nie "jeździł" kiedy tylko ktoś zmienia rozmiar okna, lub jak zmienić rozmiar obrazka z tła ?

 

Tutaj kawałek kodu:

 

 

Edytowane 4 Kwiecień 2012 przez QbisieQ

[piotrek]

Parametr z-index działa tylko z obiektami mającymi własność position. Możesz spróbować dać jeszcze fixed. Nie wiem, czy o to chodzi, bo nie bardzo rozumiem.

 

Natomiast odnośnie samego tła, proponuję przejrzeć co następuje: http://www.w3schools.com/cssref/css3_pr_background-size.asp.

[olaf]

pozamykaj w divach by miało to sens i wtedy się poukłada samo.

[QbisieQ]

Dodałem własnośc position (na static) i nic to nie zmieniło, spróbowałem również ustawić rozmiar tła zgodnie z tym co było w linku tj:

 

 

i oczywiście pojawił się problem: procenty jakoś nie działają :/ jeżeli ustawiam w pixelach to jest ok, ale dosyć fajnie by było gdyby tło dopasowywało się do rozdzielczości ekranu/wielkości okna.

 

Zamknięcie w divy również nie pomaga, zresztą nie wiem za bardzo jak miałoby pomóc.

[torm]

a możesz cały kod pokazać? (razem z obrazkiem)

[QbisieQ]

Jasne, oczywiście po różnych próbach poradzenia sobie z w.w. problemem kod wygląda nieco inaczej niż na poczatku, tj. wcześniej wszystko było na odpowiedniej warstwie ale obrazki przesuwały się razem z krawędziami przeglądarki. Teraz wygląda to tak:

 

HTML:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

[olaf]

nie wierzę, że jeżeli masz

Treść

 

to nie działa. Procenty to shit i w kazdej przegladarce działa inaczej, ale z JS sobie wyczytasz wymiar okna więc możesz to kontrolować JS'em poprzez wymiane stylu lub innerHTML.

[QbisieQ]

ola-f, jeżeli zrobie tak jak piszesz, czyli:

 

 

to owszem, obrazek jest nad tłem, ale co z tego skoro tło zajmuje jakieś 5% ekranu ? Oczywiście mogę bawić się w pozycjonowanie i rozciąganie diva itd. Ale wtedy:

- tło będzie się powtarzać, a ja chcę żeby było rozciągnięte

- wszystkie elementy będę się przesuwać relatywnie do krawędzi okna przeglądarki

 

Sorry, dopiero się uczę jak robić strony i może po prostu Cię nie zrozumiałem, ale jeżeli znasz rozwiązanie moich problemów to będę wdzięczny za jego przedstawienie. Nie wiem co to jest JS ani innerHTML :/

[olaf]

kurcze boisz się tych div'ow, ze wstawiasz bezpośrednio? Ale nic. Powiem Ci, że poki nie widze przykładu to nie pomogę, bo moge się pomylić, bo html'a uzywam tylko jak musze, ale osobiście bym uzył innerHTML z javascript i nadpisywał wielkość/szerkość obrazka jeżeli nie w stylu, bo chyba tak sie nie da, to jako img w divie - bo to nie musi być przecież tło stylu ten obrazek podspodem. A javascript ma funkcje odczytywania wielkości okna i można do załatwić małą funkcją.

[torm]

dokładnie... pokaż całość z obrazkiem, bo może jest na to zupełnie inny sposób

[QbisieQ]

Chodzi mi konkretnie o uzyskanie takiego czegoś (napis i tło to obrazki -png):

 

 

 

Zrobiłem to za pomocą takiego kodu:

 

 

Niestety, teraz przy zmianie rozmiarów okna - obrazek "Piotr Kubiś portfolio" jeździ razem z krawędzią, tj. jego odległość od górnej i lewej krawędzi jest stała.

Chodzi mi o to żeby uzyskać taki sam wygląd ale, żeby elementy nie były zależne od krawędzi przeglądarki.

 

ola-f - jak już napisałem jestem raczej początkujący jeżeli chodzi o webmastering i za bardzo nie wiem jak wstawić obrazek inaczej niż tak jak to napisałem. Jeżeli chodzi o jave to jeszcze się nie bawiłem w łączenie tego z html-em. Narazie tylko HTML + CSS + powoli uczę się PHP

[kots]

Cześć QbisieQ!

 

Prawdopodobnie chodzi Ci o coś takiego: http://animacjejs.pl/gradient_test/

 

Kod: http://pastebin.com/kU1f4Yv7

 

Polecam przeniesienie stylów do oddzielnego pliku.

 

Powodzenia!

[kots]

Acha - jeszcze link do generatora gradientów: http://www.colorzilla.com/gradient-editor/

[olaf]

o skoro masz już odpowiedz to git. Ja tylko powiem, że nie powinines trzymać elementów tak sobie np. obrazek przy obrazku. Im wiksze rzeczy bedziesz robił tym wiekszy problem z kontrolą.

 

oczywiscie moze mieć ktos inne zdanie ale napisze, to sobie porównasz:

 

 

jak juz masz pozycjonowac absolutnie, co uwazam, za zajebistą i wygodną rzecz, to nie obiekty w divie a same divy. Zawsze bedziesz mial prostą strukturę podobną do xml'a czy json'a co ułatwi CI też pracę z java scriptem szczególnie przy identyfikowaniu elementów w dokumencie.

Co do php'a to trzeba wiedzieć tylko, ze wszędzie musza byc średniki. Java script jest znacznie prostszy - nie musisz pamiętac o średnikach ;)

Zasdnicza zaleta jsa jest taka, ze mozesz mieć do tego klasę i zamknąc się z kodem w jednej linijce. bez klasy w sumie też w jednej.

[kots]

"Java script jest znacznie prostszy - nie musisz pamiętac o średnikach" - lepiej pamiętać. Eksplorery nie wybaczają. ;)

[kots]

A poza tym @ola-f generalnie dobrze prawi. :)

[QbisieQ]

Wielkie dzięki chłopaki :) Wreszcie coś zaczyna działać tak jak tego chcę.

 

Nasunęło mi się jeszcze jedno pytanie dotyczące optymalizacji serwisu: zapis i odczyt plikowy to jedne z najbardziej kosztownych dla procesora i ramu operacji, więc czy dobrze myślę, ze powinno się w miare możliwości jak najmniej zapisywać w zewnętrznych arkuszach css i starać się o ile nie utrudni to znacznie pracy pisać bezpośrednio w pliku html ?

[kots]

W miarę możliwości zapisuj wszystko w jednym, skompresowanym, zewnętrznym CSSie.

 

Teoretycznie osadzanie stylów w "head" strony jest bardziej wydajne, pomyśl jednak co się stanie kiedy będziesz miał np. 5 stron. Każda z nich będzie miała skopiowane te same style x5. Chcąc zmienić style dla np. list numerowanych musiałbyś zmieniać kod dla każdej ze stron oddzielnie (x5). :) W przypadku kiedy każda ze stron korzysta z tego samego arkuszu wszystko nabiera sensu: zmieniasz styl dla "p" czy tam "img" i działa to globalnie (każda "podpięta" strona zmienia wygląd). Niesamowita wygoda, czyż nie? :) To był pierwszy benefit.

 

Po drugie przeglądarki "keszują" CSS, skrypty i obrazki, dzięki czemu nie ładują się one od nowa, a z pamięci podręcznej tym samym odciążając serwer. To dlatego czasami musisz "wyczyścić kesz" by zobaczyć zmiany, których dokonałeś.

 

To samo dotyczy obrazków. Jeśli chcesz oszczędzać, staraj się grupować obrazki w sprite'y. Tak jak w grach 2d: http://goo.gl/laAB3 A tutaj sprite onetu: http://goo.gl/sbrDp Nie należy tutaj przesadzać bo można się zamęczyć. ;) Warto jedna pogrupwać wszystkie ikony i małe rzeczy w sprite: zamiast ściągać ich np. 20, strona wykona tylko jedno zapytanie do serwera tym samym znacznie przyśpieszając ładowanie się strony.

[olaf]

Nom sprite'y bardzo przyspieszają działanie serwisu, szczególnie przy dużej "odświeżalności".

 

jezeli zależy Ci i wiesz, ze serwer da radę, to możesz użyc php do wczytania css'a jako zmiennej i nadpisania head'a stylami przy użyciu echo w odpowiednim miejscu. Minus jest taki, ze serwer musi przetworzyć zapytanie i wygenerować stronę. Jak robie strony, ktore nie moga sie cacheowac (coraz czesciej klientom na tym zależy) to całego htmla wypluwam sobie z plikow składowych, nadpisując phpem odpowiednie fragmenty. Wtedy zawsze mam gwarancję, ze dokument u usera jest aktualny.

Edytowane 4 Kwiecień 2012 przez olaf

[QbisieQ]

Nie no wiadomo, że przy większej liczbie obiektów korzystających z tych samych bądź podobnych parametrów, należy je opakować jakąś klasą w arkuszu css. Wszystko z głową, niemniej jednak w miarę możliwości nalezałoby wszystko ładnie kompresować i upakować w jak najmniejszej liczbie plików.

O, fajna rzecz te sprite'y , pierwszy raz o tym słyszę.

 

Ponieważ, mam kolejne pytanie i trochę już odbiegamy od początkowego tematu, więc zmieniłem tytuł wątku.

Jak się nie było trudno domyśleć, póki co staram się napisać coś na kształt portfolio, czyli wcześniej czy później będzie musiała powstać jakaś galeria. Moim pierwszym pomysłem jest zaimplementowanie jej za pomocą tabelki o komórkach równej wielkości, z obrazkiem w każdej. Dobry pomysł, czy raczej robi się to inaczej ?

 

PS. Jednak za wcześnie się ucieszyłem. Co prawda, z odpowiednim pozycjonowaniem nie mam już kłopotu, ale niestety tło nadal nie wyglada tak jak oczekiwałem :/

Skożystałem z generatora od kots'a i niby powstaje gradient ale nie wiem czemu, powtarza się w pionie.

 

Kod z arkusza css:

 

 

#body

{

min-height:100%;

background: #000000; /* Old browsers */

background: -moz-linear-gradient(top, #000000 0%, #4f4f4f 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#4f4f4f)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #000000 0%,#4f4f4f 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #000000 0%,#4f4f4f 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, #000000 0%,#4f4f4f 100%); /* IE10+ */

background: linear-gradient(top, #000000 0%,#4f4f4f 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#4f4f4f',GradientType=0 ); /* IE6-9 */

}

 

Czegoś brakuje ?

 

edit: aha, zauważyłem, że gradient konczy sie wraz z końcem tresci na stronie i o taką wysokość się powtarza. Czy aby się tego pozbyć należy zastosować jakieś pozycjonowanie

czy np. umieścić niewidzialnego diva rozciągniętego na 100% wysokości, żeby była jakaś treść ? Edytowane 4 Kwiecień 2012 przez QbisieQ

[dziadek3D]

... najlepiej w analogowym Html-u ... bez gimnastyki i robienia dymu...:))

a gadanie o optymalizacji pod serwer to jakieś średniowieczne bajki...

tekst nigdy nie obciążał niczego... tylko obrazki ważą...:)))

[kots]

@QbisieQ html, body {min-height: 100%} powinno załatwić sprawę. ;)

 

@dziadek3D "najlepiej w analogowym Html-u " - Tak. Zdecydowanie tak. Nie ma to jak ręcznie rzeźbiony kod. :P

[olaf]

tekst nigdy nie obciążał niczego...

jeżeli trafisz na firmę, ktora ma serwer np. w home.pl szybko zobaczysz jaki problem jest choćby z CPU w klastrze do jakiego podpięta jest strona. Nie mowie o stu odwiedzinach dziennie ale jak serwis musi przeżyć kilka milionów zapytań na godzinę i wszystko ma być zabezpieczone (np. przy serwisie aukcyjnym) to masz problem, czy generować całość na serwerze i przesyłać plik php, czy wykonać operacje na komputerze użytkownika.

z drugiej strony jak robi się coraz wiecej rzeczy to klasa go generowania obiektów na stronę kusi kilkukrotnie mniejszym czasem realizacji zlecenia.

[dziadek3D]

ale koleś robi stronę z góra 5 podsrtonami... a nie globalny sklep...:))).

wszystko ma swój wymiar... do trumny nie zakłada się woderów...:)))

[QbisieQ]

dziadek3D - faktem jest, że nie robię największego serwisu w galaktyce, niemniej jednak nawet, skromną stronkę chciałbym w miarę możliwości zoptymalizować.

"...tekst nigdy nie obciążał niczego..."

- wszelkie odczyty czy zapisy dyskowe są obciążające i zawsze były, bardziej niż cokolwiek innego.

 

kots - za bardzo nie wiem gdzie mam to (html, body {min-height: 100%}) wklepać ? jak wrzucę coś takiego bezpośrednio w kodzie html to nic to nie daje, nawiasy klamrowe sugerują arkusz css ale nie rozumiem skąd wcześniej to html i przecinek ?

Edytowane 4 Kwiecień 2012 przez QbisieQ

[kots]

@QbisieQ - Tak. TO CSS. :) http://pastebin.com/kU1f4Yv7 - sprawdź wiersz nr 17 :)

[kots]

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.

[QbisieQ]

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

[dziadek3D]

..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ę...!!!

[QbisieQ]

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.

[torm]

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

[kots]

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.

[olaf]

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.

[dziadek3D]

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

[olaf]

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.

[dziadek3D]

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

[olaf]

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.

[dziadek3D]

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

[olaf]

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.

[dziadek3D]

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

[olaf]

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.

[QbisieQ]

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.

[dziadek3D]

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

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

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

dobranoc

[kots]

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

[QbisieQ]

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:

 

 

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

[torm]

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

[QbisieQ]

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

[QbisieQ]

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:

 

 

 

 

 

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

screeny:

 

 

 

 

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?

[torm]

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

[QbisieQ]

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