Polskie Forum Użytkowników GIMP-a

Ogólne dyskusje => Języki Internetu => Wątek zaczęty przez: dree on 15.12.2011, 16:38:17



Tytuł: Problem z zakodowaniem html
Wiadomość wysłana przez: dree on 15.12.2011, 16:38:17
Witam!
Otóz mam problem dot. pliku start.html a dokładniej problem z zakodowaniem go..
Próbowałem własnych sił oraz nawet róznych kompozytorów ale nic nie pomogło, wiec zwracam sie do was.
Posiadam trzy pliki jeden z nich to tło.gif w rozmiarach 1024x768 a dwa nastepny to odzielne napisy .png na przezroczystej warstwie(- forum, strona).
Probowałem swoich mini-umiejetnośći w html ale lipa, oto strona - http://www.overto.xaa.pl/start.html
Chodzi mi oto że chciałbym dopasować tło.gif do wymiarów strony, ale gdy wrzuce obraz to i tak albo jest tak albo obraz sie nie klonuje ale nie dopasowuje sie stronie i do tego reszta tła jest czarna.
Drugi problem to napisy - forum, strona.
Jak już wspomniałem posiadam ich pliki .png, chciałbym umieścic ich w tych samych pozycjach ale żeby były odnośnikami, tzn. naciskając je przenosiłbyś sie na forum lub na strone.
Prosze o pomoc:)
dR3 :)


Tytuł: Odp: Problem z zakodowaniem html
Wiadomość wysłana przez: EN on 17.12.2011, 15:27:47
O ile dobrze zrozumialem i sie nie myle to jest to wykonalne w css, w htmlu nie.
Pomysl czy na pewno chcesz takiego skalowania bo obrazek wtedy nie bedzie raczej skalowany wg swoich proporcji ale wg wymiarow okna. Przynajmniej tak mi sie wydaje.


Tytuł: Odp: Problem z zakodowaniem html
Wiadomość wysłana przez: Terrqge on 17.12.2011, 15:41:20
U mnie na rozdzielczość 1600x900 wygląda to po prostu dziwnie.


Tytuł: Odp: Problem z zakodowaniem html
Wiadomość wysłana przez: dree on 26.12.2011, 16:09:35
U mnie w rozdzielczośći 1152x864 wygląda to tak:
http://www.gimpuj.info/replacement.png (http://www.gimpuj.info/replacement.png) - Czyli nie tak jak powinno być.
Nie ważne jeśli proporcje obrazu ulegną zmianie, można przecież zawsze przygotować inny z dobrymi wymiarami.
Chciałbym po prostu dowiedzieć sie jak dopasować wymiary obrazu do wymiarów okna tak aby nic nie wychodziło za okno itp. Oraz jak podstawić te napisy aby były odnośnikami.



Tytuł: Odp: Problem z zakodowaniem html
Wiadomość wysłana przez: bfg_10k on 31.12.2011, 04:20:01
Tak na szybko:

1. Otwórz w gimipe obrazek DALEJ.PNG i obróć go o 50 stopni. Następnie zapisz go w katalogu ,gdzie masz zapisany plik start.html i overtogif.gif
2. Zmień kod w pliku start.html na taki:

Kod:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

<head>
  <meta http-equiv="Content-type" content="application/xhtml+xml; charset=utf-8" />
  <title> [tytuł strony] </title>

  <style type="text/css" >

body{
margin:0;
padding:0;
width: 100%;
height:100%;
background-color:#232522;
}

img{ border:0;}

#splash{
background:pink url(overtogif.gif) no-repeat;
margin:0;
width: 1024px;
height: 768px;
position:absolute;
top: 50%;
left: 50%;
margin-left: -512px;
margin-top: -384px;
}

#link_strona{
position:relative;
background: transparent url(DALEJ.PNG) no-repeat;
dislpay: block;
width: 264px;
height: 292px;
top: 400px;
left: 380px;
outline: none;
}

#link_forum{
position:relative;
background: transparent url(DALEJ.PNG) no-repeat;
width: 264px;
height: 292px;
display: block;
top: -310px;
left: 590px;
outline: none;
}
</style>


</head>

  <body>
   
<div id="splash">

<a id="link_strona" href="http://overto.xaa.pl/"><img alt="" src="DALEJ.PNG" /></a>

<a id="link_forum" href="http://overto.xaa.pl/forum"><img alt="" src="DALEJ.PNG" /></a>

     
</div>
  </body>

</html>

Działa na 100% w najnowszych: Firefoxie, IE 9 i Operze.

Zamiast rozciągania tła na cała stronę, ustawiłem na sztywno warstwę z grafiką w gif, wyśrodkowałem ją i wewnątrz niej zakotwiczyłem i wypoziomowałem linki do dalszych stron. Dla innych rozdzielczości można w javascript zrobić ich detekcję i do każdej napisać oddzielny kod css i przygotować większą grafikę tła.

Można też zrobić jeden duży obraz tła i skalować go za pomocą css, ale problemem będzie dopasowanie pozycji ukośnych linków.