www.counter-strike.pl
FAQ  Szukaj  Grupy  Rejestracja  Profil  Zaloguj się, by sprawdzić wiadomości  Zaloguj  
Problem - strona w photoshopie

 
Napisz nowy temat   Odpowiedz do tematu    Forum Board Counter-Strike.PL Strona Główna -> Grafika i tworzenie stron klanowych
Zobacz poprzedni temat :: Zobacz następny temat  
Autor Wiadomość
`vdr
Mentor
Mentor


Dołączył: 26 Maj 2005
Klan: .ajt ?

PostWysłany: Pon Maj 03, 2010 9:52 am    Temat postu: Problem - strona w photoshopie Odpowiedz z cytatem

Witam - moj problem wyglada nastepujaco - mam gotowa strone w PS. I tu pojawia sie problem bo kod jest nie kompletny - gdy probuje dodac hiperlacze - strona sie rozlazi - w Operze wyglada ladnie natomiast w firefoxie i IE wyglada tak jak bym pocial ja nozyczkami.

Ustawilem bloki DIV ale nie moge do bloku dodac hiperlacza - opcja a href= link nie dziala i jestem w kropce bo ciezko znalesc konkretne opisy jak poradzic sobie z tym problemem - kod stony wyglada tak :

Kod:
<html>
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<style type="text/css">
<!--
body {
   background-image: url(tlo1.jpg);
}
#apDiv1 {
   position:absolute;
   left:418px;
   top:74px;
   width:808px;
   height:51px;
   z-index:1;
}
#apDiv2 {
   position:absolute;
   left:516px;
   top:75px;
   width:109px;
   height:49px;
   z-index:2;
}
#apDiv3 {
   position:absolute;
   left:626px;
   top:74px;
   width:77px;
   height:52px;
   z-index:3;
}
#apDiv4 {
   position:absolute;
   left:703px;
   top:74px;
   width:77px;
   height:51px;
   z-index:4;
}
#apDiv5 {
   position:absolute;
   left:782px;
   top:74px;
   width:111px;
   height:52px;
   z-index:5;
}
#apDiv6 {
   position:absolute;
   left:895px;
   top:73px;
   width:74px;
   height:54px;
   z-index:6;
}
#apDiv7 {
   position:absolute;
   left:970px;
   top:73px;
   width:88px;
   height:54px;
   z-index:7;
}
#apDiv8 {
   position:absolute;
   left:1058px;
   top:73px;
   width:94px;
   height:55px;
   z-index:8;
}
#apDiv9 {
   position:absolute;
   left:1038px;
   top:457px;
   width:168px;
   height:285px;
   z-index:9;
}
#apDiv10 {
   position:absolute;
   left:919px;
   top:683px;
   width:79px;
   height:28px;
   z-index:10;
}
#apDiv11 {
   position:absolute;
   left:1106px;
   top:766px;
   width:75px;
   height:30px;
   z-index:11;
}
#apDiv12 {
   position:absolute;
   left:417px;
   top:830px;
   width:809px;
   height:66px;
   z-index:12;
}
#apDiv13 {
   position:absolute;
   left:940px;
   top:845px;
   width:64px;
   height:44px;
   z-index:13;
}
#apDiv14 {
   position:absolute;
   left:1004px;
   top:844px;
   width:68px;
   height:47px;
   z-index:14;
}
#apDiv15 {
   position:absolute;
   left:1073px;
   top:844px;
   width:148px;
   height:48px;
   z-index:15;
}
-->
</style></head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (index.psd) -->
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3"></div>
<div id="apDiv4"></div>
<div id="apDiv5"></div>
<div id="apDiv6"></div>
<div id="apDiv7"></div>
<div id="apDiv8"></div>
<div id="apDiv9"></div>
<div id="apDiv10"></div>
<div id="apDiv11"></div>
<div id="apDiv12"></div>
<div id="apDiv13"></div>
<div id="apDiv14"></div>
<div id="apDiv15"></div>
<table width="1201" height="1009" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
      <td colspan="18">
         <img src="images/index_01.jpg" width="1200" height="74" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="74" alt=""></td>
  </tr>
   <tr>
      <td rowspan="13">
         <img src="images/index_02.jpg" width="304" height="934" alt=""></td>
      <td>
         <img src="images/index_03.jpg" width="93" height="51" alt=""></td>
      <td>
         <img src="images/index_04.jpg" width="76" height="51" alt=""></td>
      <td rowspan="2">
         <img src="images/index_05.jpg" width="77" height="52" alt=""></td>
      <td>
         <img src="images/index_06.jpg" width="128" height="51" alt=""></td>
      <td colspan="3">
         <img src="images/index_07.jpg" width="67" height="51" alt=""></td>
      <td colspan="3" rowspan="2">
         <img src="images/index_08.jpg" width="81" height="52" alt=""></td>
      <td colspan="3" rowspan="2">
         <img src="images/index_09.jpg" width="86" height="52" alt=""></td>
      <td colspan="4" rowspan="3">
         <img src="images/index_10.jpg" width="288" height="385" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="51" alt=""></td>
   </tr>
   <tr>
      <td colspan="2" rowspan="12">
         <img src="images/index_11.jpg" width="169" height="883" alt=""></td>
      <td colspan="4" rowspan="3">
         <img src="images/index_12.jpg" width="195" height="558" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="1" alt=""></td>
   </tr>
   <tr>
      <td rowspan="11">
         <img src="images/index_13.jpg" width="77" height="882" alt=""></td>
      <td colspan="6">
         <img src="images/index_14.jpg" width="167" height="333" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="333" alt=""></td>
   </tr>
   <tr>
      <td colspan="2">
         <img src="images/index_15.jpg" width="71" height="224" alt=""></td>
      <td colspan="6" rowspan="3">
         <img src="images/index_16.jpg" width="169" height="284" alt=""></td>
      <td colspan="2" rowspan="7">
         <img src="images/index_17.jpg" width="215" height="372" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="224" alt=""></td>
   </tr>
   <tr>
      <td colspan="2" rowspan="9">
         <img src="images/index_18.jpg" width="145" height="325" alt=""></td>
      <td colspan="3">
         <img src="images/index_19.jpg" width="90" height="32" alt=""></td>
      <td rowspan="6">
         <img src="images/index_20.jpg" width="31" height="148" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="32" alt=""></td>
   </tr>
   <tr>
      <td colspan="3" rowspan="4">
         <img src="images/index_21.jpg" width="90" height="115" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="28" alt=""></td>
   </tr>
   <tr>
      <td colspan="6">
         <img src="images/index_22.jpg" width="169" height="24" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="24" alt=""></td>
   </tr>
   <tr>
      <td colspan="3" rowspan="3">
         <img src="images/index_23.jpg" width="67" height="64" alt=""></td>
      <td colspan="2">
         <img src="images/index_24.jpg" width="75" height="34" alt=""></td>
      <td rowspan="3">
         <img src="images/index_25.jpg" width="27" height="64" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="34" alt=""></td>
   </tr>
   <tr>
      <td colspan="2" rowspan="2">
         <img src="images/index_26.jpg" width="75" height="30" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="29" alt=""></td>
   </tr>
   <tr>
      <td rowspan="4">
         <img src="images/index_27.jpg" width="22" height="178" alt=""></td>
      <td colspan="2" rowspan="3">
         <img src="images/index_28.jpg" width="68" height="67" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="1" alt=""></td>
   </tr>
   <tr>
      <td colspan="3">
         <img src="images/index_29.jpg" width="66" height="65" alt=""></td>
      <td colspan="5" rowspan="2">
         <img src="images/index_30.jpg" width="152" height="66" alt=""></td>
      <td rowspan="3">
         <img src="images/index_31.jpg" width="197" height="177" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="65" alt=""></td>
   </tr>
   <tr>
      <td colspan="3" rowspan="2">
         <img src="images/index_32.jpg" width="66" height="112" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="1" alt=""></td>
   </tr>
   <tr>
      <td colspan="2">
         <img src="images/index_33.jpg" width="68" height="111" alt=""></td>
      <td colspan="5">
         <img src="images/index_34.jpg" width="152" height="111" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="111" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="images/spacer.gif" width="304" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="93" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="76" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="77" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="128" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="17" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="22" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="28" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="40" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="31" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="10" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="25" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="32" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="29" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="46" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="27" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="18" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="197" height="1" alt=""></td>
      <td></td>
   </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>



I tu pytanie - co robie zle
_________________
Powrót do góry
Zobacz profil autora Wyślij prywatną wiadomość
Google
Reklama




PostWysłany: Pon Maj 03, 2010 9:52 am    Temat postu:

Powrót do góry
Froncek
Redakcja CS.PL
Redakcja CS.PL


Dołączył: 20 Lip 2006
Klan: nie dotyczy/nie pracuje

PostWysłany: Pon Maj 03, 2010 10:19 am    Temat postu: Odpowiedz z cytatem

Wszystko. Nie wiem po co te divy, ustawione tak na sztywno, przy innej rozdzielczości będzie dupa. Jak sobie nie radzisz, to nie idź na siłę w divy, skup się na tabeli, bo to w niej powinieneś dodać hiperłącza.

Przykładowa komórka:
Cytat:
<td rowspan="13">
<img src="images/index_02.jpg" width="304" height="934" alt="">
</td>

Zamień na:
Cytat:
<td rowspan="13" style="background: url('images/index_02.jpg') no-repeat; width: 304px; height: 934px;">
TUTAJ TWÓJ TEKST-HIPERŁĄCZE
</td>

I tak każdą komórkę. Dodam, że tak nie powinno się robić (kod z photoshopa jest be), strona będzie bardzo ciężka...
_________________
Counter-Strike.PL - największy polski serwis poświęcony CS
Powrót do góry
Zobacz profil autora Wyślij prywatną wiadomość Wyślij email Numer GG Skype
friZz
Redakcja CS.PL
Redakcja CS.PL


Dołączył: 16 Kwi 2007

PostWysłany: Pon Maj 03, 2010 10:50 am    Temat postu: Odpowiedz z cytatem

Nie polecam stosowania tego narzędzia w PS'ie. Lepiej nauczyć się xHTML&CSS i samemu pisać, przynajmniej wiesz co do czego i masz stronę w standardach.
Powrót do góry
Zobacz profil autora Wyślij prywatną wiadomość Wyślij email Odwiedź stronę autora Numer GG
`vdr
Mentor
Mentor


Dołączył: 26 Maj 2005
Klan: .ajt ?

PostWysłany: Pon Maj 03, 2010 11:20 am    Temat postu: Odpowiedz z cytatem

problem okazal sie prostrzy niz myslalem - opisze bo moze komus sie przyda :

otoz mimo wszystko zalecane jest wstawienie bloku div aby konstrukcja strony byla sztywna i sie nie rozjezdzala z tym ze aby uniknac mojego problemu - wartosc bloku div nalezy ustawic na hidden, wstawiajac hiperlacze w obrazek wykonany w photoshopie nalezy dodac wartos boarder na 0 i ot prosty sposob a pomogl

jak tylko skoncze strone podam link
_________________
Powrót do góry
Zobacz profil autora Wyślij prywatną wiadomość
Froncek
Redakcja CS.PL
Redakcja CS.PL


Dołączył: 20 Lip 2006
Klan: nie dotyczy/nie pracuje

PostWysłany: Pon Maj 03, 2010 11:33 am    Temat postu: Odpowiedz z cytatem

`vdr napisał:
otoz mimo wszystko zalecane jest wstawienie bloku div aby konstrukcja strony byla sztywna i sie nie rozjezdzala z tym ze aby uniknac mojego problemu - wartosc bloku div nalezy ustawic na hidden

oO... Chyba sam nie zrozumiałeś co zrobiłeś. W skrócie, z tego co powiedziałeś wynika, że wstawiłeś bloki div, po to żeby je ukryć...

Naprawdę polecam Ci przestudiować stronę: http://www.kurshtml.boo.pl/html/zielony.html
_________________
Counter-Strike.PL - największy polski serwis poświęcony CS
Powrót do góry
Zobacz profil autora Wyślij prywatną wiadomość Wyślij email Numer GG Skype
`vdr
Mentor
Mentor


Dołączył: 26 Maj 2005
Klan: .ajt ?

PostWysłany: Pon Maj 03, 2010 1:12 pm    Temat postu: Odpowiedz z cytatem

Nie ukrywam ze to dopiero moj poczatek pracy z html/css - o ile photoshopa ogarnalem to tu sie dopiero ucze nie mniej problem rozwiazany i to najwazniejsze : P

wystarczy ogolnie pogrubienie ktore rozwala uklad strony w ff i ie ustawic na 0 - opera mnie nieco zmylila i pokazywala strone ok natomiastt ie i ff pocieta - ale jest juz ok
_________________
Powrót do góry
Zobacz profil autora Wyślij prywatną wiadomość
friZz
Redakcja CS.PL
Redakcja CS.PL


Dołączył: 16 Kwi 2007

PostWysłany: Pon Maj 03, 2010 1:23 pm    Temat postu: Odpowiedz z cytatem

No zazwyczaj tak jest i to normalne. Jeśli masz diva np. 200px, a w nim kolejne dwa powiedzmy, że po 100px to jak któremuś z nich nadasz border 1px to dodaje z każdej strony czyli prawa + lewa i rozszerza Ci do 102px takiego diva. Pełno jest takich pułapek, ale jeśli pozna się mechanizmy CSS to wszystko jest proste.
Powrót do góry
Zobacz profil autora Wyślij prywatną wiadomość Wyślij email Odwiedź stronę autora Numer GG
sharkk
Redakcja CS.PL
Redakcja CS.PL


