0

This is my first question on Stack Overflow, but I've pretty much learnt everything I know from this great website so I'm hoping you'll be able to help....

I have a very simple homepage which simply refuses to center align. It's basically just background images and the odd bit of text with a Wow Slider image slider in the middle (free version). I've tried setting margin to 0 auto on a container div (table_01), body, a seperate container div (now deleted in frustration) and various other things. Div-align:center won't work and I've twiddled about until my fingers bleed with no success. The html for the whole page looks like this:

    <!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>
<title>house</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="homestyle.css"/>
<link href="http://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet"     type="text/css" />





<!-- Start WOWSlider.com HEAD section -->
    <link rel="stylesheet" type="text/css" href="engine1/style.css" media="screen" />
    <script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->

</head>


<body>



<div id="Table_01">
    <div id="home-01_">
      <img id="home_01" src="images/home_01.png" width="255" height="194" alt="" />
    </div>
  <div id="home-02_">
        <p> Your qualifications and whatnots can go in here, or if you'd prefer I     can put a tagline like "All aspects of construction and landscaping tackled"....</p>
  </div>
  <div id="commentbar">
    <p class="comslide">Scrolling comments will go here (they scroll every twenty     seconds so that customers can see how great your buildings are....)</p> </div>


  <div id="home-04_" class="topbar">

        <a href="CHANGE THIS TO HOME LINK">Home</a></div>


  <div id="home-05_" class="topbar">
        <a href="CHANGE THIS TO SERVCIES LINK">Services</a>
  </div>
    <div id="home-06_">
        <img id="home_06" src="images/home_06.png" width="2" height="70" alt="" />
    </div>
  <div id="home-07_" class="topbar">
    <a href="CHANGE THIS TO GALLERY LINK">Gallery</a>
  </div>
    <div id="home-08_">
        <img id="home_08" src="images/home_08.png" width="1" height="70" alt="" />
    </div>
  <div id="home-09_"  class="topbar">
         <a href="CHANGE THIS TO CONTACT LINK">Contact</a>
  </div>


    <div id="home-10_">
        <img id="home_10" src="images/home_10.png" width="2" height="726" alt="" />
    </div>
    <div id="home-11_">
        <img id="home_11" src="images/home_11.png" width="551" height="28" alt=""     />
    </div>
    <div id="home-12_">
        <img id="home_12" src="images/home_12.png" width="239" height="28" alt=""     />
    </div>
    <div id="home-13_">
        <img id="home_13" src="images/home_13.png" width="225" height="28"     alt="" />
    </div>
    <div id="home-14_">
        <img id="home_14" src="images/home_14.png" width="168" height="76" alt=""     />
    </div>





<div id="home-15_"><!-- Start WOWSlider.com BODY section id=wowslider-container1 -->
    <div id="wowslider-container1">
    <div class="ws_images"><ul>
