Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
Problem z ukladem strony [css] - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: Problem z ukladem strony [css] (/thread-problem-z-ukladem-strony-css)

Problem z ukladem strony [css] - dawids2411 - 04-06-2011

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
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


RE: Problem z ukladem strony [css] - Pedro84 - 04-06-2011

Zacznij od przerobienia kursu, np. kurshtml.edu.pl.

To co masz, nie nadaje się do niczego.

RE: Problem z ukladem strony [css] - dawids2411 - 04-06-2011

to jest wszystko ok po zapisaniu tego jako html i wypakowaniu images strona wyglada dobrze tylko stoi przy leym boku przegladarki heh chcialbym jedynie zeby sie rozciagala na cala szerokosc przegladarki .

Pomoze ktos ta tabele podrasowac ?

RE: Problem z ukladem strony [css] - rel - 04-06-2011

no tak wydaje mi się, że mylisz tabele z divami...