Centering Problem - HTML Forums

bwtobias · 02-19-2012, 12:32 PM

Hello all,

I know this has been discussed before and I have tried various solutions; however, I can't seem to get it right on this page: I need to center the content rather than have it left aligned. What do I need to adjust to make it so? The url is: www.theobp.com. Index code is below. Thank you all for your input.

bt

HTML Code:

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-28942162-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script><html>
<head>
<title>The Outreach Bible Project</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="780" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="39"><img src="images/index_01.gif" width="39" height="57" alt=""></td>
    <td width="139"><a href="index.html"><img src="images/index_02.gif" alt="" width="139" height="57" border="0"></a></td>
    <td width="136"><a href="http://e-giving.org/outreachbibleproject"><img src="images/index_03.gif" alt="" width="136" height="57" border="0"></a></td>
    <td width="162"><a href="Director.html"><img src="images/index_04.gif" alt="" width="162" height="57" border="0"></a></td>
    <td width="138"><a href="#"><img src="images/index_05.gif" alt="" width="138" height="57" border="0"></a></td>
    <td width="166"><a href="contactus.html"><img src="images/index_06.gif" alt="" width="166" height="57" border="0"></a></td>
  </tr>
</table>
<table width="780" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="2"><img src="images/index_07.jpg" width="780" height="110" alt=""></td>
  </tr>
  <tr>
    <td width="198" valign="top" bgcolor="#222A2D"><table width="198" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="198"><img src="images/index_08.gif" width="198" height="16" alt=""></td>
      </tr>
      <tr>
        <td><a href="About Us.html"><img src="images/index_10.gif" alt="" width="198" height="24" border="0"></a></td>
      </tr>
      <tr>
        <td><a href="#"><img src="images/index_11.gif" alt="" width="198" height="26" border="0"></a></td>
      </tr>
      <tr>
        <td><a href="application.html"><img src="images/index_12.gif" alt="" width="198" height="24" border="0"></a></td>
      </tr>
      <tr>
        <td><a href="CurrentProjects.html"><img src="images/index_13.gif" alt="" width="198" height="25" border="0"></a></td>
      </tr>
      <tr>
        <td><a href="History.html"><img src="images/index_14.gif" alt="" width="198" height="24" border="0"></a></td>
      </tr>
      <tr>
        <td><a href="contactus.html"><img src="images/index_15.gif" alt="" width="198" height="23" border="0"></a></td>
      </tr>
    </table></td>
    <td width="582"><img src="images/index_09.jpg" width="582" height="186" alt=""></td>
  </tr>
</table>
<table width="780" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="198" valign="top" bgcolor="#1A2020"><table width="100%" border="0" cellspacing="0" cellpadding="10">
      <tr>
        <td><img src="images/index_22.gif" width="165" height="33" alt=""></td>
      </tr>
      <tr>
        <td><p>The Outreach Bible Project <br>
          is a ministry of Hillcrest<br>
          Baptist Church.  We take the Word of God to a lost and dying world.
          </p>
          <table width="95%" height="20" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td align="right">&bull; <a href="About Us.html" class="blye-text-regular">learn more...</a></td>
            </tr>
    </table></td>
      </tr>
      <tr>
        <td><img src="images/index_40.gif" width="165" height="31" alt=""></td>
      </tr>
      <tr>
        <td>Learn more about our current<br>
          projects that the Outreach<br>
          Bible Project is participating<br>
          in.
          <table width="100%" height="20" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td align="right">&bull; <a href="CurrentProjects.html" class="blye-text-regular">learn more...</a></td>
            </tr>
          </table></td>
      </tr>
    </table></td>
    <td width="582" valign="top" bgcolor="#222A2D"><table width="100%" border="0" cellspacing="0" cellpadding="10">
      <tr>
        <td><img src="images/index_19.gif" width="346" height="27" alt=""></td>
      </tr>
      <tr>
        <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="22%" valign="top"><img src="images/2010 OBP Week1 Group.JPG" width="114" height="94" alt=""></td>
            <td width="78%" valign="top"><p><b>We motivate the average Christian to get out of their seat and into the street.<br></b>Outreach Bible Project &nbsp;&ndash; It&rsquo;s a short term Missions opportunity where we take volunteers from all over the USA and abroad to pass out Bibles, tracts, and evangelism pins to the visitors who have come to the Olympics. </p>
              <p>&nbsp;We encourage and train the average Christian to become an above average soul winner. &nbsp;With our uniquely designed evangelism pins we are able to engage people in one-on-one conversations, share the plan of salvation, and ultimately try to lead them to Christ. </p>
              <p>&nbsp;</p></td>
          </tr>
        </table></td>
      </tr>
    </table>
      <table width="582" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="582"><img src="images/index_31.gif" width="582" height="14" alt=""></td>
        </tr>
        <tr>
          <td bgcolor="#154663"><table width="100%" border="0" cellspacing="0" cellpadding="10">
            <tr>
              <td width="20%" rowspan="2" valign="top"><img src="images/David & Toni.png" width="114" height="94" alt=""></td>
              <td width="28%" valign="top"><img src="images/index_43.gif" width="91" height="30" alt=""></td>
              <td width="20%" rowspan="2" valign="top"><a href="Director.html"><img src="images/David001.jpg" width="87" height="109" alt=""></a></td>
              <td width="32%" valign="top"><a href="Director.html"><img src="images/index_46.gif" width="95" height="30" alt=""></a></td>
            </tr>
            <tr>
              <td valign="top"><p>COMING SOON!</p></td>
              <td valign="top"><p><b>Get to know me.</b></p>
                <p>&nbsp;</p></td>
            </tr>
          </table></td>
        </tr>
      </table></td>
  </tr>
</table>
<table width="780" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="780"><img src="images/index_53.gif" width="780" height="7" alt=""></td>
  </tr>
  <tr>
    <td bgcolor="#222A2D"><table width="100%" border="0" cellspacing="0" cellpadding="10">
      <tr>
        <td align="center"><a href="index.html" class="blye-text-regular">Home</a> |  <a href="About Us.html" class="blye-text-regular">About Us</a> | <a href="Director.html" class="blye-text-regular">Director</a> | <a href="CurrentProjects.html" class="blye-text-regular">Current Projects</a> | <a href="contactus.html" class="blye-text-regular">Contact Us</a></td>
        <td align="center">Copyright © The Outreach Bible Project</td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

Pegasus · 02-19-2012, 12:42 PM

To center the entire page, write this as your CSS:

#wrapper {margin: 0px auto; padding: 0px; width: 800px;}

Then and this directly below your <body> tag:

<div id="wrapper">

And close the </div> directly before your </body> tag.

iandelap · 02-21-2012, 09:01 AM

Or use <blockquote></blockquote> tags
One at the top, one at the bottome of your page
use as many as you need to have a margin on the right and left sides of the page

sportsfanatic54 · 02-21-2012, 10:33 AM

Use pegasus' method... using blockquotes to align elements is not recommended.

Pegasus · 02-21-2012, 10:33 AM

Blockquotes won't center the content on the page. It just puts margins on either side but keeps it aligned to the left of the page.