CSS Forum

**ukgrant** · 05-27-2009, 02:31 PM

Hi, im Grant,

I have created a simple layout in photoshop and it has created a the HTML file below. I would like to center this webpage correctly. I have tried various tutorials like this but I just got confused.

If you could help me out with what to actually edit, this would be a great help.

HTML file:

Code:

<html>
<head>
<title>homepage_content</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (homepage_content.psd) -->
<style type="text/css">
<!--
#homepage_container {
 position:absolute;
 left:0px;
 top:0px;
 width:919px;
 height:742px;
}
#homepage-content-tl {
 position:absolute;
 left:0px;
 top:0px;
 width:444px;
 height:356px;
 background-image: url(includes/site_images/homepage_content_tl.gif);
 background-repeat:no-repeat;
}
#homepage-content-02 {
 position:absolute;
 left:444px;
 top:0px;
 width:31px;
 height:742px;
}
#homepage-content-tr {
 position:absolute;
 left:475px;
 top:0px;
 width:444px;
 height:356px;
 background-image: url(includes/site_images/homepage_content_tr.gif);
 background-repeat:no-repeat;
}
#homepage-content-04 {
 position:absolute;
 left:0px;
 top:356px;
 width:444px;
 height:30px;
}
#homepage-content-05 {
 position:absolute;
 left:475px;
 top:356px;
 width:444px;
 height:30px;
}
#homepage-content-bl {
 position:absolute;
 left:0px;
 top:386px;
 width:444px;
 height:356px;
 background-image: url(includes/site_images/homepage_content_bl.gif);
 background-repeat:no-repeat;
}
#homepage-content-br {
 position:absolute;
 left:475px;
 top:386px;
 width:444px;
 height:356px;
 background-image: url(includes/site_images/homepage_content_br.gif);
 background-repeat:no-repeat;
}
#textbox {
 padding: 20px 20px 20px 20px;
 font-family: Arial;
 font-size: 16px;
}
-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#c0cef6; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- ImageReady Slices (homepage_content.psd) -->
<div id="homepage_container">
 <div id="homepage-content-tl">
  <div id="textbox">
         Content
        </div>
 </div>
 <div id="homepage-content-02">
 </div>
 <div id="homepage-content-tr">
  <div id="textbox">
         Content
        </div>
 </div>
 <div id="homepage-content-04">
 </div>
 <div id="homepage-content-05">
 </div>
 <div id="homepage-content-bl">
  <div id="textbox">
         Content
        </div>
 </div>
 <div id="homepage-content-br">
     <div id="textbox">
         Content
        </div>
 </div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>

**LadynRed** · 05-27-2009, 03:14 PM

The problem is that you've got all that nasty absolute positioning in there, which makes it extremely difficult to have anything centered the way you'd like. Get rid of all that, you don't need it and it WILL cause you a lot of headaches, especially with IE.

However, if you're not ready for that - and you may not be if you're letting a GRAPHICS program produce your html - then make this change:

Quote:

#homepage_container {
position:relative;
margin: 0 auto;
width:919px;
height:742px;
}

That should get the container centered, and everything inside it should be positioned relative to the container they are in.

Learn to use the normal document flow - learn HTML and CSS, and check out the tutorial at www.cssslicingguide.com.