Dołączył: 28 Kwi 2007

PostWysłany: Pon Maj 03, 2010 1:32 pm    Temat postu: Odpowiedz z cytatem

Polecam od początku zrobić tą stronę na divach i wywalić tabelki :) kod psa nadaje się tylko do śmieci i jeszcze się o tym przekonasz (wstawia jakieś nikomu nie potrzebne jedno pixelowe obrazki żeby strona sie kupy trzymała...)

Fronc podał Ci dobrą stronę, na jej podstawie spróbuj odtworzyć to co zrobił PS w tabelkach tyle że na blokach (divach). Potem porównaj sobie ile czasu wczytuje się stronka na tabelach z PS a ile na przez siebie samego zrobionych divach. Różnica będzie duża.

Pierwsze kroki zazwyczaj stawia się w notatniku, ale od razu powiem że lepiej jest pracować w specjalnym do tego programie, np. Notepad++ (Froncek :P). U góry w menu możesz sobie wybrać język programowania w jakim działasz a program sam będzie kolorował składnię tego języka dzięki czemu niemal na pierwszy rzut oka będziesz wiedział gdzie jest błąd.
Powrót do góry
Zobacz profil autora Wyślij prywatną wiadomość Wyślij email Odwiedź stronę autora Numer GG
Wyświetl posty z ostatnich:   
Napisz nowy temat   Odpowiedz do tematu    Forum Board Counter-Strike.PL Strona Główna -> Grafika i tworzenie stron klanowych Wszystkie czasy w strefie CET (Europa)
Strona 1 z 1

 
Skocz do:  
Nie możesz pisać nowych tematów
Nie możesz odpowiadać w tematach
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach


Powered by phpBB © 2001, 2005 phpBB Group
© 1999-2012 Counter-Strike.PL Sebastian Kasperek | Rosi CMS © MD Software | Linki: Zdjęcia reklamowe