473,325 Members | 2,774 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,325 software developers and data experts.

Please help w/ centering main div

4
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;&nb sp;&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>
Jan 14 '08 #1
2 2208
epots9
1,351 Expert 1GB
to center it in the middle, this will require javascript:

Expand|Select|Wrap|Line Numbers
  1. not_ie = document.getElementById && !document.all;
  2. winW = not_ie ? window.innerWidth : document.body.offsetWidth;
  3. winH = not_ie ? window.innerHeight : document.body.offsetHeight;
  4. document.getElementById(Table_01).style.top = (winH - document.getElementById(Table_01).clientHeight) / 2;
  5. document.getElementById(Table_01).style.left = (winW - document.getElementById(Table_01).clientWidth) / 2;
  6.  
Jan 14 '08 #2
In the beanstalk_interior.css file, you'll need to simplify the body {} rule to look like this:

Expand|Select|Wrap|Line Numbers
  1. body {
  2.     background-color: #FFFFFF;
  3.     padding: 0;
  4. }
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:

Expand|Select|Wrap|Line Numbers
  1. body {
  2.     text-align: center;
  3.     }
  4.  
Also in your index.html file's <style> section, REPLACE the #Table_01 block with this:

Expand|Select|Wrap|Line Numbers
  1. #Table_01 {
  2.     position:relative;
  3.     width:975px;
  4.     height:740px;
  5.     text-align:left;
  6.     margin:0 auto;
  7.     overflow: hidden;
  8.     z-index: 1;
  9. }
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.
Jan 15 '08 #3

Sign in to post your reply or Sign up for a free account.

Similar topics

1
by: David Ehmer | last post by:
Most pages at www.boatingartgallery.com.au have the main content in a div. I have centered this with margin: auto, but need to find a simple solution to ensure centering is applied in IE5.5, which...
5
by: Robert J. O'Hara | last post by:
For some time I've made use of the max-width property in CSS to cause my pages to appear as a centered block against a contrasting background. This works well in new browsers (Mozilla, etc.) and...
15
by: red | last post by:
How do I center two side by side divs ? I've been writing css pages for a while but there's one thing tha still eludes me. I can center a div with margin auto. I can place two divs side by side...
2
by: Gnolen | last post by:
Hi again, Last time my server was down(as for many others I have heard), but now it is online again! I would be really really happy if someone could take a look at my problem a bit. I now...
6
by: Simon Wigzell | last post by:
I have the following funciton that centers my website content for any size window and will center it in real time as the window is expanded or shrunk. It is activated by a onresize="CenterIt();"...
3
by: Zack Sessions | last post by:
I am using VB.NET 2003. I have read the threads concerning the problem where the FormStartPosition of CenterParent is ignored if the form is displayed with the Show method as opposed to the...
3
by: John Pote | last post by:
1. Horizontal centering a <divin browser window. The current trend seems to be to place page content in a fixed width area in the middle of the browser window. How is this achieved? If I use a...
8
by: speralta | last post by:
I'm playing around with a test page that uses a <div id="main"within the context of a body with a width of 100% to center a fixed width field on a page. For some reason, the page is not centering...
5
by: Markus Ernst | last post by:
Hello This is a test example: http://www.markusernst.ch/anthracite/ http://www.markusernst.ch/anthracite/living_divani.html After googling and experimenting for several hours, I ended up...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.