• Web Design (WordPress, Joomla, etc.)

  Centering a page in a browser (NOT using tables)

  Posted by Rachel Fleming on December 2, 2010 at 5:12 pm

  Please help..I’ve tried tons of suggestions, but I’m still not doing it correctly, obviously.

  I need to center my site within a browser (I did NOT use tables.) My code is below:

  <DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  index

  body {
  background-color: #000;
  margin-left: 0px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  }
  #apDiv1 {
  position:absolute;
  width:939px;
  height:108px;
  z-index:1;
  left: 1px;
  top: 52px;
  }
  #apDiv2 {
  position:absolute;
  width:962px;
  height:566px;
  z-index:2;
  left: -1px;
  top: 172px;
  visibility: visible;
  }
  #apDiv3 {
  position:absolute;
  width:961px;
  height:165px;
  z-index:3;
  top: 2px;
  left: 0px;
  visibility: visible;
  }
  #apDiv4 {
  position:absolute;
  width:961px;
  height:215px;
  z-index:1;
  top: 181px;
  left: 139px;
  }
  #apDiv5 {
  position:absolute;
  width:1036px;
  height:336px;
  z-index:4;
  left: 163px;
  top: 134px;
  visibility: visible;
  }
  #apDiv6 {
  position:absolute;
  width:960px;
  height:568px;
  z-index:4;
  left: 1px;
  top: 158px;
  visibility: visible;
  }
  #apDiv7 {
  position:absolute;
  width:974px;
  height:234px;
  z-index:1;
  left: 324px;
  top: -114px;
  overflow: auto;
  }
  #apDiv8 {
  position:absolute;
  width:200px;
  height:115px;
  z-index:5;
  left: 1px;
  top: 54px;
  }
  #apDiv9 {
  position:absolute;
  width:965px;
  height:215px;
  z-index:5;
  left: -2px;
  top: 68px;
  visibility: visible;
  }
  #apDiv10 {
  position:absolute;
  width:52px;
  height:692px;
  z-index:5;
  }
  #apDiv11 {
  position:absolute;
  width:56px;
  height:697px;
  z-index:6;
  left: 907px;
  top: -178px;
  }
  #apDiv12 {
  position:absolute;
  width:182px;
  height:35px;
  z-index:5;
  left: 92px;
  top: 250px;
  visibility: visible;
  }
  #apDiv13 {
  position:absolute;
  width:181px;
  height:36px;
  z-index:6;
  left: 291px;
  top: 247px;
  visibility: visible;
  }
  #apDiv14 {
  position:absolute;
  width:181px;
  height:35px;
  z-index:7;
  left: 491px;
  top: 247px;
  }
  #apDiv15 {
  position:absolute;
  width:180px;
  height:36px;
  z-index:8;
  left: 690px;
  top: 247px;
  }
  body,td,th {
  font-family: "Times New Roman", Times, serif;
  font-size: 16pt;
  color: #efa246;
  }
  #apDiv16 {
  position:absolute;
  width:587px;
  height:52px;
  z-index:9;
  left: 148px;
  top: 329px;
  }
  #apDiv17 {
  position:absolute;
  width:217px;
  height:45px;
  z-index:9;
  left: 139px;
  top: 383px;
  }
  #apDiv18 {
  position:absolute;
  width:196px;
  height:44px;
  z-index:10;
  left: 137px;
  top: 384px;
  }
  #apDiv19 {
  position:absolute;
  width:182px;
  height:32px;
  z-index:11;
  left: 92px;
  top: 248px;
  }

  function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  }
  function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i0&&parent.frames.length) {
  d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
  }

  function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i&lt;(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
  }

  <div><img src="images/index-title_bar.gif" width="960" height="156" /></div>
<div>
<div>
<div><a href="#"><img src="images/menu.gif" name="menu" width="181" height="36" border="0" /></a></div>
</div>
<div>
<div><img src="images/index_final_animation.gif" width="960" height="218" /></div>
</div>
<img src="images/index-main.gif" width="960" height="565" />
<div><a href="#"><img src="images/reservations.gif" name="reservations" width="152" height="43" border="0" /></a></div>
<div><em>Welcome to the Cafe Caleo, where we're not only known for our down-home comfortable atmosphere, but our delicious Island food</em>.</div>
<div>
<div><a href="#"><img src="images/reviews.gif" name="reviews" width="159" height="36" border="0" /></a></div>
</div>
<div>
<div><a href="#"><img src="images/privateevents.gif" name="events" width="181" height="36" border="0" /></a></div>
</div>
<div>
<div><a href="aboutus.html"><img src="images/aboutus.gif" name="aboutus" width="182" height="36" border="0" /></a></div>
</div>
<div></div>
</div>

  I need to know what code to use and exactly WHERE to insert the code within my existing code above. I’ve tried doing this w/ CSS, but I still cannot figure it out.

  Can anyone provide exact, step-by-step instructions on how to do this?

  My code doesn’t seem to be showing up correctly when I “Preview Post” so I can email my code if this helps.

  Thanks SO much!!!

  Fernando Mol replied 15 years, 9 months ago 2 Members · 1 Reply
• 1 Reply

• 

  Fernando Mol

  December 2, 2010 at 5:25 pm

  You may want to read this tutorial first:

  https://library.creativecow.net/articles/mol_fernando/css_centered_layout.php

Reply to this Discussion! Login or Sign Up