...

View Full Version : Please help centering main Div.



joecanty12345
01-14-2008, 06:48 PM
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>

VIPStephan
01-14-2008, 07:00 PM
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 (http://htmldog.com/) 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:


#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;
}

Excavator
01-14-2008, 07:02 PM
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:

#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:

<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 (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/).


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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum