Skip navigation
philly0128
Currently Being Moderated

1st webpage in DW in 10+ yrs (need resizing help)

Jan 5, 2013 5:18 PM

Hello guys, I just did a intro page and I have it up on my test site http://webuildcmssites.com/compassion/Intro.htm everything looks great and full screen on most browsers I test thus far, but if I take the browser and start to resize the window the images move.

 

1. background was added via properties/html/page properties/background image

2. I 1st tried adding my images via Ap Div but I didn't like that much so I'm using tables

3. when you resize the window the images are moving and I would like it to be fluid or whichever you guys think would be best

 

If you don't want to go to the website here's the code

 

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Welcome to Compassion Ministries</title>

<style type="text/css">

body {

          background-image: url(Images/cmbackground.jpg);

          background-repeat: no-repeat;

          margin: auto;

          background-position: center center;

          height: auto;

          width: auto;

          background-attachment: scroll;

}

#apDiv1 {

          position:absolute;

          width:200px;

          height:115px;

          z-index:1;

          left: 756px;

          top: 62px;

}

#apDiv2 {

          position:absolute;

          width:249px;

          height:181px;

          z-index:1;

          left: -495px;

          top: -981px;

}

#apDiv3 {

          position:absolute;

          width:200px;

          height:129px;

          z-index:2;

          left: 753px;

          top: 81px;

}

#apDiv4 {

          position:absolute;

          width:200px;

          height:129px;

          z-index:3;

          left: 492px;

          top: 80px;

}

#apDiv5 {

          position:absolute;

          width:200px;

          height:129px;

          z-index:4;

          left: 227px;

          top: 81px;

 

#apDiv6 {

          position: absolute;

          width: 721px;

          height: 58px;

          z-index: 5;

          left: 226px;

          top: 304px;

}

#apDiv7 {

          position:absolute;

          width:200px;

          height:115px;

          z-index:6;

          left: 425px;

          top: 466px;

}

#apDiv8 {

          position:absolute;

          width:116px;

          height:41px;

          z-index:1;

}

#apDiv9 {

          position:absolute;

          width:120px;

          height:42px;

          z-index:7;

          left: 750px;

          top: 321px;

}

#apDiv10 {

          position:absolute;

          width:120px;

          height:40px;

          z-index:8;

          left: 493px;

          top: 322px;

}

</style>

<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];}

}

</script>

</head>

 

 

<body onLoad="MM_preloadImages('Images/boarderchester.png','Images/borderoa k.png','Images/bordercomp.png')">

<p> </p>

<table width="746" height="159" border="0" align="center" cellpadding="2">

<tr>

  <td width="249" height="155" align="center"> </td>

</tr>

</table>

<p> </p>

<table width="746" height="147" border="0" align="center" cellpadding="2">

  <tr>

    <td width="253" height="143" align="left"><img src="Images/bwcompborder.jpg" name="oakgray" width="198" height="130" id="oakgray"></td>

    <td width="249" align="left"><img src="Images/bwoakborder.jpg" name="phillygray" width="185" height="130" id="phillygray"></td>

    <td width="214"><img src="Images/bwchesterboarder.jpg" name="chestergray" width="198" height="130" id="chestergray"></td>

  </tr>

</table>

<p> </p>

<p> </p>

<table width="746" height="147" border="0" align="center" cellpadding="2">

<tr>

  <td width="253" height="143" align="left"><table width="719" height="56" border="0" cellpadding="1">

    <tr>

      <td width="258" align="left"><a href="http://www.philly.compassion-ministries.com/"><img src="Images/visitphilly.png" name="visitphilly" width="119" height="40" id="visitphilly" onMouseOver="MM_swapImage('phillygray','','Images/bordercomp.png',1)" onMouseOut="MM_swapImgRestore()"></a></td>

      <td width="260"><a href="http://www.oakeola.compassion-ministries.com/"><img src="Images/visitoak.png" name="visitoak" width="119" height="40" id="visitoak" onMouseOver="MM_swapImage('oakgray','','Images/borderoak.png',1)" onMouseOut="MM_swapImgRestore()"></a></td>

      <td width="187"><a href="http://www.chester.compassion-ministries.com/"><img src="Images/visitchester.png" name="visitchester" width="119" height="40" id="visitchester" onMouseOver="MM_swapImage('chestergray','','Images/boarderchester.png ',1)" onMouseOut="MM_swapImgRestore()"></a></td>

    </tr>

  </table></td>

</tr>

</table>

<p> </p>

<p> </p>

<div id="apDiv6"></div>

</body>

</html>

 
Replies
  • Currently Being Moderated
    Jan 5, 2013 5:52 PM   in reply to philly0128

    LONG TERM SOLUTION:  Don't use positioning in primary layouts.  It doesn't work well, here's why:  http://www.apptools.com/examples/pagelayout101.php

     

    Learn to use CSS margins, padding and floats to align elements on screen.

    http://alt-web.com/DEMOS/3-CSS-boxes.shtml

     

    Finally, don't use tables for layouts.  You don't need them.  Tables are for tabular data only.  Learn to use CSS layouts instead.  You'll find a whole bunch of pre-built CSS layouts in Dreamweaver.

     

    Got to File | New > Blank page > HTML > Layouts. 

    Select a 2 or 3-col layout.

    Hit Create button

     

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points