Okay I wrapped the divs within a div. Why does this not work?
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>test.html</title>
<style type="text/css">
.wrapper
{
margin: 0px auto;
}
.testimonials_png
{
position: absolute;
left:20px;
top:397px;
width:220px;
height:395px;
background: url("test_files/testimonials.png") no-repeat;
}
.homeLink_png
{
position: absolute;
left:-1px;
top:243px;
width:203px;
height:75px;
background: url("test_files/homeLink.png") no-repeat;
}
.sidingLink_png
{
position: absolute;
left:202px;
top:243px;
width:180px;
height:75px;
background: url("test_files/sidingLink.png") no-repeat;
}
.windowsLink_png
{
position: absolute;
left:382px;
top:243px;
width:181px;
height:75px;
background: url("test_files/windowsLink.png") no-repeat;
}
.roofingLink_png
{
position: absolute;
left:563px;
top:243px;
width:183px;
height:75px;
background: url("test_files/roofingLink.png") no-repeat;
}
.aboutLink_png
{
position: absolute;
left:746px;
top:243px;
width:205px;
height:75px;
background: url("test_files/aboutLink.png") no-repeat;
}
.banner_png
{
position: absolute;
left:0px;
top:0px;
width:950px;
height:243px;
background: url("test_files/banner.png") no-repeat;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="testimonials_png"> </div>
<div class="homeLink_png"> </div>
<div class="sidingLink_png"> </div>
<div class="windowsLink_png"> </div>
<div class="roofingLink_png"> </div>
<div class="aboutLink_png"> </div>
<div class="banner_png"> </div>
</div>
</body>
</html>
For the browser be able to correcty center a div, you must give it some info about that div, so:
(copied from your code) it’s wrong, but:
Works just fine! your telling the browser that your wrapper as 900px of width and the rest the browser should split equally by the wrapper left and right side… Thus margin:auto; will provide you with nothing… needs the unit spec (for centering, use 0).
Another problem in your code is the fact that you have the content of wrapper with position absolute, and that will be rendered by the browser as elements outside your wrapper.. so, it’s just like if your wrapper isn’t there, so:
This will the the browser that the wrapper is to by in an absolute position, that it is 0units from the top, and 50% of the browser’s window from the left… to center it, just pull it back half of the given width, thus -450px of margin-left.
Now, your content should be set to position:relative; to be relatively positioned regarding the wrapper’s position…
OK, here is your code (tested):