Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Please help 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:
    http://www.cpiequipment.com/test_site/index.html

    Here is the code:

    <html>
    <!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Beanstalk Data</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="resources/beanstalk_interior.css" rel="stylesheet" type="text/css" />
    <link href="resources/beanstalk_content.css" rel="stylesheet" type="text/css" />
    <link href="resources/beanstalk_nav.css" 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:absolute;
    left:0px;
    top:0px;
    width:975px;
    height:740px;
    text-align:left;
    margin:0 auto;
    overflow: hidden;
    z-index: 1;
    }

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

    #beanstalk-cover-2-02 {
    position:absolute;
    left:0px;
    top:0px;
    width:626px;
    height:23px;
    background-image:url(images/beanstalk_cover_2_02.jpg);
    background-repeat:repeat;
    }

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

    #beanstalk-mainnav {
    position:absolute;
    left:0px;
    top:108px;
    width:667px;
    height:24px;
    background-image:url(images/beanstalk_cover_2_07.jpg);
    background-repeat:no-repeat;
    }

    #beanstalk-cover-2-04 {
    position:absolute;
    left:626px;
    top:0px;
    width:349px;
    height:24px;
    background-image:url(images/beanstalk_cover_2_04.jpg);
    background-repeat:no-repeat;
    }

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

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

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

    #beanstalk-cover-2-09 {
    position:absolute;
    left:0px;
    top:132px;
    width:975px;
    height:33px;
    background-image:url(images/beanstalk_cover_2_09.jpg);
    background-repeat:repeat;
    }

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

    #beanstalk-cover-2-11 {
    position:absolute;
    left:0px;
    top:164px;
    width:11px;
    height:546px;
    background-image:url(images/beanstalk_cover_2_11.jpg);
    background-repeat:no-repeat;
    }

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

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

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

    #beanstalk-cover-2-15 {
    position:absolute;
    left:10px;
    top:468px;
    width:19px;
    height:224px;
    background-image:url(images/beanstalk_cover_2_15.jpg);
    background-repeat:no-repeat;
    }

    #beanstalk-cover-2-16 {
    position:absolute;
    left:28px;
    top:468px;
    width:2px;
    height:223px;
    background-image:url(images/beanstalk_cover_2_16.jpg);
    background-repeat:repeat;
    }

    #beanstalk-cover-2-17 {
    position:absolute;
    left:29px;
    top:468px;
    width:273px;
    height:224px;
    background-image:url(images/beanstalk_cover_2_17.jpg);
    background-repeat:repeat;
    }

    div.leftbox_title {
    position:absolute;
    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_text {
    position:absolute;
    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_float {
    position:absolute;
    left:161px;
    top:569px;
    width:127px;
    height:101px;
    z-index:1;
    }

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

    #beanstalk-cover-2-19 {
    position:absolute;
    left:301px;
    top:468px;
    width:34px;
    height:224px;
    background-image:url(images/beanstalk_cover_2_19.jpg);
    background-repeat:no-repeat;
    }

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

    div.middlebox1_title {
    position:absolute;
    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:absolute;
    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_float {
    position:absolute;
    left:484px;
    top:576px;
    width:127px;
    height:101px;
    z-index:1;
    }

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

    div.middlebox2_title {
    position:absolute;
    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:absolute;
    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_float {
    position:absolute;
    left:821px;
    top:577px;
    width:127px;
    height:101px;
    z-index:1;
    }

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

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

    #beanstalk-cover-2-22 {
    position:absolute;
    left:0px;
    top:710px;
    width:975px;
    height:30px;
    background-image:url(images/beanstalk_cover_2_22.jpg);
    background-repeat:repeat;
    }

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

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

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

    #beanstalk-cover-2-26 {
    position:absolute;
    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="topNavLink">HOME</a>|<a href="index.htm" class="topNavLink">CONTACT US</a>|<a href="index.htm" class="topNavLink">REQUEST DEMO</a>|<a href="index.htm" class="topNavLink"> 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;About 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;Contact Management</a></li>
    <li><a href="#">&nbsp;&nbsp;&nbsp;Direct Mail</a></li>
    <li><a href="#">&nbsp;&nbsp;&nbsp;Email Marketing</a></li>
    <li><a href="#">&nbsp;&nbsp;&nbsp;Personalized URL's</a></li>
    <li><a href="#">&nbsp;&nbsp;&nbsp;Tracking</a></li>
    <li><a href="#">&nbsp;&nbsp;&nbsp;Scheduling</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;&nbsp;&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="middlebox1_title">Tools for Success! </div>
    <div class="middlebox1_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_image_float"> <img src="images/tools.jpg" alt="Beanstalk Tools" width="144" height="99" /></div>
    <div id="middlebox1"></div>
    <div class="middlebox2_title">Request A Demonstration. </div>
    <div class="middlebox2_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"><div 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>

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    Yeah, of course text-align doesn’t center the page because text-align is only for text and inline elements. If you don’t know what that is you should learn the basics of web development before developing websites because you seem to be trying to do a pretty advanced layout without really knowing what you’re actually doing.

    One rule of thumb is that absolute positioning is almost never needed to achieve an overall layout. It can be useful but only if you know the caveats of this method. You seem to be using Dreamweaver’s design mode, don’t ya? I advise you to learn the rules and handcoding your sites because that will save you a lot of work and headaches later on.

    For now, centering an absolutely positioned site is possible, too, but not too feasible. You are positioning your #Table_01 absolutely at the top left so how do you expect it to be centered in any way? Try this instead:
    Code:
    #Table_01 {
    position:absolute;
    left: 50&#37;;
    top: 50%;
    margin-left: -487px;
    margin-top: -370px;
    width:975px;
    height:740px;
    text-align:left;
    overflow: hidden;
    z-index: 1;
    }

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello joecanty12345,
    When you absolutely positioned your #Table_01 left:0;top:0; it's stuck over there to the side. Your margin:0 auto; is conflicting with that.

    Try this instead:
    Code:
    #Table_01 {
    	width:975px;
    	height:740px;
    	text-align:left;
    	margin:0 auto;
    position: relative;
    	overflow: hidden;
    }
    and in your markup, delete this bit in red:
    Code:
    <html>
    <!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Beanstalk Data</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="resources/beanstalk_interior.css" rel="stylesheet" type="text/css" />
    <link href="resources/beanstalk_content.css" rel="stylesheet" type="text/css" />
    <link href="resources/beanstalk_nav.css" rel="stylesheet" type="text/css" />
    And have a look at this article about absolute positioning.


    ps - the code tags will wrap your code in a little scroll box so you don't fill up the whole page with your code. It's the # icon at the top of the reply/new message window.
    Last edited by Excavator; 01-14-2008 at 07:05 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •