Witamy, Gość. Zaloguj się lub zarejestruj.
Czy dotarł do Ciebie email aktywacyjny?


Zaloguj się podając nazwę użytkownika, hasło i długość sesji
 
Szukanie zaawansowane



Strony: [1] 2  Wszystkie
DrukujPobierz PDF
Autor Wątek: Rzeczywiste wymiary - PROBLEM.  (Przeczytany 19168 razy)
0 użytkowników i 1 Gość przegląda ten wątek.
EN
√ ι ק

Reputacja: 4 Offline Offline

Płeć: Mężczyzna
GIMP: 2.4 + GAP
Licencja: Copyright
Wiadomości: 2 154
Galeria Użytkownika


800mm f/8 iso400 t125


Zobacz profil
« : 30.09.2011, 14:07:11 »
Cytat: EN
Projektowałem pod szerokość 1024px, ale coś nie gra i sam nie wiem co.
Szukałem odpowiedzi dlaczego 1024px wcale nie jest wyświetlane jako 1024.
Sprawdziłem DPI, ale nie pomogło - zresztą wyczytałem później, że dpi określa wyłącznie jakość i wagę pliku i jest pomijana przy rozmiarze grafiki na stronie.
Nie mam bladego pojęcia gdzie leży błąd. W stylu nie narobiłem burdelu ani w htmlu, wiec nie mam pojęcia gdzie leży problem.
Zakładam, że znów wyjeżdżam z jakąś prościzną, ale nie rozumiem nawet gdzie jest błąd.

screen

Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
	<meta name="Description" content="Krzysztof Wyrembek Photography" />
	<meta name="Keywords" content="Photography, Fotografia, Zdjęcia" />
	<title>Krzysztof Wyrembek Photography</title>
	<meta name="Author" content="Krzysztof Wyrembek" />
	<link rel="Stylesheet" type="text/css" href="files/style.css" />
	
</head>

<body>

<div id="top">
	<div id="MENU"><img src=files/img/menutransparent.png /></div>
	
	<div id="NAGLOWEK"><a  href="http://www.">
	<img src=files/img/header.png alt="LOGO"/> 
	</a></div>
        
	<div id="TRESC">Treść strony</div>
	<div id="INFORMACJE">Dodatkowe informacje</div>
	<div id="STOPKA">Stopka serwisu. Polecenie dołączenia zewnętrznego arkusza powinno znajdować się w dokumencie wcześniej niż wewnętrzny arkusz.</div>
</div>

</body>
</html>

Kod:
{
  padding: 0px;
  margin: 0px;
  border: 0px;  
}

html
{
background-image: url(img/background.png);
background-origin: border-box;
background-size: cover;
}

body
{
  color: pink;
  font-family: Tahoma, Trebuchet MS, Verdana, Arial, Helvetica;
  font-size: 11px;
  line-height: 16px;
}

#MENU 
{
  margin-left: 664px;
  margin-top: 49px;
}

#NAGLOWEK
{
  margin-left: 700px;
  margin-top: 4px;
}

#TRESC {
height: 250px;
clear: both;
}

#INFORMACJE {
width: 100%;
clear: both;
background-color: black;
}

#STOPKA 
{
clear: both;
width: 100%;
background-color: black;
}
Zapisane
Dorwać mnie można na:
Typhon
Opiekun tutoriali

Reputacja: 20 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
Licencja: Copyright
Wiadomości: 1 874
Galeria Użytkownika



Zobacz profil
« Odpowiedz #1 : 30.09.2011, 19:11:12 »
Nie znam się za bardzo, ale Ty ten obrazek masz ustawiony jako tło całości, więc będzie ono zapełniać po prostu tło i się powielać.
Zapisane
Deviantart
Digart.pl
3DMAX - Teczka 2D
savaro
Użytkownik

Reputacja: 2 Offline Offline

GIMP: 2.6
Licencja: Copyright
Wiadomości: 88
Galeria Użytkownika



Zobacz profil
« Odpowiedz #2 : 30.09.2011, 20:43:36 »
Skoro jest to wyświetlane tak jak na screenie i twierdzisz że zdjęcie ma 1024px szerokości to najwidoczniej masz ustawioną inną rozdzielczość niż 1024px w poziomie (chodzi oczywiście o rozdzielczość ustawioną w systemie).
Inna sprawa że jaki sens ma tworzenie strony w ten sposób, rozdzielczość 1024 posiada zapewne tylko jakiś procent użytkowników internetu więc i tak będą widzieli stronę właśnie w taki sposób jak na screenie.
Tego typu tło musiało by się dostosowywać wymiarem do rozdzielczości jakiej używa osoba przeglądająca stronę. Istnieją zresztą gotowe skrypty jQuery realizujące właśnie takie dostosowanie wymiaru.
 
