Zobacz poprzedni temat :: Zobacz następny temat |
Autor |
Wiadomość |
`vdr Mentor
Dołączył: 26 Maj 2005 Klan: .ajt ?
|
Wysłany: Pon Maj 03, 2010 9:52 am Temat postu: Problem - strona w photoshopie |
|
|
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 |
|
|
Google Reklama
|
Wysłany: Pon Maj 03, 2010 9:52 am Temat postu: |
|
|
|
|
Powrót do góry |
|
|
Froncek Redakcja CS.PL
Dołączył: 20 Lip 2006 Klan: nie dotyczy/nie pracuje
|
Wysłany: Pon Maj 03, 2010 10:19 am Temat postu: |
|
|
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 |
|
|
friZz Redakcja CS.PL
Dołączył: 16 Kwi 2007
|
Wysłany: Pon Maj 03, 2010 10:50 am Temat postu: |
|
|
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 |
|
|
`vdr Mentor
Dołączył: 26 Maj 2005 Klan: .ajt ?
|
Wysłany: Pon Maj 03, 2010 11:20 am Temat postu: |
|
|
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 |
|
|
Froncek Redakcja CS.PL
Dołączył: 20 Lip 2006 Klan: nie dotyczy/nie pracuje
|
Wysłany: Pon Maj 03, 2010 11:33 am Temat postu: |
|
|
`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 |
|
|
`vdr Mentor
Dołączył: 26 Maj 2005 Klan: .ajt ?
|
Wysłany: Pon Maj 03, 2010 1:12 pm Temat postu: |
|
|
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 |
|
|
friZz Redakcja CS.PL
Dołączył: 16 Kwi 2007
|
Wysłany: Pon Maj 03, 2010 1:23 pm Temat postu: |
|
|
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 |
|
|
sharkk Redakcja CS.PL
Dołączył: 28 Kwi 2007
|
Wysłany: Pon Maj 03, 2010 1:32 pm Temat postu: |
|
|
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 ). 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 |
|
|
|