Try this:
body {
margin: 0 auto;
position:relative;
width: 1000px;
}
Please replace the 1000px with whatever the width of the actual page is.
Good luck!
On Thu, Mar 5, 2009 at 10:05 AM, horatioB <[email protected]> wrote:
>
> Hello,
>
> I am trying to center my entire page that was output from Photoshop
> slices into CSS. I have searched the web and tried everything from
> adding a wrapper DIV with the following:
>
> #wrapper { margin-left:auto; margin-right:auto; }
>
> to also adding:
>
> BODY { text-align:center; }
>
> nothing seems to work. i am pasting the RAW photoshop output. any
> help would be greatly appreciated!
>
> <!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>index13</title>
> <meta http-equiv="Content-Type" content="text/html;
> charset=iso-8859-1" />
> <!-- ImageReady Styles (index13.psd) -->
> <style type="text/css">
> <!--
>
> #Table_01 {
> position:absolute;
> left:0px;
> top:0px;
> width:800px;
> height:696px;
>
> }
>
> #index13-01_ {
> position:absolute;
> left:0px;
> top:0px;
> width:229px;
> height:90px;
>
> }
>
> #index13-02_ {
> position:absolute;
> left:229px;
> top:0px;
> width:405px;
> height:90px;
>
> }
>
> #index13-03_ {
> position:absolute;
> left:634px;
> top:0px;
> width:166px;
> height:90px;
>
> }
>
> #index13-04_ {
> position:absolute;
> left:0px;
> top:90px;
> width:17px;
> height:606px;
>
> }
>
> #index13-05_ {
> position:absolute;
> left:17px;
> top:90px;
> width:47px;
> height:512px;
>
> }
>
> #index13-06_ {
> position:absolute;
> left:64px;
> top:90px;
> width:350px;
> height:38px;
>
> }
>
> #index13-07_ {
> position:absolute;
> left:414px;
> top:90px;
> width:188px;
> height:66px;
>
> }
>
> #index13-08_ {
> position:absolute;
> left:602px;
> top:90px;
> width:148px;
> height:66px;
>
> }
>
> #index13-09_ {
> position:absolute;
> left:750px;
> top:90px;
> width:50px;
> height:358px;
>
> }
>
> #index13-10_ {
> position:absolute;
> left:64px;
> top:128px;
> width:350px;
> height:115px;
>
> }
>
> #index13-11_ {
> position:absolute;
> left:414px;
> top:156px;
> width:188px;
> height:87px;
>
> }
>
> #index13-12_ {
> position:absolute;
> left:602px;
> top:156px;
> width:116px;
> height:87px;
>
> }
>
> #index13-13_ {
> position:absolute;
> left:718px;
> top:156px;
> width:32px;
> height:404px;
>
> }
>
> #index13-14_ {
> position:absolute;
> left:64px;
> top:243px;
> width:64px;
> height:309px;
>
> }
>
> #index13-15_ {
> position:absolute;
> left:128px;
> top:243px;
> width:500px;
> height:260px;
>
> }
>
> #index13-16_ {
> position:absolute;
> left:628px;
> top:243px;
> width:90px;
> height:309px;
>
> }
>
> #index13-17_ {
> position:absolute;
> left:750px;
> top:448px;
> width:41px;
> height:147px;
>
> }
>
> #index13-18_ {
> position:absolute;
> left:791px;
> top:448px;
> width:9px;
> height:248px;
>
> }
>
> #index13-19_ {
> position:absolute;
> left:128px;
> top:503px;
> width:500px;
> height:16px;
>
> }
>
> #index13-20_ {
> position:absolute;
> left:128px;
> top:519px;
> width:63px;
> height:33px;
>
> }
>
> #index13-21_ {
> position:absolute;
> left:191px;
> top:519px;
> width:70px;
> height:26px;
>
> }
>
> #index13-22_ {
> position:absolute;
> left:261px;
> top:519px;
> width:20px;
> height:33px;
>
> }
>
> #index13-23_ {
> position:absolute;
> left:281px;
> top:519px;
> width:56px;
> height:26px;
>
> }
>
> #index13-24_ {
> position:absolute;
> left:337px;
> top:519px;
> width:18px;
> height:33px;
>
> }
>
> #index13-25_ {
> position:absolute;
> left:355px;
> top:519px;
> width:35px;
> height:25px;
>
> }
>
> #index13-26_ {
> position:absolute;
> left:390px;
> top:519px;
> width:13px;
> height:33px;
>
> }
>
> #index13-27_ {
> position:absolute;
> left:403px;
> top:519px;
> width:40px;
> height:25px;
>
> }
>
> #index13-28_ {
> position:absolute;
> left:443px;
> top:519px;
> width:14px;
> height:33px;
>
> }
>
> #index13-29_ {
> position:absolute;
> left:457px;
> top:519px;
> width:125px;
> height:25px;
>
> }
>
> #index13-30_ {
> position:absolute;
> left:582px;
> top:519px;
> width:46px;
> height:33px;
>
> }
>
> #index13-31_ {
> position:absolute;
> left:355px;
> top:544px;
> width:35px;
> height:8px;
>
> }
>
> #index13-32_ {
> position:absolute;
> left:403px;
> top:544px;
> width:40px;
> height:8px;
>
> }
>
> #index13-33_ {
> position:absolute;
> left:457px;
> top:544px;
> width:125px;
> height:8px;
>
> }
>
> #index13-34_ {
> position:absolute;
> left:191px;
> top:545px;
> width:70px;
> height:7px;
>
> }
>
> #index13-35_ {
> position:absolute;
> left:281px;
> top:545px;
> width:56px;
> height:7px;
>
> }
>
> #index13-36_ {
> position:absolute;
> left:64px;
> top:552px;
> width:350px;
> height:43px;
>
> }
>
> #index13-37_ {
> position:absolute;
> left:414px;
> top:552px;
> width:304px;
> height:43px;
>
> }
>
> #index13-38_ {
> position:absolute;
> left:718px;
> top:560px;
> width:32px;
> height:41px;
>
> }
>
> #index13-39_ {
> position:absolute;
> left:64px;
> top:595px;
> width:143px;
> height:101px;
>
> }
>
> #index13-40_ {
> position:absolute;
> left:207px;
> top:595px;
> width:40px;
> height:18px;
>
> }
>
> #index13-41_ {
> position:absolute;
> left:247px;
> top:595px;
> width:8px;
> height:101px;
>
> }
>
> #index13-42_ {
> position:absolute;
> left:255px;
> top:595px;
> width:65px;
> height:19px;
>
> }
>
> #index13-43_ {
> position:absolute;
> left:320px;
> top:595px;
> width:10px;
> height:101px;
>
> }
>
> #index13-44_ {
> position:absolute;
> left:330px;
> top:595px;
> width:36px;
> height:19px;
>
> }
>
> #index13-45_ {
> position:absolute;
> left:366px;
> top:595px;
> width:10px;
> height:101px;
>
> }
>
> #index13-46_ {
> position:absolute;
> left:376px;
> top:595px;
> width:45px;
> height:19px;
>
> }
>
> #index13-47_ {
> position:absolute;
> left:421px;
> top:595px;
> width:5px;
> height:101px;
>
> }
>
> #index13-48_ {
> position:absolute;
> left:426px;
> top:595px;
> width:50px;
> height:19px;
>
> }
>
> #index13-49_ {
> position:absolute;
> left:476px;
> top:595px;
> width:10px;
> height:101px;
>
> }
>
> #index13-50_ {
> position:absolute;
> left:486px;
> top:595px;
> width:52px;
> height:19px;
>
> }
>
> #index13-51_ {
> position:absolute;
> left:538px;
> top:595px;
> width:180px;
> height:3px;
>
> }
>
> #index13-52_ {
> position:absolute;
> left:750px;
> top:595px;
> width:41px;
> height:101px;
>
> }
>
> #index13-53_ {
> position:absolute;
> left:538px;
> top:598px;
> width:17px;
> height:98px;
>
> }
>
> #index13-54_ {
> position:absolute;
> left:555px;
> top:598px;
> width:153px;
> height:77px;
>
> }
>
> #index13-55_ {
> position:absolute;
> left:708px;
> top:598px;
> width:10px;
> height:98px;
>
> }
>
> #index13-56_ {
> position:absolute;
> left:718px;
> top:601px;
> width:32px;
> height:95px;
>
> }
>
> #index13-57_ {
> position:absolute;
> left:17px;
> top:602px;
> width:47px;
> height:94px;
>
> }
>
> #index13-58_ {
> position:absolute;
> left:207px;
> top:613px;
> width:40px;
> height:83px;
>
> }
>
> #index13-59_ {
> position:absolute;
> left:255px;
> top:614px;
> width:65px;
> height:82px;
>
> }
>
> #index13-60_ {
> position:absolute;
> left:330px;
> top:614px;
> width:36px;
> height:82px;
>
> }
>
> #index13-61_ {
> position:absolute;
> left:376px;
> top:614px;
> width:45px;
> height:82px;
>
> }
>
> #index13-62_ {
> position:absolute;
> left:426px;
> top:614px;
> width:50px;
> height:82px;
>
> }
>
> #index13-63_ {
> position:absolute;
> left:486px;
> top:614px;
> width:52px;
> height:82px;
>
> }
>
> #index13-64_ {
> position:absolute;
> left:555px;
> top:675px;
> width:153px;
> height:21px;
>
> }
>
> -->
> </style>
> <!-- End ImageReady Styles -->
> </head>
> <body style="background-color:#FFFFFF;">
> <!-- ImageReady Slices (index13.psd) -->
> <div id="Table_01">
> <div id="index13-01_">
> <img id="index13_01" src="images/index13_01.gif"
> width="229"
> height="90" alt="" />
> </div>
> <div id="index13-02_">
> <img id="index13_02" src="images/index13_02.jpg"
> width="405"
> height="90" alt="" />
> </div>
> <div id="index13-03_">
> <img id="index13_03" src="images/index13_03.gif"
> width="166"
> height="90" alt="" />
> </div>
> <div id="index13-04_">
> <img id="index13_04" src="images/index13_04.gif"
> width="17"
> height="606" alt="" />
> </div>
> <div id="index13-05_">
> <img id="index13_05" src="images/index13_05.jpg"
> width="47"
> height="512" alt="" />
> </div>
> <div id="index13-06_">
> <img id="index13_06" src="images/index13_06.jpg"
> width="350"
> height="38" alt="" />
> </div>
> <div id="index13-07_">
> <img id="index13_07" src="images/index13_07.jpg"
> width="188"
> height="66" alt="" />
> </div>
> <div id="index13-08_">
> <img id="index13_08" src="images/index13_08.jpg"
> width="148"
> height="66" alt="" />
> </div>
> <div id="index13-09_">
> <img id="index13_09" src="images/index13_09.gif"
> width="50"
> height="358" alt="" />
> </div>
> <div id="index13-10_">
> <img id="index13_10" src="images/index13_10.gif"
> width="350"
> height="115" alt="" />
> </div>
> <div id="index13-11_">
> <img id="index13_11" src="images/index13_11.gif"
> width="188"
> height="87" alt="" />
> </div>
> <div id="index13-12_">
> <img id="index13_12" src="images/index13_12.jpg"
> width="116"
> height="87" alt="" />
> </div>
> <div id="index13-13_">
> <img id="index13_13" src="images/index13_13.jpg"
> width="32"
> height="404" alt="" />
> </div>
> <div id="index13-14_">
> <img id="index13_14" src="images/index13_14.gif"
> width="64"
> height="309" alt="" />
> </div>
> <div id="index13-15_">
> <img id="index13_15" src="images/index13_15.jpg"
> width="500"
> height="260" alt="" />
> </div>
> <div id="index13-16_">
> <img id="index13_16" src="images/index13_16.gif"
> width="90"
> height="309" alt="" />
> </div>
> <div id="index13-17_">
> <img id="index13_17" src="images/index13_17.jpg"
> width="41"
> height="147" alt="" />
> </div>
> <div id="index13-18_">
> <img id="index13_18" src="images/index13_18.gif"
> width="9"
> height="248" alt="" />
> </div>
> <div id="index13-19_">
> <img id="index13_19" src="images/index13_19.gif"
> width="500"
> height="16" alt="" />
> </div>
> <div id="index13-20_">
> <img id="index13_20" src="images/index13_20.gif"
> width="63"
> height="33" alt="" />
> </div>
> <div id="index13-21_">
> <img id="index13_21" src="images/index13_21.gif"
> width="70"
> height="26" alt="" />
> </div>
> <div id="index13-22_">
> <img id="index13_22" src="images/index13_22.gif"
> width="20"
> height="33" alt="" />
> </div>
> <div id="index13-23_">
> <img id="index13_23" src="images/index13_23.gif"
> width="56"
> height="26" alt="" />
> </div>
> <div id="index13-24_">
> <img id="index13_24" src="images/index13_24.gif"
> width="18"
> height="33" alt="" />
> </div>
> <div id="index13-25_">
> <img id="index13_25" src="images/index13_25.gif"
> width="35"
> height="25" alt="" />
> </div>
> <div id="index13-26_">
> <img id="index13_26" src="images/index13_26.gif"
> width="13"
> height="33" alt="" />
> </div>
> <div id="index13-27_">
> <img id="index13_27" src="images/index13_27.gif"
> width="40"
> height="25" alt="" />
> </div>
> <div id="index13-28_">
> <img id="index13_28" src="images/index13_28.gif"
> width="14"
> height="33" alt="" />
> </div>
> <div id="index13-29_">
> <img id="index13_29" src="images/index13_29.gif"
> width="125"
> height="25" alt="" />
> </div>
> <div id="index13-30_">
> <img id="index13_30" src="images/index13_30.gif"
> width="46"
> height="33" alt="" />
> </div>
> <div id="index13-31_">
> <img id="index13_31" src="images/index13_31.gif"
> width="35"
> height="8" alt="" />
> </div>
> <div id="index13-32_">
> <img id="index13_32" src="images/index13_32.gif"
> width="40"
> height="8" alt="" />
> </div>
> <div id="index13-33_">
> <img id="index13_33" src="images/index13_33.gif"
> width="125"
> height="8" alt="" />
> </div>
> <div id="index13-34_">
> <img id="index13_34" src="images/index13_34.gif"
> width="70"
> height="7" alt="" />
> </div>
> <div id="index13-35_">
> <img id="index13_35" src="images/index13_35.gif"
> width="56"
> height="7" alt="" />
> </div>
> <div id="index13-36_">
> <img id="index13_36" src="images/index13_36.jpg"
> width="350"
> height="43" alt="" />
> </div>
> <div id="index13-37_">
> <img id="index13_37" src="images/index13_37.jpg"
> width="304"
> height="43" alt="" />
> </div>
> <div id="index13-38_">
> <img id="index13_38" src="images/index13_38.gif"
> width="32"
> height="41" alt="" />
> </div>
> <div id="index13-39_">
> <img id="index13_39" src="images/index13_39.gif"
> width="143"
> height="101" alt="" />
> </div>
> <div id="index13-40_">
> <img id="index13_40" src="images/index13_40.gif"
> width="40"
> height="18" alt="" />
> </div>
> <div id="index13-41_">
> <img id="index13_41" src="images/index13_41.gif"
> width="8"
> height="101" alt="" />
> </div>
> <div id="index13-42_">
> <img id="index13_42" src="images/index13_42.gif"
> width="65"
> height="19" alt="" />
> </div>
> <div id="index13-43_">
> <img id="index13_43" src="images/index13_43.gif"
> width="10"
> height="101" alt="" />
> </div>
> <div id="index13-44_">
> <img id="index13_44" src="images/index13_44.gif"
> width="36"
> height="19" alt="" />
> </div>
> <div id="index13-45_">
> <img id="index13_45" src="images/index13_45.gif"
> width="10"
> height="101" alt="" />
> </div>
> <div id="index13-46_">
> <img id="index13_46" src="images/index13_46.gif"
> width="45"
> height="19" alt="" />
> </div>
> <div id="index13-47_">
> <img id="index13_47" src="images/index13_47.gif"
> width="5"
> height="101" alt="" />
> </div>
> <div id="index13-48_">
> <img id="index13_48" src="images/index13_48.gif"
> width="50"
> height="19" alt="" />
> </div>
> <div id="index13-49_">
> <img id="index13_49" src="images/index13_49.gif"
> width="10"
> height="101" alt="" />
> </div>
> <div id="index13-50_">
> <img id="index13_50" src="images/index13_50.gif"
> width="52"
> height="19" alt="" />
> </div>
> <div id="index13-51_">
> <img id="index13_51" src="images/index13_51.gif"
> width="180"
> height="3" alt="" />
> </div>
> <div id="index13-52_">
> <img id="index13_52" src="images/index13_52.gif"
> width="41"
> height="101" alt="" />
> </div>
> <div id="index13-53_">
> <img id="index13_53" src="images/index13_53.gif"
> width="17"
> height="98" alt="" />
> </div>
> <div id="index13-54_">
> <img id="index13_54" src="images/index13_54.jpg"
> width="153"
> height="77" alt="" />
> </div>
> <div id="index13-55_">
> <img id="index13_55" src="images/index13_55.gif"
> width="10"
> height="98" alt="" />
> </div>
> <div id="index13-56_">
> <img id="index13_56" src="images/index13_56.gif"
> width="32"
> height="95" alt="" />
> </div>
> <div id="index13-57_">
> <img id="index13_57" src="images/index13_57.gif"
> width="47"
> height="94" alt="" />
> </div>
> <div id="index13-58_">
> <img id="index13_58" src="images/index13_58.gif"
> width="40"
> height="83" alt="" />
> </div>
> <div id="index13-59_">
> <img id="index13_59" src="images/index13_59.gif"
> width="65"
> height="82" alt="" />
> </div>
> <div id="index13-60_">
> <img id="index13_60" src="images/index13_60.gif"
> width="36"
> height="82" alt="" />
> </div>
> <div id="index13-61_">
> <img id="index13_61" src="images/index13_61.gif"
> width="45"
> height="82" alt="" />
> </div>
> <div id="index13-62_">
> <img id="index13_62" src="images/index13_62.gif"
> width="50"
> height="82" alt="" />
> </div>
> <div id="index13-63_">
> <img id="index13_63" src="images/index13_63.gif"
> width="52"
> height="82" alt="" />
> </div>
> <div id="index13-64_">
> <img id="index13_64" src="images/index13_64.gif"
> width="153"
> height="21" alt="" />
> </div>
> </div>
> <!-- End ImageReady Slices -->
> </body>
> </html>
>
> >
>
--
-Richard Aday
--~--~---------~--~----~------------~-------~--~----~
--
You received this because you are subscribed to the "Design the Web with CSS"
at Google groups.
To post: [email protected]
To unsubscribe: [email protected]
-~----------~----~----~----~------~----~------~--~---
