more positioning problems with layers! ??

jbone · 02-11-2008

Hi, first time forum user so this is super exciting.
well im an armature at dream weaver and creating a site. Im trying to use an image that is centered and spliced from photoshop, for quicker loading with buttons and changing of spacific pics. (first time trying that) . I just want to have some sort of a text box in the middle of the page. I want to use layers and want them to center with everything else which is set to center. when i change them to relative, all of the images in the back,(one image that is spliced, which i guess makes it many images) go crazy and the div is off to the side some where.

help would be so greatly appreciated.

Code:

<html>
<head>
<title>the INN at WSU</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
#Layer1 {
	position:absolute;
	width:577px;
	height:262px;
	z-index:1;
	left: 302px;
	top: 230px;
}
-->
</style>

<div id="wrapper">
<div id="content">
  blah blah balh
</div><!--content-->
<script type="text/javascript">
<!--
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&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

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_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_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
//-->
</script><!--buttons-->

<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/homerollover_20.jpg','images/images/aboutrollover_21.jpg','images/images/getinvolvedrollover_22.jpg','images/images/photosrollover_23.jpg','images/images/talksrollover_24.jpg','images/images/givingrollover_25.jpg','images/images/contactusrollover_26.jpg')">

<!-- ImageReady Slices (indexfinalishactualsize.psd) -->

<div align="center">
  <table id="Table_01" width="951" height="656" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td colspan="18">
        <img src="images/index_01.jpg" width="950" height="195" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="195" alt=""></td>
    </tr>
    <tr>
      <td colspan="10">
        <img src="images/index_02.jpg" width="776" height="20" alt=""></td>
	    <td colspan="6" rowspan="2">
		    <img src="images/index_03.jpg" width="149" height="32" alt=""></td>
	    <td colspan="2" rowspan="5">
		    <img src="images/index_04.jpg" width="25" height="169" alt=""></td>
	    <td><div id="Layer1"></div>
		    <img src="images/spacer.gif" width="1" height="20" alt=""></td>
    </tr>
    <tr>
      <td colspan="3" rowspan="7">
        <img src="images/index_05.jpg" width="206" height="278" alt=""></td>
	    <td colspan="6" rowspan="7">
		    <img src="images/index-06.jpg" width="556" height="278" alt=""></td>
    <td rowspan="7">
      <img src="images/index_07.jpg" width="14" height="278" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="12" alt=""></td>
    </tr>
    <tr>
      <td colspan="2" rowspan="2">
        <img src="images/index_08.jpg" width="33" height="100" alt=""></td>
	    <td colspan="2">
		    <img src="images/index_09.jpg" width="84" height="65" alt=""></td>
	    <td colspan="2" rowspan="2">
		    <img src="images/index_10.jpg" width="32" height="100" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="65" alt=""></td>
    </tr>
    <tr>
      <td colspan="2">
        <img src="images/index_11.jpg" width="84" height="35" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="35" alt=""></td>
    </tr>
    <tr>
      <td colspan="6">
        <img src="images/index_12.jpg" width="149" height="37" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="37" alt=""></td>
    </tr>
    <tr>
      <td colspan="7">
        <img src="images/index_13.jpg" width="160" height="20" alt=""></td>
	    <td rowspan="5">
		    <img src="images/index_14.jpg" width="14" height="291" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="20" alt=""></td>
    </tr>
    <tr>
      <td rowspan="2">
        <img src="images/index_15.jpg" width="26" height="109" alt=""></td>
	    <td colspan="4">
		    <img src="images/index_16.jpg" width="108" height="87" alt=""></td>
	    <td colspan="2" rowspan="2">
		    <img src="images/index_17.jpg" width="26" height="109" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="87" alt=""></td>
    </tr>
    <tr>
      <td colspan="4">
        <img src="images/index_18.jpg" width="108" height="22" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="22" alt=""></td>
    </tr>
    <tr>
      <td rowspan="2">
        <img src="images/index_19.jpg" width="84" height="162" alt=""></td>
	    <td>
		    <img src="images/index_20.jpg" alt="" name="Image1" width="105" height="106" border="0" id="Image1" onClick="MM_goToURL('parent','index.html');return document.MM_returnValue" onMouseOver="MM_swapImage('Image1','','images/homerollover_20.jpg',1)" onMouseOut="MM_swapImgRestore()"></td>
  <td colspan="2">
    <img src="images/index_21.jpg" alt="" width="107" height="106" id="Image2" onClick="MM_goToURL('parent','about.html');return document.MM_returnValue" onMouseOver="MM_swapImage('Image2','','images/images/aboutrollover_21.jpg',1)" onMouseOut="MM_swapImgRestore()"></td>
  <td>
    <img src="images/index_22.jpg" alt="" width="110" height="106" id="Image3" onClick="MM_goToURL('parent','get involved.html');return document.MM_returnValue" onMouseOver="MM_swapImage('Image3','','images/images/getinvolvedrollover_22.jpg',1)" onMouseOut="MM_swapImgRestore()"></td>
  <td>	  <img src="images/index_23.jpg" alt="" name="Image4" width="111" height="106" id="Image4" onClick="MM_goToURL('parent','photos.html');return document.MM_returnValue" onMouseOver="MM_swapImage('Image4','','images/images/photosrollover_23.jpg',1)" onMouseOut="MM_swapImgRestore()"></td>
  <td>
    <img src="images/index_24.jpg" alt="" width="109" height="106" id="Image5" onClick="MM_goToURL('parent','talks.html');return document.MM_returnValue" onMouseOver="MM_swapImage('Image5','','images/images/talksrollover_24.jpg',1)" onMouseOut="MM_swapImgRestore()"></td>
  <td>
    <img src="images/index_25.jpg" alt="" width="109" height="106" id="Image6" onClick="MM_goToURL('parent','giving.html');return document.MM_returnValue" onMouseOver="MM_swapImage('Image6','','images/images/givingrollover_25.jpg',1)" onMouseOut="MM_swapImgRestore()"></td>
  <td colspan="5">
    <img src="images/index_26.jpg" alt="" width="113" height="106" id="Image7" onClick="MM_goToURL('parent','contact us.html');return document.MM_returnValue" onMouseOver="MM_swapImage('Image7','','images/images/contactusrollover_26.jpg',1)" onMouseOut="MM_swapImgRestore()"></td>
  <td colspan="4" rowspan="2">
    <img src="images/index_27.jpg" width="88" height="162" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="106" alt=""></td>
    </tr>
    <tr>
      <td colspan="12">
        <img src="images/index_28.jpg" width="764" height="56" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="1" height="56" alt=""></td>
    </tr>
    <tr>
      <td>
        <img src="images/spacer.gif" width="84" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="105" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="17" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="90" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="110" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="111" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="109" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="109" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="27" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="14" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="26" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="7" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="39" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="45" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="17" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="15" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="11" height="1" alt=""></td>
	    <td>
		    <img src="images/spacer.gif" width="14" height="1" alt=""></td>
	    <td></td>
    </tr>
  </table>
  <!-- End ImageReady Slices -->
</div><!--wrapper-->
</div>
</body>
</html>

yusreey · 02-11-2008

i think you should try set the overflow layer properties into "hidden"..i have this problem too..but different situation...the images that i put in the layer look in goodposition in mozilla firefox browser..but in IE its all went wrong..then i set the layer overflow properties into "hidden"..then everything is ok..i cannot see your problem very clear..i hope i can help you more..
p/s: i`m using dreamweaver CS3

jbone · 02-11-2008

thanks for your reply!
I think i know what you mean, although i need that set to scroll to type in these layers. the images are behind the layers and they layers then mess up all the images. i hope im being clear.

Jacorre · 02-11-2008

I don't think using ImageReady to code a layout is the best method. You can see that there is a large amount of code created with tables. Then using "layers" in Dreamweaver doesn't help the situation. When you create a layer it absolutely positions it wherever you create it. It can get very crazy with positioning things like that when you then view the site in various browsers.

You might be better off learning how to code a website without the use of ImageReady and Dreamweaver first. For example, after learning myself, I use ImageReady only to slice images. I then take those images into Dreamweaver and put the site together using CSS and XHTML.

jbone · 02-12-2008

thanks for responding, i think i understand what you are saying. I have been using photoshop for splicing the images only, then moving to dreamweaver and trying, emphasis on trying to use code to build. so i havnt been using any other program to code with but im still confused. i appreciate any help though.
thanks.