04-06-2011, 00:56
WItam
Zacząłem naprawde od pojscia na latwizne znam sie na grafice jednak z kodowaniem strony juz jest problem..
Problem jest z pozycjonowaniem strony
stworzylem layout w photoshopie np o rozmiarach 1024x800 px i w takim rozmiarze wyswietla na stronie jednak chcialbym aby strona zawsze sie dopasowywala do krawedzi przeglądarki moze wkleje kod
zostala stworzona tabela i zaznaczylem ze szerokosc ma byc zawsze na 100 % szerokosci przeglądarki jednak mi to nie dziala wie ktos w czym tkwi problem ?
Bylbym bardzo wdzieczny za pomoc
załączam grafike do strony dla ulatwienia ;p
Zacząłem naprawde od pojscia na latwizne znam sie na grafice jednak z kodowaniem strony juz jest problem..
Problem jest z pozycjonowaniem strony
stworzylem layout w photoshopie np o rozmiarach 1024x800 px i w takim rozmiarze wyswietla na stronie jednak chcialbym aby strona zawsze sie dopasowywala do krawedzi przeglądarki moze wkleje kod
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>darkdesign</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Save for Web Styles (darkdesign.psd) -->
<style type="text/css">
<!--
#Tabela_01 {
position:absolute;
left:0px;
top:0px;
width: 100%;
height:994px;
}
#index-index_ {
position:absolute;
left:0px;
top:0px;
width:1126px;
height:69px;
}
#index-index002_ {
position:absolute;
left:0px;
top:69px;
width:4px;
height:159px;
}
#logo_ {
position:absolute;
left:4px;
top:69px;
width:189px;
height:71px;
}
#index-index004_ {
position:absolute;
left:193px;
top:69px;
width:933px;
height:71px;
}
#index-index005_ {
position:absolute;
left:4px;
top:140px;
width:290px;
height:88px;
}
#customx20design_ {
position:absolute;
left:294px;
top:140px;
width:529px;
height:90px;
}
#index-index007_ {
position:absolute;
left:823px;
top:140px;
width:303px;
height:90px;
}
#left_ {
position:absolute;
left:0px;
top:228px;
width:229px;
height:533px;
}
#index-index009_ {
position:absolute;
left:229px;
top:228px;
width:9px;
height:435px;
}
#home_ {
position:absolute;
left:238px;
top:228px;
width:56px;
height:36px;
}
#home011_ {
position:absolute;
left:294px;
top:230px;
width:92px;
height:34px;
}
#index-index012_ {
position:absolute;
left:386px;
top:230px;
width:19px;
height:85px;
}
#ofirmie_ {
position:absolute;
left:405px;
top:230px;
width:147px;
height:37px;
}
#index-index014_ {
position:absolute;
left:552px;
top:230px;
width:22px;
height:85px;
}
#portfolio_ {
position:absolute;
left:574px;
top:230px;
width:147px;
height:36px;
}
#index-index016_ {
position:absolute;
left:721px;
top:230px;
width:21px;
height:85px;
}
#kontakt_ {
position:absolute;
left:742px;
top:230px;
width:147px;
height:36px;
}
#index-index018_ {
position:absolute;
left:889px;
top:230px;
width:2px;
height:433px;
}
#right_ {
position:absolute;
left:891px;
top:230px;
width:234px;
height:533px;
}
#index-index020_ {
position:absolute;
left:1125px;
top:230px;
width:1px;
height:764px;
}
#index-index021_ {
position:absolute;
left:238px;
top:264px;
width:148px;
height:51px;
}
#index-index022_ {
position:absolute;
left:574px;
top:266px;
width:147px;
height:49px;
}
#index-index023_ {
position:absolute;
left:742px;
top:266px;
width:147px;
height:49px;
}
#index-index024_ {
position:absolute;
left:405px;
top:267px;
width:147px;
height:48px;
}
#index-index025_ {
position:absolute;
left:238px;
top:315px;
width:8px;
height:348px;
}
#textx20head_ {
position:absolute;
left:246px;
top:315px;
width:643px;
height:25px;
}
#index-index027_ {
position:absolute;
left:246px;
top:340px;
width:643px;
height:14px;
}
#index-index028_ {
position:absolute;
left:246px;
top:354px;
width:4px;
height:309px;
}
#textarea2_ {
position:absolute;
left:250px;
top:354px;
width:170px;
height:296px;
}
#index-index030_ {
position:absolute;
left:420px;
top:354px;
width:8px;
height:309px;
}
#textx20areax201_ {
position:absolute;
left:428px;
top:354px;
width:449px;
height:296px;
}
#index-index032_ {
position:absolute;
left:877px;
top:354px;
width:12px;
height:309px;
}
#index-index033_ {
position:absolute;
left:250px;
top:650px;
width:170px;
height:13px;
}
#index-index034_ {
position:absolute;
left:428px;
top:650px;
width:449px;
height:13px;
}
#botton2_ {
position:absolute;
left:229px;
top:663px;
width:662px;
height:100px;
}
#botton_ {
position:absolute;
left:0px;
top:761px;
width:229px;
height:2px;
}
#index-index037_ {
position:absolute;
left:0px;
top:763px;
width:326px;
height:54px;
}
#index-index038_ {
position:absolute;
left:326px;
top:763px;
width:478px;
height:44px;
}
#index-index039_ {
position:absolute;
left:804px;
top:763px;
width:321px;
height:231px;
}
#index-index040_ {
position:absolute;
left:326px;
top:807px;
width:478px;
height:145px;
}
#index-index041_ {
position:absolute;
left:0px;
top:817px;
width:20px;
height:177px;
}
#naszex20promocje_ {
position:absolute;
left:20px;
top:817px;
width:105px;
height:14px;
}
#index-index043_ {
position:absolute;
left:125px;
top:817px;
width:9px;
height:177px;
}
#cennik_ {
position:absolute;
left:134px;
top:817px;
width:36px;
height:14px;
}
#index-index045_ {
position:absolute;
left:170px;
top:817px;
width:23px;
height:177px;
}
#kontakt046_ {
position:absolute;
left:193px;
top:817px;
width:45px;
height:8px;
}
#index-index047_ {
position:absolute;
left:238px;
top:817px;
width:88px;
height:177px;
}
#index-index048_ {
position:absolute;
left:193px;
top:825px;
width:45px;
height:169px;
}
#index-index049_ {
position:absolute;
left:20px;
top:831px;
width:105px;
height:7px;
}
#index-index050_ {
position:absolute;
left:134px;
top:831px;
width:36px;
height:163px;
}
#naszex20promocjex20text_ {
position:absolute;
left:20px;
top:838px;
width:105px;
height:141px;
}
#index-index052_ {
position:absolute;
left:326px;
top:952px;
width:102px;
height:42px;
}
#stopka_ {
position:absolute;
left:428px;
top:952px;
width:254px;
height:42px;
}
#index-index054_ {
position:absolute;
left:682px;
top:952px;
width:122px;
height:42px;
}
#index-index055_ {
position:absolute;
left:20px;
top:979px;
width:105px;
height:15px;
}
-->
</style>
<!-- End Save for Web Styles -->
</head>
<body style="background-color:#FFFFFF;">
<!-- Save for Web Slices (darkdesign.psd) -->
<div id="Tabela_01">
<div id="index-index_">
<img id="index_index" src="images/index_index.png" width="1126" height="69" alt="" />
</div>
<div id="index-index002_">
<img id="index_index002" src="images/index_index-02.png" width="4" height="159" alt="" />
</div>
<div id="logo_">
<img id="logo" src="images/logo.png" width="189" height="71" alt="" />
</div>
<div id="index-index004_">
<img id="index_index004" src="images/index_index-04.png" width="933" height="71" alt="" />
</div>
<div id="index-index005_">
<img id="index_index005" src="images/index_index-05.png" width="290" height="88" alt="" />
</div>
<div id="customx20design_">
<img id="customx20design" src="images/custom-design.png" width="529" height="90" alt="custom design" />
</div>
<div id="index-index007_">
<img id="index_index007" src="images/index_index-07.png" width="303" height="90" alt="" />
</div>
<div id="left_">
<img id="left" src="images/left.png" width="229" height="533" alt="left" />
</div>
<div id="index-index009_">
<img id="index_index009" src="images/index_index-09.png" width="9" height="435" alt="" />
</div>
<div id="home_">
<img id="home" src="images/home.png" width="56" height="36" alt="" />
</div>
<div id="home011_">
<img id="home011" src="images/home-11.png" width="92" height="34" alt="" />
</div>
<div id="index-index012_">
<img id="index_index012" src="images/index_index-12.png" width="19" height="85" alt="" />
</div>
<div id="ofirmie_">
<img id="ofirmie" src="images/ofirmie.png" width="147" height="37" alt="" />
</div>
<div id="index-index014_">
<img id="index_index014" src="images/index_index-14.png" width="22" height="85" alt="" />
</div>
<div id="portfolio_">
<img id="portfolio" src="images/portfolio.png" width="147" height="36" alt="" />
</div>
<div id="index-index016_">
<img id="index_index016" src="images/index_index-16.png" width="21" height="85" alt="" />
</div>
<div id="kontakt_">
<img id="kontakt" src="images/kontakt.png" width="147" height="36" alt="" />
</div>
<div id="index-index018_">
<img id="index_index018" src="images/index_index-18.png" width="2" height="433" alt="" />
</div>
<div id="right_">
<img id="right" src="images/right.png" width="234" height="533" alt="" />
</div>
<div id="index-index020_">
<img id="index_index020" src="images/index_index-20.png" width="1" height="764" alt="" />
</div>
<div id="index-index021_">
<img id="index_index021" src="images/index_index-21.png" width="148" height="51" alt="" />
</div>
<div id="index-index022_">
<img id="index_index022" src="images/index_index-22.png" width="147" height="49" alt="" />
</div>
<div id="index-index023_">
<img id="index_index023" src="images/index_index-23.png" width="147" height="49" alt="" />
</div>
<div id="index-index024_">
<img id="index_index024" src="images/index_index-24.png" width="147" height="48" alt="" />
</div>
<div id="index-index025_">
<img id="index_index025" src="images/index_index-25.png" width="8" height="348" alt="" />
</div>
<div id="textx20head_">
<img id="textx20head" src="images/text-head.png" width="643" height="25" alt="" />
</div>
<div id="index-index027_">
<img id="index_index027" src="images/index_index-27.png" width="643" height="14" alt="" />
</div>
<div id="index-index028_">
<img id="index_index028" src="images/index_index-28.png" width="4" height="309" alt="" />
</div>
<div id="textarea2_">
<img id="textarea2" src="images/textarea2.png" width="170" height="296" alt="" />
</div>
<div id="index-index030_">
<img id="index_index030" src="images/index_index-30.png" width="8" height="309" alt="" />
</div>
<div id="textx20areax201_">
<img id="textx20areax201" src="images/text-area-1.png" width="449" height="296" alt="" />
</div>
<div id="index-index032_">
<img id="index_index032" src="images/index_index-32.png" width="12" height="309" alt="" />
</div>
<div id="index-index033_">
<img id="index_index033" src="images/index_index-33.png" width="170" height="13" alt="" />
</div>
<div id="index-index034_">
<img id="index_index034" src="images/index_index-34.png" width="449" height="13" alt="" />
</div>
<div id="botton2_">
<img id="botton2" src="images/botton2.png" width="662" height="100" alt="botton2" />
</div>
<div id="botton_">
<img id="botton" src="images/botton.png" width="229" height="2" alt="botton" />
</div>
<div id="index-index037_">
<img id="index_index037" src="images/index_index-37.png" width="326" height="54" alt="" />
</div>
<div id="index-index038_">
<img id="index_index038" src="images/index_index-38.png" width="478" height="44" alt="" />
</div>
<div id="index-index039_">
<img id="index_index039" src="images/index_index-39.png" width="321" height="231" alt="" />
</div>
<div id="index-index040_">
<img id="index_index040" src="images/index_index-40.png" width="478" height="145" alt="" />
</div>
<div id="index-index041_">
<img id="index_index041" src="images/index_index-41.png" width="20" height="177" alt="" />
</div>
<div id="naszex20promocje_">
<img id="naszex20promocje" src="images/nasze-promocje.png" width="105" height="14" alt="nasze promocje" />
</div>
<div id="index-index043_">
<img id="index_index043" src="images/index_index-43.png" width="9" height="177" alt="" />
</div>
<div id="cennik_">
<img id="cennik" src="images/cennik.png" width="36" height="14" alt="cennik" />
</div>
<div id="index-index045_">
<img id="index_index045" src="images/index_index-45.png" width="23" height="177" alt="" />
</div>
<div id="kontakt046_">
<img id="kontakt046" src="images/kontakt-46.png" width="45" height="8" alt="kontakt" />
</div>
<div id="index-index047_">
<img id="index_index047" src="images/index_index-47.png" width="88" height="177" alt="" />
</div>
<div id="index-index048_">
<img id="index_index048" src="images/index_index-48.png" width="45" height="169" alt="" />
</div>
<div id="index-index049_">
<img id="index_index049" src="images/index_index-49.png" width="105" height="7" alt="" />
</div>
<div id="index-index050_">
<img id="index_index050" src="images/index_index-50.png" width="36" height="163" alt="" />
</div>
<div id="naszex20promocjex20text_">
<img id="naszex20promocjex20text" src="images/nasze-promocje-text.png" width="105" height="141" alt="" />
</div>
<div id="index-index052_">
<img id="index_index052" src="images/index_index-52.png" width="102" height="42" alt="" />
</div>
<div id="stopka_">
<img id="stopka" src="images/stopka.png" width="254" height="42" alt="" />
</div>
<div id="index-index054_">
<img id="index_index054" src="images/index_index-54.png" width="122" height="42" alt="" />
</div>
<div id="index-index055_">
<img id="index_index055" src="images/index_index-55.png" width="105" height="15" alt="" />
</div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>
zostala stworzona tabela i zaznaczylem ze szerokosc ma byc zawsze na 100 % szerokosci przeglądarki jednak mi to nie dziala wie ktos w czym tkwi problem ?
Bylbym bardzo wdzieczny za pomoc
załączam grafike do strony dla ulatwienia ;p
Kod:
http://darkdesign.darkhosting.pl/images.rar