html - Why won't my page center align?! -
this first question on stack overflow, i've pretty much learnt know great website i'm hoping you'll able help....
i have simple homepage refuses center align. it's background images , odd bit of text wow slider image slider in middle (free version). i've tried setting margin 0 auto on container div (table_01), body, seperate container div (now deleted in frustration) , various other things. div-align:center won't work , i've twiddled until fingers bleed no success. html whole page looks 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> qualifications , whatnots can go in here, or if you'd prefer can set tagline "all aspects of construction , landscaping tackled"....</p> </div> <div id="commentbar"> <p class="comslide">scrolling comments go here (they scroll every 20 seconds customers can see how great buildings are....)</p> </div> <div id="home-04_" class="topbar"> <a href="change home link">home</a></div> <div id="home-05_" class="topbar"> <a href="change 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 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 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 , 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 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 contain "add comment" thing. every time adds comment email asking if want appear on top bit of 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> , 1 basic "about me" box. please write basic description of , services offer can stick in here. record, 2 little trucks link facebook , twitter accounts (i'll create lrc business relationship both) , if users click envelope in middle mail service programme pop email adress in send box. there's white outline on them atm that'll gone photoshop works 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 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 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 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 web slices --> </body> </html> and stylesheet 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 formats slider- i've tried unlinking see if page center align no joy. ideas? i'll add together code other stylesheet if need it.
thanks
nye
working demo on js bin.
the next rule needs changed:
#table_01 { position: relative; width:1020px; height:920px; z-index:1; margin:0 auto; padding:0; text-align:center; } html center-align
No comments:
Post a Comment