Zapisane
Sooly
Emeryt

Reputacja: 9 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6 + GAP
Licencja: CC-NC-BY-SA
Wiadomości: 1 838
Galeria Użytkownika



Zobacz profil WWW
« Odpowiedz #3 : 30.09.2011, 20:56:39 »
Cytat: Typhon on 30.09.2011, 19:11:12
Nie znam się za bardzo, ale Ty ten obrazek masz ustawiony jako tło całości, więc będzie ono zapełniać po prostu tło i się powielać.
Nie, pojawia się tylko raz, żeby się powielało trzeba dopisać styl.
A nie, bzdury gadam, Typhon ma rację. Dopisz
Kod:
bacground-repeat: none
czy jakoś tak.

Edit:
Kurde, chyba też nie działa, już się nie odzywam tylko biorę książkę do łapy i szukam...
« Ostatnia zmiana: 30.09.2011, 21:06:55 wysłane przez Sooly » Zapisane
EN
√ ι ק

Reputacja: 4 Offline Offline

Płeć: Mężczyzna
GIMP: 2.4 + GAP
Licencja: Copyright
Wiadomości: 2 154
Galeria Użytkownika


800mm f/8 iso400 t125


Zobacz profil
« Odpowiedz #4 : 30.09.2011, 21:04:07 »
Problem czesciowo rozwiazany - zoomowałem przypadkiem z poziomu przegladarki. Twój pomysł jest słaby

Ale tak jak savaro wspomniał problem niejako pozostaje dla użytkowników wiekszych rozdzielczości.
Jako że sporo na stronie (w tym grafika) będzie sie opierało na prostych pozycjonowaniach wzg. punktu zero, dlatego nie wiem co zrobić żeby tego efektu nie było. (EDIT: Zeby nie bylo - jestem poczatkujacy przy kodowaniu dlatego to jest dla mnie najlatwiejsze rozwiazanie, chociaz moze nie najkorzystniejsze. Jak bede mial gotowca to i tak będę musial przemyslec czy pewnych rzeczy nie da sie rozwiazac inaczej.)
Czy istnieją zatem skrypty skalujące całość strony?
Zapisane
Dorwać mnie można na:
savaro
Użytkownik

Reputacja: 2 Offline Offline

GIMP: 2.6
Licencja: Copyright
Wiadomości: 88
Galeria Użytkownika



Zobacz profil
« Odpowiedz #5 : 30.09.2011, 21:09:43 »
Cytuj
Nie, pojawia się tylko raz, żeby się powielało trzeba dopisać styl.

Wręcz przeciwnie, jeżeli obszar ma większy wymiar niż obrazek to ten będzie powielany zarówno w poziomie jak i w pionie. Właśnie żeby tego uniknąć należy w CSS dodać "no-repeat", gdyż domyślnie jest przyjmowane "repeat".
prawidłowo: "url(adres obrazka) 0 0 no-repeat;

Zera można zastąpić przez top i left, jak również je pominąć gdyż przeglądarki domyślnie przyjmują właśnie taką wartość.

Edit:
Tak istnieją scrypty jQuery skalujące obraz w tle.
Oczywiście wtedy nadal pozostanie pewien problem, co jeżeli ktoś wyłączy obsługę javascript w przeglądarce?

Ominięciem tego mogłoby być skalowanie obrazu w PHP jeszcze przed wysłaniem strony z serwera, tyle że obraz musiałby mieć dużą rozdzielczość bo skalowanie w "górę" to raczej nie najlepszy pomysł.


Zapisane
savaro
Użytkownik

Reputacja: 2 Offline Offline

GIMP: 2.6
Licencja: Copyright
Wiadomości: 88
Galeria Użytkownika



Zobacz profil
« Odpowiedz #6 : 30.09.2011, 21:20:45 »
Możesz sprawdzić np. to: http://www.aaronvanderzwan.com/maximage

Maximage skaluje zdjęcia do wymiaru okna przeglądarki

Ewentualnie zajrzyj tutaj: http://css-tricks.com/3458-perfect-full-page-background-image/

Trzeba jedynie pamiętać że CSS3 nie jest jeszcze całkowicie obsługiwane przez przeglądarki.
« Ostatnia zmiana: 30.09.2011, 21:30:51 wysłane przez savaro » Zapisane
EN
√ ι ק

Reputacja: 4 Offline Offline

Płeć: Mężczyzna
GIMP: 2.4 + GAP
Licencja: Copyright
Wiadomości: 2 154
Galeria Użytkownika


800mm f/8 iso400 t125


Zobacz profil
« Odpowiedz #7 : 30.09.2011, 22:14:10 »
Właśnie w tym sęk, że chcę pominąć JS.
Poza tym skalowanie samego tła to za mało - co z resztą rzeczy na stronie? Rozjedzie się wszystko.

no-repeat to to samo co repeat-x ? Bo już nie mam dziś siły szukać tego a cos mi tak świta.

Zera można pominąć ale tylko w wypadku tła - inne grafiki trzeba ustawiać. A z tego co myślałem nad tym szablonem to się rozjedzie przy większej rodzielczości. Dlatego lepiej chyba wyłączyć powielanie tła, ustawić kolor tła nie walący po oczach i trudno. Jestem początkujący, więc nie zadowolę wszystkich.
Inna sprawa że ja mam pomysły rodem z flasha na układ strony i to komplikuje samo z siebie  Język

Dobra tyle na dziś bo już sam nie jestem pewien tego co pisze.
dziekowac i dobranoc Mrugnięcie

//Sooly: repeat-x to powtarzanie w poziomie, no-repeat to jego brak. Dobranoc. : )
« Ostatnia zmiana: 30.09.2011, 22:33:08 wysłane przez Sooly » Zapisane
Dorwać mnie można na:
savaro
Użytkownik

Reputacja: 2 Offline Offline

GIMP: 2.6
Licencja: Copyright
Wiadomości: 88
Galeria Użytkownika



Zobacz profil
« Odpowiedz #8 : 30.09.2011, 23:16:57 »
To czy reszta się rozjedzie czy nie to kwestia rozplanowana układu elementów na stronie. Dodatkowo nadawanie sztywnych wymiarów typu width:700px oczywiście spowoduje "rozjechanie" się strony przy innych rozdzielczościach (w sensie przesunięcia się elementów względem tła).
Lepszym rozwiązaniem w tym przypadku byłoby nadawanie wymiarów relatywnych do wielkości okna przeglądarki, co spowoduje że każdy "blok" zmieni swoją szerokość wraz ze zmianą wielkości okna przeglądarki.
Oczywiście takie rozwiązanie może nie zapewnić 100% pokrycia się elementów z tłem, bo tutaj dojdzie jeszcze kwestia tego z jaką dokładnością scrypt przeskaluje nam zdjęcie w tle, ale myślę że były by to przesunięcia do przyjęcia.

Twoja pierwsza metoda dopasowania wielkości obrazu mogłaby zdać egzamin po drobnych uzupełnieniach (background-size: cover; to jeszcze nie standard i musi być odmiennie deklarowany dla różnych przeglądarek), ale dla IE może być i tak wymagany mały skrypt( dokładnie tych kwestii nie sprawdzałem).

W razie czego służę pomocą przy kodzie, PW do dyspozycji. W prawdzie nie wszystko co da się zrobić we flashu można uzyskać samym CSS, ale układ strony raczej tak.

Tak jak podał Sooly: repeat-x powtarza w poziomie, no-repeat to brak jakiegokolwiek powtarzania.

  
Zapisane
EN
√ ι ק

Reputacja: 4 Offline Offline

Płeć: Mężczyzna
GIMP: 2.4 + GAP
Licencja: Copyright
Wiadomości: 2 154
Galeria Użytkownika


800mm f/8 iso400 t125


Zobacz profil
« Odpowiedz #9 : 01.10.2011, 09:41:11 »
Procentowy układ byłby stabilniejszy względem innych rozdzielczośći, ale i tak by miał rozjazd. Najpierw postaram się całość zakodować bo imho dużo tego nie ma, a póżniej zrobi kopie całości i zaczną sie eksperymenty najrozniejsze., włącznie z procentowymi ustaleniami itd.
Już mi pewien pomysł w związku z takim dopasowującym się szablonem zaczyna chodzić po głowie, ale najpierw trzeba się nieco ogranąć i skończyć póki co chociaż uzupełnianie elementów laya Chichot

Cytuj
W razie czego służę pomocą przy kodzie, PW do dyspozycji. W prawdzie nie wszystko co da się zrobić we flashu można uzyskać samym CSS, ale układ strony raczej tak.
Z całą pewnością się zgłoszę Mrugnięcie

A z tym repeatem to sie pieknie wyglupilem xD
Zapisane
Dorwać mnie można na:
agape
√ ι ק

Reputacja: 5 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6 + GAP
JID: nesq@gimpuj.info
Licencja: Copyright
Wiadomości: 842
Galeria Użytkownika


hejo


