Solved

PSD into Centered CSS?

Posted on 2008-06-22
3
241 Views
Last Modified: 2013-11-19
How do I turn below sliced Photoshop CS3 HTML output into a centered CSS layout?

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> </title>
<style type="text/css">

      body {

          background-color: #585858;

          text-align: center;

          margin: 0px auto;

      }


      #container {

          width: 973px;

          margin: 0px auto;

          text-align: left;

      }



#index-01 {
      position:absolute;
      left:0px;
      top:0px;
      width:11px;
      height:1181px;
}

#index-02 {
      position:absolute;
      left:11px;
      top:0px;
      width:950px;
      height:80px;
}

#index-03 {
      position:absolute;
      left:961px;
      top:0px;
      width:12px;
      height:1181px;
}

#index-04 {
      position:absolute;
      left:11px;
      top:80px;
      width:950px;
      height:32px;
}

#index-05 {
      position:absolute;
      left:11px;
      top:112px;
      width:950px;
      height:30px;
}

#index-06 {
      position:absolute;
      left:11px;
      top:142px;
      width:1px;
      height:29px;
}

#index-07 {
      position:absolute;
      left:12px;
      top:142px;
      width:760px;
      height:1039px;
}

#index-08 {
      position:absolute;
      left:772px;
      top:142px;
      width:189px;
      height:28px;
}

#index-09 {
      position:absolute;
      left:772px;
      top:170px;
      width:189px;
      height:402px;
}

#index-10 {
      position:absolute;
      left:11px;
      top:171px;
      width:1px;
      height:198px;
}

#index-11 {
      position:absolute;
      left:11px;
      top:369px;
      width:1px;
      height:28px;
}

#index-12 {
      position:absolute;
      left:11px;
      top:397px;
      width:1px;
      height:784px;
}

#index-13 {
      position:absolute;
      left:772px;
      top:572px;
      width:189px;
      height:28px;
}

#index-14 {
position:absolute;
      left:772px;
      top:600px;
      width:189px;
      height:581px;
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body>


<div id="container">
      <div id="index-01">
      
      </div>
      <div id="index-02">
            <img src="images/index_02.jpg" width="950" height="80" alt="">
      </div>
      <div id="index-03"></div>
<div id="index-04">
            <img src="images/index_04.jpg" width="950" height="32" alt="">
      </div>
      <div id="index-05">
            <img src="images/index_05.jpg" width="950" height="30" alt="">
      </div>
      <div id="index-06">
            <img src="images/index_06.jpg" width="1" height="29" alt="">
      </div>
      <div id="index-07">
            <img src="images/index_07.gif" width="760" height="1039" alt="">
      </div>
      <div id="index-08">
            <img src="images/index_08.jpg" width="189" height="28" alt="">
      </div>
      <div id="index-09">
            <img src="images/index_09.jpg" width="189" height="402" alt="">
      </div>
      <div id="index-10">
            <img src="images/index_10.jpg" width="1" height="198" alt="">
      </div>
      <div id="index-11">
            <img src="images/index_11.jpg" width="1" height="28" alt="">
      </div>
      <div id="index-12">
            <img src="images/index_12.jpg" width="1" height="784" alt="">
      </div>
      <div id="index-13">
            <img src="images/index_13.jpg" width="189" height="28" alt="">
      </div>
      <div id="index-14">
            <img src="images/index_14.jpg" width="189" height="581" alt="">
      </div>
</div>

<!-- End ImageReady Slices -->
</body>
</html>
0
Comment
Question by:hermanyang
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 11

Accepted Solution

by:
glumlun earned 63 total points
ID: 21841298
hi, add:

position: relative;

to #container

so:

      #container {

          width: 973px;

          margin: 0px auto;

          text-align: left;

          position: relative;

      }
0
 
LVL 1

Assisted Solution

by:Sam2de
Sam2de earned 62 total points
ID: 25900160
this should work

#container {

          width: 973px;

          margin: 0px auto;

          text-align: left;
          margin-right: auto;
       margin-left: auto;

      }
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
how to get files list form folder which is located on server using client side  vb6.0 app 11 74
CSS question 4 57
asp.net, radiobuttonlist, c# 3 69
Boolean 13 50
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question