Solved

PSD into Centered CSS?

Posted on 2008-06-22
3
240 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
This video teaches users how to migrate an existing Wordpress website to a new domain.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

756 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