How do I center my page if I built it with layers? HELP!

Need technical advice on coding your web pages? Covers HTML, JavaScript, CSS, and some server side technologies. Also the issue of some webpages not displayed well.

Moderator: Don_HH2K

How do I center my page if I built it with layers? HELP!

Postby amanda » Mon 02 Jan, 2006 4:24 pm

Hello,

I am trying to figure out a way to center my pages rather than having the contents aligned to the left. I can center the images with the align tool, but cannot apply that to the layers in my design.

Any ideas how to do this???
The code for the home page is below:

Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
   background-color: #000000;
   margin-left: 0px;
   margin-top: 2px;
   margin-right: 0px;
   margin-bottom: 0px;
}
body,td,th {
   color: #FFFFFF;
}
.style5 {font-family: Arial, Helvetica, sans-serif}
a:link {
   color: #FFFFFF;
   text-decoration: none;
}
a:visited {
   text-decoration: none;
   color: #000099;
}
a:hover {
   text-decoration: underline;
   color: #FFCC00;
}
a:active {
   text-decoration: none;
}
.style14 {color: #CCCCCC}
.style18 {
   font-weight: bold;
   font-size: 10px;
}
.style19 {font-family: "Myriad Condensed Web"}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--



//-->
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

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_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&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_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(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];}
}

function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}

function MM_nbGroup(event, grpName) { //v6.0
  var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) {
      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
  } }
}
//-->
</script>
</head>
<body onLoad="MM_preloadImages('Navigation/navbuttons/catering_over.png', 'privacy_terms/privacy_over.gif', '../Navigation/navbar/navbar_r2_c2downdown.gif', '../Navigation/navbar/navbar_r2_c2overover.gif', '../Navigation/navbar/navbar_r2_c2overdownoverdown.gif', '../Navigation/navbar/navbar_r2_c3downdown.gif', '../Navigation/navbar/navbar_r2_c3overover.gif', '../Navigation/navbar/navbar_r2_c3overdownoverdown.gif', '../Navigation/navbar/navbar_r2_c4downdown.gif', '../Navigation/navbar/navbar_r2_c4overover.gif', '../Navigation/navbar/navbar_r2_c4overdownoverdown.gif', '../Navigation/navbar/navbar_r2_c5downdown.gif', '../Navigation/navbar/navbar_r2_c5overover.gif', '../Navigation/navbar/navbar_r2_c5overdownoverdown.gif', '../Navigation/navbar/navbar_r2_c6downdown.gif', '../Navigation/navbar/navbar_r2_c6overover.gif', '../Navigation/navbar/navbar_r2_c6overdownoverdown.gif', '../Navigation/navbar/navbar_r2_c7downdown.gif', '../Navigation/navbar/navbar_r2_c7overover.gif', '../Navigation/navbar/navbar_r2_c7overdownoverdown.gif', '../Navigation/navbar/navbar_r2_c8downdown.gif', '../Navigation/navbar/navbar_r2_c8overover.gif', '../Navigation/navbar/navbar_r2_c8overdownoverdown.gif', '../Navigation/navbar/navbar_r2_c9downdown.gif', '../Navigation/navbar/navbar_r2_c9overover.gif', '../Navigation/navbar/navbar_r2_c9overdownoverdown.gif', 'privacy_terms/terms_over.gif', 'privatedining_over.gif')">
<div id="Layer5" style="position:absolute; left:567px; top:452px; width:122px; height:25px; z-index:12">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="100" height="20">
    <param name="movie" value="reserve.swf">
    <param name="quality" value="high">
    <param name="bgcolor" value="#660000">
    <embed src="reserve.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100" height="20" bgcolor="#660000"></embed>
  </object>
</div>
<table border="0" cellpadding="0" cellspacing="0" width="780">
  <!-- fwtable fwsrc="navbar.png" fwbase="navbar.gif" fwstyle="Dreamweaver" fwdocid = "613644246" fwnested="0" -->
  <tr>
    <td colspan="9"><img name="navbar_r1_c1" src="../Navigation/navbar/navbar_r1_c1.gif" width="780" height="86" border="0" alt=""></td>
  </tr>
  <tr>
    <td rowspan="2"><img name="navbar_r2_c1" src="../Navigation/navbar/navbar_r2_c1.gif" width="1" height="34" border="0" alt=""></td>
    <td><a href="http://66.223.32.234/index.htm" target="_top" onClick="MM_nbGroup('down','navbar1','navbar_r2_c2','../Navigation/navbar/navbar_r2_c2downdown.gif',1);" onMouseOver="MM_nbGroup('over','navbar_r2_c2','../Navigation/navbar/navbar_r2_c2overover.gif','../Navigation/navbar/navbar_r2_c2overdownoverdown.gif',1);" onMouseOut="MM_nbGroup('out');"><img name="navbar_r2_c2" src="../Navigation/navbar/navbar_r2_c2.gif" width="67" height="32" border="0" alt=""></a></td>
    <td><a href="http://66.223.32.234/culinaryteam.htm" target="_top" onClick="MM_nbGroup('down','navbar1','navbar_r2_c3','../Navigation/navbar/navbar_r2_c3downdown.gif',1);" onMouseOver="MM_nbGroup('over','navbar_r2_c3','../Navigation/navbar/navbar_r2_c3overover.gif','../Navigation/navbar/navbar_r2_c3overdownoverdown.gif',1);" onMouseOut="MM_nbGroup('out');"><img name="navbar_r2_c3" src="../Navigation/navbar/navbar_r2_c3.gif" width="100" height="32" border="0" alt=""></a></td>
    <td><a href="http://66.223.32.234/menu_recipes.htm" target="_top" onClick="MM_nbGroup('down','navbar1','navbar_r2_c4','../Navigation/navbar/navbar_r2_c4downdown.gif',1);" onMouseOver="MM_nbGroup('over','navbar_r2_c4','../Navigation/navbar/navbar_r2_c4overover.gif','../Navigation/navbar/navbar_r2_c4overdownoverdown.gif',1);" onMouseOut="MM_nbGroup('out');"><img name="navbar_r2_c4" src="../Navigation/navbar/navbar_r2_c4.gif" width="108" height="32" border="0" alt=""></a></td>
    <td><a href="http://66.223.32.234/privatedining.htm" target="_top" onClick="MM_nbGroup('down','navbar1','navbar_r2_c5','../Navigation/navbar/navbar_r2_c5downdown.gif',1);" onMouseOver="MM_nbGroup('over','navbar_r2_c5','../Navigation/navbar/navbar_r2_c5overover.gif','../Navigation/navbar/navbar_r2_c5overdownoverdown.gif',1);" onMouseOut="MM_nbGroup('out');"><img name="navbar_r2_c5" src="../Navigation/navbar/navbar_r2_c5.gif" width="128" height="32" border="0" alt=""></a></td>
    <td><a href="http://66.223.32.234/pressroom.htm" target="_top" onClick="MM_nbGroup('down','navbar1','navbar_r2_c6','../Navigation/navbar/navbar_r2_c6downdown.gif',1);" onMouseOver="MM_nbGroup('over','navbar_r2_c6','../Navigation/navbar/navbar_r2_c6overover.gif','../Navigation/navbar/navbar_r2_c6overdownoverdown.gif',1);" onMouseOut="MM_nbGroup('out');"><img name="navbar_r2_c6" src="../Navigation/navbar/navbar_r2_c6.gif" width="93" height="32" border="0" alt=""></a></td>
    <td><a href="http://66.223.32.234/promotions.htm" target="_top" onClick="MM_nbGroup('down','navbar1','navbar_r2_c7','../Navigation/navbar/navbar_r2_c7downdown.gif',1);" onMouseOver="MM_nbGroup('over','navbar_r2_c7','../Navigation/navbar/navbar_r2_c7overover.gif','../Navigation/navbar/navbar_r2_c7overdownoverdown.gif',1);" onMouseOut="MM_nbGroup('out');"><img name="navbar_r2_c7" src="../Navigation/navbar/navbar_r2_c7.gif" width="92" height="32" border="0" alt=""></a></td>
    <td><a href="http://www.opentable.com/rest_profile.aspx?rid=2423&ref=1039" target="_top" onClick="MM_nbGroup('down','navbar1','navbar_r2_c8','../Navigation/navbar/navbar_r2_c8downdown.gif',1);" onMouseOver="MM_nbGroup('over','navbar_r2_c8','../Navigation/navbar/navbar_r2_c8overover.gif','../Navigation/navbar/navbar_r2_c8overdownoverdown.gif',1);" onMouseOut="MM_nbGroup('out');"><img name="navbar_r2_c8" src="../Navigation/navbar/navbar_r2_c8.gif" width="90" height="32" border="0" alt=""></a></td>
    <td><a href="http://66.223.32.234/photogallery.htm" target="_top" onClick="MM_nbGroup('down','navbar1','navbar_r2_c9','../Navigation/navbar/navbar_r2_c9downdown.gif',1);" onMouseOver="MM_nbGroup('over','navbar_r2_c9','../Navigation/navbar/navbar_r2_c9overover.gif','../Navigation/navbar/navbar_r2_c9overdownoverdown.gif',1);" onMouseOut="MM_nbGroup('out');"><img name="navbar_r2_c9" src="../Navigation/navbar/navbar_r2_c9.gif" width="101" height="32" border="0" alt=""></a></td>
  </tr>
  <tr>
    <td colspan="8"><img name="navbar_r3_c2" src="../Navigation/navbar/navbar_r3_c2.gif" width="779" height="2" border="0" alt=""></td>
  </tr>
</table>
<div id="Layer2" style="position:absolute; left:204px; top:520px; width:409px; height:18px; z-index:6; font-size: 10px; color: #333333;">
  <p align="center" class="style5 style14">Bonfire Steakhouse&reg; 2005. All rights reserved. Site design, BrittonDesigns.com&copy; 2005 </p>
</div>
<div id="Layer1" style="position:absolute; left:85px; top:482px; width:704px; height:27px; z-index:7">
  <table width="647" border="0" cellspacing="0" cellpadding="5">
    <tr>
      <td width="637"><div align="center" class="style18">
        <p class="style19">For more information, visit <a href="http://www.bostonparkplaza.com">www.bostonparkplaza.com</a>, or email <a href="mailto:Danielle.Gillespie@starwoodhotels.com">Danielle.Gillespie@starwoodhotels.com</a></p>
      </div></td>
    </tr>
  </table>
</div>
<div id="Layer4" style="position:absolute; left:675px; top:303px; width:120px; height:29px; z-index:9">
  <table width="100" border="0" cellspacing="0" cellpadding="5">
    <tr>
      <td><a href="http://66.223.32.234/privatedining.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image16','','privatedining_over.gif',1)"><img src="privatedining.gif" name="Image16" width="107" height="24" border="0"></a></td>
    </tr>
  </table>
</div>
<div id="Layer6" style="position:absolute; left:340px; top:538px; width:187px; height:30px; z-index:11">
  <table width="187" border="0" cellspacing="0" cellpadding="5">
    <tr>
      <td width="48"><a href="#" onClick="MM_openBrWindow('privacy_terms/privacy.htm','','scrollbars=yes,width=600,height=600')" onMouseOver="MM_swapImage('Image7','','privacy_terms/privacy_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="privacy_terms/privacy_up.gif" name="Image7" width="48" height="27" border="0"></a></td>
      <td width="119"><a href="#" onClick="MM_openBrWindow('privacy_terms/terms.htm','','scrollbars=yes,width=600,height=600')" onMouseOver="MM_swapImage('Image15','','privacy_terms/terms_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="privacy_terms/terms_up.gif" name="Image15" width="80" height="27" border="0"></a></td>
    </tr>
  </table>
</div>
<div align="left">
  <img src="Background_About.jpg" alt="background" width="780" height="380" longdesc="Background_About.jpg"></div>
</body>
</html>


Thank you for any help you can give me!!!!!
UserAgent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; T312461; SV1)
amanda
junior member
junior member
 
Posts: 14
Joined: Mon 02 Jan, 2006 3:40 pm

Postby Antony » Mon 02 Jan, 2006 8:50 pm

In short,
Use JavaScript to get the window width, and do some math. You can position the Layer in the centre.
UserAgent: Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/416.12 (KHTML, like Gecko) Safari/416.13
User avatar
Antony
diamond member
diamond member
 
Posts: 14509
Joined: Tue 18 Jun, 2002 11:36 pm
Location: Sydney, Australia

center page if built with layers

Postby amanda » Tue 03 Jan, 2006 8:54 am

I'm sorry I am new at this :? How do I move the position of the layers in Dreamweaver?

I am not familiar with JavaScript....that the only solution?

Thanks again.
UserAgent: Mozilla/4.0 (compatible; MSIE 5.23; Mac_PowerPC)
amanda
junior member
junior member
 
Posts: 14
Joined: Mon 02 Jan, 2006 3:40 pm

How do I center my page if I built it with layers? HELP!

Postby amanda » Wed 04 Jan, 2006 9:31 am

Is there a way to apply a global centering to my entire page code? I'm sorry I am seriously striking out here :o
UserAgent: Mozilla/4.0 (compatible; MSIE 5.23; Mac_PowerPC)
amanda
junior member
junior member
 
Posts: 14
Joined: Mon 02 Jan, 2006 3:40 pm

Postby Antony » Wed 04 Jan, 2006 10:18 am

Amanda,

I don't know if Dreamweaver can do the auto centring for you.

But if you are not familiar with JavaScript, I'd suggest you set the layer position and size to some reasonable values.
UserAgent: Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/416.12 (KHTML, like Gecko) Safari/416.13
User avatar
Antony
diamond member
diamond member
 
Posts: 14509
Joined: Tue 18 Jun, 2002 11:36 pm
Location: Sydney, Australia


Return to Web Design and Page Coding

Who is online

Registered users: Google [Bot], Yahoo [Bot]