<li><img src="data1/images/raised_bed.jpg" alt="raised bed" title="raised bed"     id="wows1_0"/></li>
<li><img src="data1/images/steps.jpg" alt="steps" title="steps" id="wows1_1"/></li>
<li><img src="data1/images/fence.jpg" alt="fence" title="fence" id="wows1_2"/></li>
<li><img src="data1/images/extension.jpg" alt="extension" title="extension"     id="wows1_3"/></li>
<li><img src="data1/images/garden_wall.jpg" alt="garden_wall" title="garden_wall"     id="wows1_4"/></li>
<li><img src="data1/images/wall.jpg" alt="wall" title="wall" id="wows1_5"/></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="Raised Bed"><img src="data1/tooltips/raised_bed.jpg" alt="Raised     Bed"/>1</a>
<a href="#" title="Steps and Paving"><img src="data1/tooltips/steps.jpg"     alt="steps"/>2</a>
<a href="#" title="Fencing"><img src="data1/tooltips/fence.jpg" alt="fence"/>3</a>
<a href="#" title="Extensions"><img src="data1/tooltips/extension.jpg"     alt="extension"/>4</a>
<a href="#" title="Garden walls"><img src="data1/tooltips/garden_wall.jpg"     alt="garden_wall"/>5</a>
<a href="#" title="and all forms of Bricklaying"><img src="data1/tooltips/wall.jpg" alt="wall"/>6</a>
</div></div>


    </div>
    <script type="text/javascript" src="engine1/wowslider.js"></script>
    <script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section --></div>

    <div id="home-16_">
        <img id="home_16" src="images/home_16.png" width="168" height="76" alt=""     />
    </div>

    <div id="home-17_">
        <img id="home_17" src="images/home_17.png" width="57" height="580" alt="" />
    </div>
    <div id="home-18_">
        <img id="home_18" src="images/home_18.png" width="56" height="57" alt="" />
    </div>
    <div id="home-19_">
        <img id="home_19" src="images/home_19.png" width="55" height="184" alt="" />    
    </div>
    <div id="home-20_">
        <img id="home_20" src="images/home_20.png" width="54" height="184" alt="" />
    </div>
    <div id="home-21_">
        <img id="home_21" src="images/home_21.png" width="60" height="57" alt="" />
    </div>
    <div id="home-22_">
        <img id="home_22" src="images/home_22.png" width="54" height="580" alt="" />    
    </div>
    <div id="home-23_">
        <img id="home_23" src="images/home_23.png" width="56" height="127" alt="" />
    </div>
    <div id="home-24_">
        <img id="home_24" src="images/home_24.png" width="60" height="127" alt="" />    
    </div>
    <div id="home-25_">
        <img id="home_25" src="images/home_25.png" width="682" height="47" alt="" />
    </div>
    <div id="home-26_">
        <img id="home_26" src="images/home_26.png" width="28" height="396" alt="" />    
        </div>
        <div id="home-27_"><p>This box will contain an "add a comment" thing. Every time someone adds a comment you will get an email asking you if you want it to appear on the top bit of the page.</p></div>

    <div id="home-28_">
        <img id="home_28" src="images/home_28.png" width="184" height="220" alt="" />
    </div>
    <div id="home-29_"><p> And this one is your basic "About me" box. Please write up a basic description of who you are and the services you offer so that I can stick it in here. For the record, the two little trucks link to your facebook and twitter accounts (I'll make you an LRC account for both) and if users click the envelope in the middle then their mail program will pop up with your email adress already in the send to box. There's a white outline on them atm but that'll be gone as soon as my photoshop works properly again.</p> </div>

    <div id="home-30_">
        <img id="home_30" src="images/home_30.png" width="29" height="296" alt="" />
    </div>
    <div id="home-31_">
        <img id="home_31" src="images/home_31.png" width="298" height="211" alt="" />
    </div>
    <div id="home-32_">
        <img id="home_32" src="images/home_32.png" width="42" height="176" alt="" />    
    </div>
    <div id="home-33_">
    <a href="mailto:">
        <img id="mail" src="images/Email.png" width="145" height="158" alt="Click to email" /></a>
    </div>
    <div id="home-34_">
        <img id="home_34" src="images/home_34.png" width="365" height="35" alt="" />
    </div>
    <div id="home-35_">
        <img id="home_35" src="images/home_35.png" width="365" height="41" alt="" />    
    </div>
    <div id="home-36_">
        <img id="home_36" src="images/home_36.png" width="110" height="100" alt="" />
    </div>
    <div id="home-37_">
    <a href="CHANGE THIS TO FB ADDRESS" target="blank">
        <img src="images/truck_37.png" width="109" height="73" alt="" /></a>
    </div>
    <div id="home-38_">
        <img id="home_38" src="images/home_38.png" width="59" height="100" alt="" />
    </div>
    <div id="home-39_">
    <a href="CHANGE THIS TO FB ADDRESS" target="blank">
        <img src="images/truck_39.png" alt="" />
      </a>
    </div>
    <div id="home-40_">
        <img id="home_40" src="images/home_40.png" width="116" height="29" alt="" />
    </div>
    <div id="home-41_">
        <img id="home_41" src="images/home_41.png" width="109" height="27" alt="" />
    </div>
    <div id="home-42_">
        <img id="home_42" src="images/home_42.png" width="145" height="18" alt="" />
    </div>
</div id="Table_01">


<!-- End Save for Web Slices -->
</body>
</html>

and the stylesheet is like this:

       @charset "utf-8";
  /* CSS Document */


body {
    font-family: 'Roboto Condensed', sans-serif;

}



a:link {
    color:#db6748;
    text-decoration:none;
    font-size:18px  
    font-family: 'Roboto Condensed', sans-serif;
}  

a:visited {
color:#8f3821;
}

#Table_01 {
position:absolute;
left:0px;
top:0px;
bottom:0px;
width:1020px;
height:920px;
z-index:1;
margin:0 auto;
padding:0;
text-align:center;
}

#home-01_ {
position:absolute;
left:0px;
top:0px;
width:255px;
height:194px;
}

#home-02_ {
position:absolute;
left:255px;
top:0px;
width:765px;
height:99px;
background-image:url(images/home_02.png);   
}

#commentbar {
position:absolute;
left:255px;
top:99px;
width:765px;
height:95px;
border-top:dotted;
border-color:#666;
background-image:url(images/home_03.png);
}

#home-04_ {
position:absolute;
left:0px;
top:194px;
width:269px;
height:42px;
background-image:url(images/home_04.png);
}

.topbar {
font-size:24px;
border-top:dotted;
border-color:#333;
}


.comslide{
position:absolute;
vertical-align:middle;;
color:#CCC;
}

.topbar a:link {color:#d5d5d5;}
.topbar a:hover { color:#999;}

#home-05_ {
position:absolute;
left:269px;
top:194px;
width:282px;
height:42px;
background-image:url(images/home_05.png);
}

#home-06_ {
position:absolute;
left:551px;
top:194px;
width:2px;
height:70px;
}

#home-07_ {
position:absolute;
left:553px;
top:194px;
width:239px;
height:42px;
background-image:url(images/home_07.png)
}

#home-08_ {
position:absolute;
left:792px;
top:194px;
width:1px;
height:70px;
}

#home-09_ {
position:absolute;
left:793px;
top:194px;
width:225px;
height:42px;
background-image:url(images/home_09.png)
}

#home-10_ {
position:absolute;
left:1018px;
top:194px;
width:2px;
height:726px;
}

#home-11_ {
position:absolute;
left:0px;
top:236px;
width:551px;
height:28px;
}

#home-12_ {
position:absolute;
left:553px;
top:236px;
width:239px;
height:28px;
}

#home-13_ {
position:absolute;
left:793px;
top:236px;
width:225px;
height:28px;
}

#home-14_ {
position:absolute;
left:0px;
top:264px;
width:168px;
height:76px;
}

#home-15_ {
position:absolute;
left:168px;
top:264px;
width:682px;
height:213px;
z-index:1;
background-image:url(images/home_15.png);
}

#home-16_ {
position:absolute;
left:850px;
top:264px;
width:168px;
height:76px;
}

#home-17_ {
position:absolute;
left:0px;
top:340px;
width:57px;
height:580px;
}

#home-18_ {
position:absolute;
left:57px;
top:340px;
width:56px;
height:57px;
}

#home-19_ {
position:absolute;
left:113px;
top:340px;
width:55px;
height:184px;
}

#home-20_ {
position:absolute;
left:850px;
top:340px;
width:54px;
height:184px;
}

#home-21_ {
position:absolute;
left:904px;
top:340px;
width:60px;
height:57px;
}

#home-22_ {
position:absolute;
left:964px;
top:340px;
width:54px;
height:580px;
}

#home-23_ {
position:absolute;
left:57px;
top:397px;
width:56px;
height:127px;
}

#home-24_ {
position:absolute;
left:904px;
top:397px;
width:60px;
height:127px;
}

#home-25_ {
position:absolute;
left:168px;
top:477px;
width:682px;
height:47px;
}

#home-26_ {
position:absolute;
left:57px;
top:524px;
width:28px;
height:396px;
}

#home-27_ {
position:absolute;
left:85px;
top:524px;
width:298px;
height:185px;
background-image:url(images/home_27.png);
}

#home-28_ {
position:absolute;
left:383px;
top:524px;
width:184px;
height:220px;
}

#home-29_ {
position: absolute;
left: 568px;
top: 525px;
width: 368px;
height: 220px;
background-image:url(images/home_29.png);

}

#home-30_ {
position:absolute;
left:935px;
top:524px;
width:29px;
height:296px;
}

#home-31_ {
position:absolute;
left:85px;
top:709px;
width:298px;
height:211px;
}

#home-32_ {
position:absolute;
left:383px;
top:744px;
width:42px;
height:176px;
}

#home-33_ {
position:absolute;
left:425px;
top:744px;
width:145px;
height:158px;
background-image:url(images/home_33.png)

}

#home-34_ {
position:absolute;
left:570px;
top:744px;
width:365px;
height:35px;
}

#home-35_ {
position:absolute;
left:570px;
top:779px;
width:365px;
height:41px;
}

#home-36_ {
position:absolute;
left:570px;
top:820px;
width:110px;
height:100px;
}

#home-37_ {
position:absolute;
left:680px;
top:820px;
width:109px;
height:73px;
background-image:url(images/home_37.png);
}

#home-38_ {
position:absolute;
left:789px;
top:820px;
width:59px;
height:100px;
}

#home-39_ {
position:absolute;
left:848px;
top:820px;
width:116px;
height:71px;
background-image:url(images/home_39.png);
}

#home-40_ {
position:absolute;
left:848px;
top:891px;
width:116px;
height:29px;
}

#home-41_ {
position:absolute;
left:680px;
top:893px;
width:109px;
height:27px;
}

#home-42_ {
position:absolute;
left:425px;
top:902px;
width:145px;
height:18px;
}

#higher {

position:absolute;
top: 0px;
width:682px;
height:213px;

}















#page-01_ {
position:absolute;
left:0px;
top:0px;
width:255px;
height:194px;
}

#page-02_ {
position:absolute;
left:255px;
top:0px;
width:765px;
height:99px;
}

#page-03_ {
position:absolute;
left:255px;
top:99px;
width:765px;
height:95px;
}

#page-04_ {
position:absolute;
left:0px;
top:194px;
width:269px;
height:42px;
}

#page-05_ {
position:absolute;
left:269px;
top:194px;
width:282px;
height:42px;
}

#page-06_ {
position:absolute;
left:551px;
top:194px;
width:2px;
height:75px;
}

#page-07_ {
position:absolute;
left:553px;
top:194px;
width:239px;
height:42px;
}

#page-08_ {
position:absolute;
left:792px;
top:194px;
width:1px;
height:75px;
}

#page-09_ {
position:absolute;
left:793px;
top:194px;
width:225px;
height:42px;
}

#page-10_ {
position:absolute;
left:1018px;
top:194px;
width:2px;
height:726px;
}

#page-11_ {
position:absolute;
left:0px;
top:236px;
width:551px;
height:33px;
}

#page-12_ {
position:absolute;
left:553px;
top:236px;
width:239px;
height:33px;
}

#page-13_ {
position:absolute;
left:793px;
top:236px;
width:225px;
height:33px;
}

#page-14_ {
position:absolute;
left:0px;
top:269px;
width:57px;
height:651px;
}

#page-15_ {
position:absolute;
left:57px;
top:269px;
width:907px;
height:455px;
}

#page-16_ {
position:absolute;
left:964px;
top:269px;
width:54px;
height:651px;
}

#page-17_ {
position:absolute;
left:57px;
top:724px;
width:907px;
height:20px;
}

#page-18_ {
position:absolute;
left:57px;
top:744px;
width:368px;
height:176px;
}

#Email_ {
position:absolute;
left:425px;
top:744px;
width:145px;
height:158px;
background-image:url(images/Emailbg.png);
}

#page-20_ {
position:absolute;
left:570px;
top:744px;
width:394px;
height:76px;
}

#page-21_ {
position:absolute;
left:570px;
top:820px;
width:110px;
height:100px;
}

#page-22_ {
position:absolute;
left:680px;
top:820px;
width:109px;
height:73px;
}

#page-23_ {
position:absolute;
left:789px;
top:820px;
width:59px;
height:100px;
}

#page-24_ {
position:absolute;
left:848px;
top:820px;
width:116px;
height:71px;
}

#page-25_ {
position:absolute;
left:848px;
top:891px;
width:116px;
height:29px;
}

#page-26_ {
position:absolute;
left:680px;
top:893px;
width:109px;
height:27px;
}

#page-27_ {
position:absolute;
left:425px;
top:902px;
width:145px;
height:18px;
}

The other stylesheet just formats the slider- I've tried unlinking it to see if the page will center align then but no joy. Any ideas? I'll add the code for the other stylesheet if you need it.

Thanks

Nye

Makrobe Dnb
  • 41
  • 1
  • 5
  • You need to thin this giant gob of code down to a minimal example of your page structure that clearly shows the problem. Put that in a a fiddle. Here's a start. http://jsfiddle.net/wgpfT/ – isherwood Feb 10 '13 at 18:31
  • Also, the fact that you have that long list of absolutely-positioned elements would seem to indicate that your approach to page layout is bad. Consider using a grid system instead. – isherwood Feb 10 '13 at 18:35

3 Answers3

3

Working demo on JS Bin.

The following rule needs to be changed:

#Table_01 {
    position: relative;
    width:1020px;
    height:920px;
    z-index:1;
    margin:0 auto;
    padding:0;
    text-align:center;
}
Jeff Miller
  • 2,405
  • 1
  • 26
  • 41
1

Your #Table_01 will never align center because it's position is set to absolute with a left and top of 0. Removing these values will be a start...

endyourif
  • 2,186
  • 19
  • 33
0

You need to remove every position: absolute , left: *px and top:*px attributes, then adjust width: of #Table_01. Is this created by some generator?? This code looks very ugly...

OskarZ
  • 1