Please help w/ centering main div

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • tonsi
    New Member
    • May 2007
    • 4
    #1

    Please help w/ centering main div

    I have a page but it wont center the div. Can anyone take a look at it and help. When I try to center in the body using text-align: center; it doesn't work with the main container (called Table_01). Please help! I would be ever so greatful.

    The page is located here:
    404
    http://www.cpiequipment.com/test_site/index.html
    Rent large equipment for commercial & residential projects. Find construction equipment rentals at over 1,100 Home Depot locations, with delivery & pickup of large equipment rentals.


    Here is the code:

    <html>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Beanstal k Data</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="resources/beanstalk_inter ior.css" rel="stylesheet " type="text/css" />
    <link href="resources/beanstalk_conte nt.css" rel="stylesheet " type="text/css" />
    <link href="resources/beanstalk_nav.c ss" rel="stylesheet " type="text/css" />

    <script type="text/javascript" src="resources/beanstalk.js"></script>
    <style type="text/css">
    <!--
    body {
    text-align:center;
    }

    #Table_01 {
    position:absolu te;
    left:0px;
    top:0px;
    width:975px;
    height:740px;
    text-align:left;
    margin:0 auto;
    overflow: hidden;
    z-index: 1;
    }

    #beanstalk-cover-2-01 {
    position:absolu te;
    left:0px;
    top:24px;
    width:668px;
    height:84px;
    }

    #beanstalk-cover-2-02 {
    position:absolu te;
    left:0px;
    top:0px;
    width:626px;
    height:23px;
    background-image:url(image s/beanstalk_cover _2_02.jpg);
    background-repeat:repeat;
    }

    div.topnav {
    position:absolu te;
    left:645px;
    top:1px;
    width:331px;
    height:21px;
    z-index:1;
    }

    #beanstalk-mainnav {
    position:absolu te;
    left:0px;
    top:108px;
    width:667px;
    height:24px;
    background-image:url(image s/beanstalk_cover _2_07.jpg);
    background-repeat:no-repeat;
    }

    #beanstalk-cover-2-04 {
    position:absolu te;
    left:626px;
    top:0px;
    width:349px;
    height:24px;
    background-image:url(image s/beanstalk_cover _2_04.jpg);
    background-repeat:no-repeat;
    }

    #beanstalk-cover-2-05 {
    position:absolu te;
    left:448px;
    top:23px;
    width:38px;
    height:85px;
    }

    #beanstalk-cover-2-06 {
    position:absolu te;
    left:660px;
    top:24px;
    width:335px;
    height:107px;
    }

    #beanstalk-cover-2-08 {
    position:absolu te;
    left:667px;
    top:108px;
    width:348px;
    height:56px;
    }

    #beanstalk-cover-2-09 {
    position:absolu te;
    left:0px;
    top:132px;
    width:975px;
    height:33px;
    background-image:url(image s/beanstalk_cover _2_09.jpg);
    background-repeat:repeat;
    }

    #beanstalk-cover-2-10 {
    position:absolu te;
    left:11px;
    top:132px;
    width:656px;
    height:336px;
    }

    #beanstalk-cover-2-11 {
    position:absolu te;
    left:0px;
    top:164px;
    width:11px;
    height:546px;
    background-image:url(image s/beanstalk_cover _2_11.jpg);
    background-repeat:no-repeat;
    }

    #beanstalk-cover-2-12 {
    position:absolu te;
    left:667px;
    top:164px;
    width:334px;
    height:576px;
    }

    #beanstalk-cover-2-13 {
    position:absolu te;
    left:964px;
    top:164px;
    width:11px;
    height:546px;
    background-image:url(image s/beanstalk_cover _2_13.jpg);
    background-repeat:no-repeat;
    z-index:1;
    }

    #beanstalk-cover-2-14 {
    position:absolu te;
    left:11px;
    top:468px;
    width:9px;
    height:272px;
    }

    #beanstalk-cover-2-15 {
    position:absolu te;
    left:10px;
    top:468px;
    width:19px;
    height:224px;
    background-image:url(image s/beanstalk_cover _2_15.jpg);
    background-repeat:no-repeat;
    }

    #beanstalk-cover-2-16 {
    position:absolu te;
    left:28px;
    top:468px;
    width:2px;
    height:223px;
    background-image:url(image s/beanstalk_cover _2_16.jpg);
    background-repeat:repeat;
    }

    #beanstalk-cover-2-17 {
    position:absolu te;
    left:29px;
    top:468px;
    width:273px;
    height:224px;
    background-image:url(image s/beanstalk_cover _2_17.jpg);
    background-repeat:repeat;
    }

    div.leftbox_tit le {
    position:absolu te;
    left:29px;
    top:474px;
    width:273px;
    height:23px;
    z-index:1;
    text-align:center;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    color: #003366;
    font-style: italic;

    }

    div.leftbox_tex t {
    position:absolu te;
    left:21px;
    top:515px;
    width:291px;
    height:165px;
    z-index:2;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;

    }

    #left_image_flo at {
    position:absolu te;
    left:161px;
    top:569px;
    width:127px;
    height:101px;
    z-index:1;
    }

    #beanstalk-cover-2-18 {
    position:absolu te;
    left:65px;
    top:468px;
    width:246px;
    height:212px;
    }

    #beanstalk-cover-2-19 {
    position:absolu te;
    left:301px;
    top:468px;
    width:34px;
    height:224px;
    background-image:url(image s/beanstalk_cover _2_19.jpg);
    background-repeat:no-repeat;
    }

    #middlebox1 {
    position:absolu te;
    left:323px;
    top:467px;
    width:330px;
    height:226px;
    background-image:url(image s/box_03.jpg);
    background-repeat:no-repeat;
    }

    div.middlebox1_ title {
    position:absolu te;
    left:348px;
    top:474px;
    width:271px;
    height:23px;
    z-index:1;
    text-align:center;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    color: #003366;
    font-style: italic;

    }

    div.middlebox1_ text {
    position:absolu te;
    left:338px;
    top:515px;
    width:293px;
    height:163px;
    z-index:2;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;

    }

    #middle_image_f loat {
    position:absolu te;
    left:484px;
    top:576px;
    width:127px;
    height:101px;
    z-index:1;
    }

    #middlebox2 {
    position:absolu te;
    left:641px;
    top:467px;
    width:330px;
    height:226px;
    background-image:url(image s/box_03.jpg);
    background-repeat:no-repeat;
    }

    div.middlebox2_ title {
    position:absolu te;
    left:666px;
    top:474px;
    width:271px;
    height:23px;
    z-index:1;
    text-align:center;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    color: #003366;
    font-style: italic;
    }

    div.middlebox2_ text {
    position:absolu te;
    left:656px;
    top:515px;
    width:293px;
    height:163px;
    z-index:2;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-style: italic;

    }

    #right_image_fl oat {
    position:absolu te;
    left:821px;
    top:577px;
    width:127px;
    height:101px;
    z-index:1;
    }

    #beanstalk-cover-2-20 {
    position:absolu te;
    left:7px;
    top:165px;
    width:253px;
    height:545px;
    background-image:url(image s/beanstalk.jpg);
    background-repeat:no-repeat;
    }

    #beanstalk-cover-2-21 {
    position:absolu te;
    left:20px;
    top:696px;
    width:18px;
    height:14px;
    }

    #beanstalk-cover-2-22 {
    position:absolu te;
    left:0px;
    top:710px;
    width:975px;
    height:30px;
    background-image:url(image s/beanstalk_cover _2_22.jpg);
    background-repeat:repeat;
    }

    #beanstalk-cover-2-23 {
    position:absolu te;
    left:20px;
    top:710px;
    width:1px;
    height:30px;
    }

    #beanstalk-cover-2-24 {
    position:absolu te;
    left:21px;
    top:710px;
    width:50px;
    height:30px;
    }

    #beanstalk-cover-2-25 {
    position:absolu te;
    left:271px;
    top:166px;
    width:519px;
    height:288px;
    }

    #beanstalk-cover-2-26 {
    position:absolu te;
    left:975px;
    top:710px;
    width:14px;
    height:30px;
    }
    .style4 {
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    color: #003366;
    font-style: italic;
    }
    .style5 {font-size: 36px; color: #003366; font-family: Arial, Helvetica, sans-serif;}
    .style6 {
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    }
    .style13 {font-size: 36px; color: #003366; font-family: Arial, Helvetica, sans-serif; font-weight: bold; }

    -->
    </style>
    </head>
    <body>
    <div id="Table_01">
    <div id="beanstalk-cover-2-01"><img src="images/Logo.jpg" alt="Beanstalk Data" width="365" height="70"></div>
    <div class="topnav"> <a href="index.htm " class="topNavLi nk">HOME</a>|<a href="index.htm " class="topNavLi nk">CONTACT US</a>|<a href="index.htm " class="topNavLi nk">REQUEST DEMO</a>|<a href="index.htm " class="topNavLi nk"> SITE MAP </a> </div>
    <div id="beanstalk-cover-2-02"></div>
    <div id="beanstalk-cover-2-04"></div>
    <div id="beanstalk-cover-2-06">
    <p>&nbsp;</p>
    <blockquote>
    <p class="style4"> <strong>Call Now:</strong><br />
    <span class="style13" >(704) 529-5044</span></p>
    </blockquote>
    </div>
    <div id="beanstalk-mainnav"></div>
    <div id="mainNav">
    <div id="navholder" >
    <ul id="nav">
    <li ><a href="#" ><br />
    <span class="moveover ">&nbsp;&nbsp;A bout Beanstalk Data</span></a>
    <li><a href="#"><br /><span class="moveover ">&nbsp;&nbsp;& nbsp;Beanstalk Data Tools</span></a>
    <ul>
    <li><a href="#">&nbsp; &nbsp;&nbsp;Con tact Management</a></li>
    <li><a href="#">&nbsp; &nbsp;&nbsp;Dir ect Mail</a></li>
    <li><a href="#">&nbsp; &nbsp;&nbsp;Ema il Marketing</a></li>
    <li><a href="#">&nbsp; &nbsp;&nbsp;Per sonalized URL's</a></li>
    <li><a href="#">&nbsp; &nbsp;&nbsp;Tra cking</a></li>
    <li><a href="#">&nbsp; &nbsp;&nbsp;Sch eduling</a></li>
    </ul>
    </li>
    <li ><a href="#" ><br /><span class="moveover ">&nbsp;&nbsp;& nbsp;&nbsp;How Beanstalk Works</span></a>
    </li>
    <li ><a href="#" ><br /><span class="moveover ">&nbsp;&nbsp;& nbsp;&nbsp;&nbs p;&nbsp;&nbsp;& nbsp;How To Get Started</span></a>
    </li>
    </ul>
    <!--End Nav Holder --> </div></div>
    <div id="beanstalk-cover-2-09"></div>
    <div id="beanstalk-cover-2-11"></div>
    <div id="beanstalk-cover-2-13"></div>
    <div id="beanstalk-cover-2-20"></div>
    <div id="beanstalk-cover-2-15"></div>
    <div id="beanstalk-cover-2-16"></div>
    <div class="leftbox_ title">How Beanstalk Can Help. </div>
    <div class="leftbox_ text">
    <p>Isn&rsquo; t it nice when something important happens in your business and you don&rsquo;t have to be involved with every step of the process? Beanstalk gets you there.</p>
    <p><br />
    <br />
    <br />
    Click here to read more...</p>
    </div>
    <div id="left_image_ float"><img src="images/hand_small.jpg" alt="Hand" /></div>
    <div id="beanstalk-cover-2-17"></div>
    <div id="beanstalk-cover-2-19"></div>
    <div class="middlebo x1_title">Tools for Success! </div>
    <div class="middlebo x1_text">
    <p>Contact Management, Direct Mail, Personalized URL&rsquo;s, Email Marketing, and much more! Beanstalk provides you the tools you need to run a successful marketing campaign.</p>
    <p><br />
    <br />
    Click here to read more... </p>
    </div>
    <div id="middle_imag e_float"> <img src="images/tools.jpg" alt="Beanstalk Tools" width="144" height="99" /></div>
    <div id="middlebox1" ></div>
    <div class="middlebo x2_title">Reque st A Demonstration. </div>
    <div class="middlebo x2_text">
    <p>Don't waste another minute! Fill out our online request and one of our experienced representatives will contact you to setup a FREE Demonstration. Let us shoe you how beanstalk can help YOUR business. </p>
    <p><br />
    <br />
    Click here for your FREE Demo...</p>
    </div>
    <div id="right_image _float"><img src="images/laptop.jpg" alt="request demonstration" width="120" height="99" /></div>
    <div id="middlebox2" ></div>
    <div id="beanstalk-cover-2-22"></div>
    <div id="beanstalk-cover-2-25">
    <table width="516" height="272" border="0">
    <tr>
    <td height="45" colspan="3" valign="top" class="style5"> Marketing Automation...</td>
    </tr>
    <tr>
    <td height="28" colspan="3" valign="top"><d iv align="right" class="style4"> What is it and why should you care. </div></td>
    </tr>
    <tr>
    <td colspan="3" valign="top"><p class="style6"> A revolution is afoot! The complexity of today&rsquo;s marketing and the increase of marketing clutter has created a demand for innovative new tools to amplify the value of your marketing budget. It&rsquo;s not enough that these tools work - they must take advantage of today&rsquo;s technology for maintaining data to eliminate waste and deliver relevant messages to the proper audience.</p>
    <p class="style6"> Beanstalk Data is the blending marketing soluions combined with process improvement to increase marketing effectiveness. Beanstalk Data will actually decrease your marketing budget by eliminating costly manual transactions and at the same time increase your return on marketing investment.</p></td>
    </tr>
    </table>
    </div>
    </div>
    </body>
    </html>
    Tags: None
    • epots9
      Recognized Expert Top Contributor
      • May 2007
      • 1352
      #2
      to center it in the middle, this will require javascript:

      [code=javascript]
      not_ie = document.getEle mentById && !document.all;
      winW = not_ie ? window.innerWid th : document.body.o ffsetWidth;
      winH = not_ie ? window.innerHei ght : document.body.o ffsetHeight;
      document.getEle mentById(Table_ 01).style.top = (winH - document.getEle mentById(Table_ 01).clientHeigh t) / 2;
      document.getEle mentById(Table_ 01).style.left = (winW - document.getEle mentById(Table_ 01).clientWidth ) / 2;
      [/code]

        Comment

        • Valacar
          New Member
          • Jan 2008
          • 1
          #3
          In the beanstalk_inter ior.css file, you'll need to simplify the body {} rule to look like this:

          Code:
          body {
	background-color: #FFFFFF;
	padding: 0;
}
          The margin and width you had before were screwing things up.

          Then in your index.html file's <style> section, REMOVE this block, as it's not needed:

          Code:
          body {
	text-align: center;
	}
          Also in your index.html file's <style> section, REPLACE the #Table_01 block with this:

          Code:
          #Table_01 {
	position:relative;
	width:975px;
	height:740px;
	text-align:left;
	margin:0 auto;
	overflow: hidden;
	z-index: 1;
}
          You were absolutely positioning it so the whole page was moved the top left of the page AND you were trying to center the page with "margin: 0 auto" which totally conflicts :)

          What I did was change it to relative positioning, and I removed the "top" and "left" declarations. This allows all those other absolutely positioned elements to be positioned relative to the #Table_01 div.

          Note: I downloaded your page to my computer without images, and made the corrections, so I can't be sure this will look totally correct when images are displayed.

          Hope that helps.

            Comment

            Previous template Next
            Working...