View Single Post - How do i make my PSD Template into a working HTML Page

homer09001 · #1 (**permalink**) Jul 30th, 2007, 15:44

i've made a layout for my website in Photoshop, sliced it up into individual images, i know how to output it into a html page, but how can i make that page auto resize to the width of the window?
and so it resizes the content box to the content within it?

my template can be seen here:

http://dth-scripts.com/layout/layout.html

ive tried setting it up so it outputs the css aswell but it still doesnt work?

HTML: Select all

<!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>layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Styles (layout.psd) -->
<style type="text/css">
<!--
 
#Table_01 {
    position:absolute;
    left:0px;
    top:0px;
    width:800px;
    height:650px;
}
 
#layout-01_ {
    position:absolute;
    left:0px;
    top:0px;
    width:789px;
    height:169px;
}
 
#layout-02_ {
    position:absolute;
    left:789px;
    top:0px;
    width:11px;
    height:169px;
}
 
#layout-03_ {
    position:absolute;
    left:0px;
    top:169px;
    width:789px;
    height:1px;
}
 
#layout-04_ {
    position:absolute;
    left:789px;
    top:169px;
    width:11px;
    height:481px;
}
 
#layout-05_ {
    position:absolute;
    left:0px;
    top:170px;
    width:36px;
    height:61px;
}
 
#layout-06_ {
    position:absolute;
    left:36px;
    top:170px;
    width:6px;
    height:61px;
}
 
#layout-07_ {
    position:absolute;
    left:42px;
    top:170px;
    width:122px;
    height:61px;
}
 
#layout-08_ {
    position:absolute;
    left:164px;
    top:170px;
    width:560px;
    height:61px;
}
 
#layout-09_ {
    position:absolute;
    left:724px;
    top:170px;
    width:10px;
    height:61px;
}
 
#layout-10_ {
    position:absolute;
    left:734px;
    top:170px;
    width:55px;
    height:61px;
}
 
#layout-11_ {
    position:absolute;
    left:0px;
    top:231px;
    width:17px;
    height:379px;
}
 
#layout-12_ {
    position:absolute;
    left:17px;
    top:231px;
    width:133px;
    height:379px;
}
 
#layout-13_ {
    position:absolute;
    left:150px;
    top:231px;
    width:34px;
    height:379px;
}
 
#layout-14_ {
    position:absolute;
    left:184px;
    top:231px;
    width:576px;
    height:379px;
}
 
#layout-15_ {
    position:absolute;
    left:760px;
    top:231px;
    width:29px;
    height:379px;
}
 
#layout-16_ {
    position:absolute;
    left:0px;
    top:610px;
    width:83px;
    height:40px;
}
 
#layout-17_ {
    position:absolute;
    left:83px;
    top:610px;
    width:13px;
    height:40px;
}
 
#layout-18_ {
    position:absolute;
    left:96px;
    top:610px;
    width:68px;
    height:40px;
}
 
#layout-19_ {
    position:absolute;
    left:164px;
    top:610px;
    width:318px;
    height:40px;
}
 
#layout-20_ {
    position:absolute;
    left:482px;
    top:610px;
    width:6px;
    height:40px;
}
 
#layout-21_ {
    position:absolute;
    left:488px;
    top:610px;
    width:301px;
    height:40px;
}
 
-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF;">
<!-- ImageReady Slices (layout.psd) -->
<div id="Table_01">
    <div id="layout-01_">
        <img id="layout_01" src="images/layout_01.gif" width="789" height="169" alt="" />
    </div>
    <div id="layout-02_">
        <img id="layout_02" src="images/layout_02.gif" width="11" height="169" alt="" />
    </div>
    <div id="layout-03_">
        <img id="layout_03" src="images/layout_03.gif" width="789" height="1" alt="" />
    </div>
    <div id="layout-04_">
        <img id="layout_04" src="images/layout_04.gif" width="11" height="481" alt="" />
    </div>
    <div id="layout-05_">
        <img id="layout_05" src="images/layout_05.gif" width="36" height="61" alt="" />
    </div>
    <div id="layout-06_">
        <img id="layout_06" src="images/layout_06.gif" width="6" height="61" alt="" />
    </div>
    <div id="layout-07_">
        <img id="layout_07" src="images/layout_07.gif" width="122" height="61" alt="" />
    </div>
    <div id="layout-08_">
        <img id="layout_08" src="images/layout_08.gif" width="560" height="61" alt="" />
    </div>
    <div id="layout-09_">
        <img id="layout_09" src="images/layout_09.gif" width="10" height="61" alt="" />
    </div>
    <div id="layout-10_">
        <img id="layout_10" src="images/layout_10.gif" width="55" height="61" alt="" />
    </div>
    <div id="layout-11_">
        <img id="layout_11" src="images/layout_11.gif" width="17" height="379" alt="" />
    </div>
    <div id="layout-12_">
        <img id="layout_12" src="images/layout_12.gif" width="133" height="379" alt="" />
    </div>
    <div id="layout-13_">
        <img id="layout_13" src="images/layout_13.gif" width="34" height="379" alt="" />
    </div>
    <div id="layout-14_">
        <img id="layout_14" src="images/layout_14.gif" width="576" height="379" alt="" />
    </div>
    <div id="layout-15_">
        <img id="layout_15" src="images/layout_15.gif" width="29" height="379" alt="" />
    </div>
    <div id="layout-16_">
        <img id="layout_16" src="images/layout_16.gif" width="83" height="40" alt="" />
    </div>
    <div id="layout-17_">
        <img id="layout_17" src="images/layout_17.gif" width="13" height="40" alt="" />
    </div>
    <div id="layout-18_">
        <img id="layout_18" src="images/layout_18.gif" width="68" height="40" alt="" />
    </div>
    <div id="layout-19_">
        <img id="layout_19" src="images/layout_19.gif" width="318" height="40" alt="" />
    </div>
    <div id="layout-20_">
        <img id="layout_20" src="images/layout_20.gif" width="6" height="40" alt="" />
    </div>
    <div id="layout-21_">
        <img id="layout_21" src="images/layout_21.gif" width="301" height="40" alt="" />
    </div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>