Zobacz profil
« Odpowiedz #10 : 02.10.2011, 19:33:17 »
Procentowego ustalania nie polecam, nie wiem co dokładnie chcesz zrobić, ale można napisać skrypt, który liczyłby h i w, do tego byś mógł odejmować/dodawać itp. No ale nie wiem co chcesz zrobić więc nie bardzo też mogę pomóc.
Zapisane
EN
√ ι ק

Reputacja: 4 Offline Offline

Płeć: Mężczyzna
GIMP: 2.4 + GAP
Licencja: Copyright
Wiadomości: 2 154
Galeria Użytkownika


800mm f/8 iso400 t125


Zobacz profil
« Odpowiedz #11 : 03.10.2011, 10:31:20 »
Procentowe odrzuciłem, Wszystko już jakoś idzie do przodu póki co, bez większych problemów, chyba że czegoś nie zauważam.
A propo jeszcze tematu wpadłem na myśl żeby ustawić całość strony mniej więcej tak:
Cytuj
TŁO
Cytuj
STRONA
, tak żeby uzyskać:
1024px - brak TŁA
powyżej 1024px - równe mariny po lewej i prawej w obrębie tła.

Tylko pytanie czy wystarczy ustalić centrowanie dla diva STRONA żeby to osiągnąć. Nie sprawdzałem jeszcze tego szczerze mówiąc, a że jestem wykończony po składaniu dtp do 5 rano to może Wy macie gotową odpowiedź Mrugnięcie
Zapisane
Dorwać mnie można na:
savaro
Użytkownik

Reputacja: 2 Offline Offline

GIMP: 2.6
Licencja: Copyright
Wiadomości: 88
Galeria Użytkownika



Zobacz profil
« Odpowiedz #12 : 03.10.2011, 20:10:13 »
Oczywiście że wystarczy. Divowi strona nadajesz width:1024px oraz margin:0 auto; Jeżeli szerokość okna będzie większa to uzyskasz jednakowe marginesy z prawej i lewej.
Co do szerokości 1024 to należy uwzględnić jeszcze ewentualną szerokość paska przewijania z lewej strony, więc dysponujesz szerokością parę pikseli mniejszą. Dotyczy to sytuacji kiedy ktoś ma rozdzielczość 1024x768 (obecnie to ok.18% użytkowników internetu w polsce).

Co do procentowego ustalania wymiarów nie jest znowu takie złe, chociaż ja osobiście również preferuję konkretne wartości. Daję to lepszą kontrolę nad rozmieszczeniem i wielkością elementów na stronie.

Zauważ natomiast że problemem nadal będzie umieszczenie grafiki w tagu <html>. Jak zachowa się zdjęcie w tle w stosunku do reszty strony przy większej szerokości okna?
To jest powód dla którego chociaż można, to nie warto umieszczać tła w <html>, <body>. Lepszym rozwiązaniem jest umieszczenie jako tło divu, który możesz od razu wyśrodkować, a tym samym wyśrodkujesz całą stronę.
Zapisane
Gracjan1987
Użytkownik

Reputacja: 0 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
Licencja: Copyright
Wiadomości: 15
Galeria Użytkownika

Gracjan1987


Zobacz profil
« Odpowiedz #13 : 03.10.2011, 22:31:09 »
Cytat: savaro on 03.10.2011, 20:10:13
Zauważ natomiast że problemem nadal będzie umieszczenie grafiki w tagu <html>. Jak zachowa się zdjęcie w tle w stosunku do reszty strony przy większej szerokości okna?
To jest powód dla którego chociaż można, to nie warto umieszczać tła w <html>, <body>. Lepszym rozwiązaniem jest umieszczenie jako tło divu, który możesz od razu wyśrodkować, a tym samym wyśrodkujesz całą stronę.

Pozwolę sobie na małe sprostowanie. O ile faktycznie ciężko wyśrodkować tło obrazkowe, chociaż da się to zrobić. To wrzucanie do strony kolejnego zbędnego <diva>, który obejmował będzie zawartość strony mija się z celem. Body może mieć określoną szerokość i wysokość, a wyśrodkowuje się przez wspomniane wcześniej margin: 0 auto najlepiej nadane dla całego arkusza.
najbezpieczniej jest robić strony tak do 950px, bo większość osób używa rozdzielczości 1024x768 i w górę 800x600 tak na dobrą sprawę odchodzi już w zapomnienie.
Zapisane
Strony: [1] 2  Wszystkie
DrukujPobierz PDF
Polskie Forum Użytkowników GIMP-aOgólne dyskusjeDyskusjeWebmastering & WebdesignJęzyki InternetuWątek: Rzeczywiste wymiary - PROBLEM.
Skocz do: