Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 246
  • Last Modified:

PSD into Centered CSS?

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
hermanyang
Asked:
hermanyang
2 Solutions
 
glumlunCommented:
hi, add:

position: relative;

to #container

so:

      #container {

          width: 973px;

          margin: 0px auto;

          text-align: left;

          position: relative;

      }
0
 
Sam2deCommented:
this should work

#container {

          width: 973px;

          margin: 0px auto;

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

      }
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now