Easy
Code:
/* Neo Productions - STYLESHEET */
* {margin: 0; padding: 0; } /* removes default margin and padding for everything */
body {
background-color: #383838;
font: 10px Arial, san-serif;
text-align: center; /* Centers for IE6 */
}
#page {
display:block;
width: 777px; /* sets page width */
margin: 0 auto; /* centers main div */
text-align: left; /* resets standard text alignment */
}
div#image1 {
background: url(images/image1.png) no-repeat center top;
display: block;
height: 16px;
}
div#image2 {
background: url(images/image2.png) no-repeat center top;
display: block;
height: 166px;
}
div#image3 {
background: url(images/image3.png) no-repeat center top;
display: block;
height: 9px;
}
div#image4 {
background: url(images/image4.png) no-repeat center top;
display: block;
height: 453px;
}
div#image5 {
background: url(images/image5.png) no-repeat center top;
display: block;
height: 9px;
}
div#image6 {
background: url(images/image6.png) no-repeat center top;
display: block;
height: 18px;
width: 777px;
}
div#image7 {
background: url(images/image7.png) no-repeat center top;
display: block;
height: 143px;
}
Code:
<!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" xml:lang="en" lang="en">
<!-- #BEGIN# Head Information -->
<head>
<title>Neo Productions | UNDER CONSTRUCTION</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<!-- #END# Head Information -->
<!-- #BEGIN# Body Information -->
<body>
<div id="page">
<div id="image1"></div>
<div id="image2"></div>
<div id="image3"></div>
<div id="image4"></div>
<div id="image5"></div>
<div id="image6"></div>
<div id="image7"></div>
</div>
</body>
<!-- #END# Body Information -->
</html>
Note the text-align property for the body tag. This centers in IE6/WIN. Also used the shorthand for the font property. You should set a default (serif, san-serif) whenever setting a font. You may want to rethink 10px. That's terribly small and I generally only use it for things like copyright info, not page content. 12px is more of a realistic minimum now days.
I added an enclosing div (#page) which encompasses the entire page. Then I added margin: 0 auto; to center the page in every browser other than IE6. (o top and bottom, auto right and left.) I added text-align: left to this div to reset the text to standard alignment. Having this encompassing div will prevent other problems down the road. It is possible to center each div you have (by adding the margin: 0 auto
, but that makes for a pretty unstable layout. It's better to have 1 div that's centered to prevent things breaking.
Also note, for 0 measurements like padding: 0; you do not need a measurement. 0px is the same as 0em or 0in.. so no need for the measurement. But only with zeros.
Also, a doctype declaration was added to the XHTML. Always proper coding. I also removed the single quotes from the image paths. They aren't needed and can, at times, cause issues with dynamic scripting (php, asp, etc).