Jump to content
QbisieQ

Problemy z CSS-em i HTML-em

Recommended Posts

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:

 

body_bg_image.png

 

PK_Portfolio.png

Edited by QbisieQ

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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:

 

 

Piotr Kubiś - Portfolio

 

 

 

 

 

 

 

 

 

 

PK_Portfolio.png

 

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

 

PK_Portfolio.png

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

screensho_rnweqpw.jpg

 

 

Zrobiłem to za pomocą takiego kodu:

 

body_bg_image.png

PK_Portfolio.png

 

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

Share this post


Link to post
Share on other sites

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.

  • Confused 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Edited by olaf

Share this post


Link to post
Share on other sites

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ść ? Edited by QbisieQ

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 ?

Edited by QbisieQ

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