[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Make page background fit contents of page

Posted on 2004-10-28
7
Medium Priority
?
122 Views
Last Modified: 2010-04-06
I have a template that I've created in Fireworks and is exported as a table of graphics.  To insert HTML content, I'm using layers in Dreamweaver.  I've seen other similar pages where the page and left border height automatically adjust based on the length of page content.  I'd like to, if possible, make this the case with my page.  Currently, if the page content is longer than my left banner, I have to go and re-export the graphics table after I lengthen the left border.  Is it possible to change my code to somehow make my pages auto adjust to content length.  

Please let me know if further clarification is needed, or you're interested in taking a look at my current code.

Thanks!
0
Comment
Question by:johnson00
  • 3
  • 2
6 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12438669
Not if it is a background.  The size of a background image is not dynamic.

If it is an image in a layer, the you can dynamically size it with scripting.  We would need to see the code to work how to handle dynamic re-sizing

Cd&
0
 
LVL 2

Author Comment

by:johnson00
ID: 12439126
<html>
<head>
<title>ContactTemplate.jpg</title>
<meta http-equiv="Content-Type" content="text/html;">
<!--Fireworks MX 2004 Dreamweaver MX 2004 target.  Created Wed Sep 22 08:47:15 GMT-0500 (Central Standard Time) 2004-->
<script language="JavaScript">
<!--
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_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;
  } }
}

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

//-->
</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);
//-->
</script>
<style type="text/css">
<!--
.style1 {
      font-size: small;
      font-weight: bold;
}
.style2 {font-size: small}
-->
</style>
</head>
<body bgcolor="#ffffff" onLoad="MM_preloadImages('images/ContactTemplate_r2_c5_f2.gif','images/ContactTemplate_r2_c5_f3.gif','images/ContactTemplate_r2_c6_f2.jpg','images/ContactTemplate_r2_c6_f3.jpg','images/ContactTemplate_r2_c7_f2.jpg','images/ContactTemplate_r2_c7_f3.jpg','images/ContactTemplate_r2_c8_f2.jpg','images/ContactTemplate_r2_c8_f3.jpg','images/ContactTemplate_r4_c2_f2.gif','images/ContactTemplate_r4_c2_f3.gif','images/ContactTemplate_r5_c2_f2.jpg','images/ContactTemplate_r5_c2_f3.jpg','images/ContactTemplate_r6_c2_f2.jpg','images/ContactTemplate_r6_c2_f3.jpg','images/ContactTemplate_r7_c2_f2.jpg','images/ContactTemplate_r7_c2_f3.jpg','images/ContactTemplate_r8_c2_f2.jpg','images/ContactTemplate_r8_c2_f3.jpg','images/ContactTemplate_r9_c3_f2.jpg','images/ContactTemplate_r9_c3_f3.jpg','images/ContactTemplate_r10_c2_f2.jpg','images/ContactTemplate_r10_c2_f3.jpg','images/ContactTemplate_r11_c2_f2.jpg','images/ContactTemplate_r11_c2_f3.jpg');">
<div id="Layer1" style="position:absolute; width:511px; height:115px; z-index:1; left: 249px; top: 121px;">
  <p>&nbsp;</p>
  <p class="style1">Contact Information</p>
  <div align="justify">
    <p>Thank you for visiting Springfield Clinic's website.  We hope the posted information has been useful to you, and has increased your satisfaction with Clinic services.</p>
    <p class="style1">Patient Billing Office </p>
    <p class="style1">&nbsp;    </p>
  </div>
  <p class="style2">&nbsp;</p>
</div>
<table border="0" cellpadding="0" cellspacing="0" width="756">
<!-- fwtable fwsrc="Master.png" fwbase="ContactTemplate.jpg" fwstyle="Dreamweaver" fwdocid = "1698286417" fwnested="0" -->
  <tr>
   <td><img src="images/spacer.gif" width="5" height="1" border="0" alt=""></td>
   <td><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
   <td><img src="images/spacer.gif" width="206" height="1" border="0" alt=""></td>
   <td><img src="images/spacer.gif" width="211" height="1" border="0" alt=""></td>
   <td><img src="images/spacer.gif" width="93" height="1" border="0" alt=""></td>
   <td><img src="images/spacer.gif" width="71" height="1" border="0" alt=""></td>
   <td><img src="images/spacer.gif" width="84" height="1" border="0" alt=""></td>
   <td><img src="images/spacer.gif" width="81" height="1" border="0" alt=""></td>
   <td><img src="images/spacer.gif" width="4" height="1" border="0" alt=""></td>
   <td><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
  </tr>

  <tr>
   <td colspan="9"><img name="ContactTemplate_r1_c1" src="images/ContactTemplate_r1_c1.jpg" width="756" height="70" border="0" alt=""></td>
   <td><img src="images/spacer.gif" width="1" height="70" border="0" alt=""></td>
  </tr>
  <tr>
   <td rowspan="2" colspan="4"><img name="ContactTemplate_r2_c1" src="images/ContactTemplate_r2_c1.jpg" width="423" height="36" border="0" alt=""></td>
   <td><a href="#" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','ContactTemplate_r2_c5','images/ContactTemplate_r2_c5_f2.gif','images/ContactTemplate_r2_c5_f3.gif',1);" onClick="MM_nbGroup('down','navbar1','ContactTemplate_r2_c5','images/ContactTemplate_r2_c5_f3.gif',1);"><img name="ContactTemplate_r2_c5" src="images/ContactTemplate_r2_c5.gif" width="93" height="14" border="0" alt=""></a></td>
   <td><a href="#" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','ContactTemplate_r2_c6','images/ContactTemplate_r2_c6_f2.jpg','images/ContactTemplate_r2_c6_f3.jpg',1);" onClick="MM_nbGroup('down','navbar1','ContactTemplate_r2_c6','images/ContactTemplate_r2_c6_f3.jpg',1);"><img name="ContactTemplate_r2_c6" src="images/ContactTemplate_r2_c6.jpg" width="71" height="14" border="0" alt=""></a></td>
   <td><a href="#" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','ContactTemplate_r2_c7','images/ContactTemplate_r2_c7_f2.jpg','images/ContactTemplate_r2_c7_f3.jpg',1);" onClick="MM_nbGroup('down','navbar1','ContactTemplate_r2_c7','images/ContactTemplate_r2_c7_f3.jpg',1);"><img name="ContactTemplate_r2_c7" src="images/ContactTemplate_r2_c7.jpg" width="84" height="14" border="0" alt=""></a></td>
   <td><a href="#" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','ContactTemplate_r2_c8','images/ContactTemplate_r2_c8_f2.jpg','images/ContactTemplate_r2_c8_f3.jpg',1);" onClick="MM_nbGroup('down','navbar1','ContactTemplate_r2_c8','images/ContactTemplate_r2_c8_f3.jpg',1);"><img name="ContactTemplate_r2_c8" src="images/ContactTemplate_r2_c8.jpg" width="81" height="14" border="0" alt=""></a></td>
   <td rowspan="11"><img name="ContactTemplate_r2_c9" src="images/ContactTemplate_r2_c9.jpg" width="4" height="680" border="0" alt=""></td>
   <td><img src="images/spacer.gif" width="1" height="14" border="0" alt=""></td>
  </tr>
  <tr>
   <td rowspan="10" colspan="4"><img name="ContactTemplate_r3_c5" src="images/ContactTemplate_r3_c5.jpg" width="329" height="666" border="0" alt=""></td>
   <td><img src="images/spacer.gif" width="1" height="22" border="0" alt=""></td>
  </tr>
  <tr>
   <td rowspan="9"><img name="ContactTemplate_r4_c1" src="images/ContactTemplate_r4_c1.jpg" width="5" height="644" border="0" alt=""></td>
   <td colspan="2"><a href="#" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','ContactTemplate_r4_c2','images/ContactTemplate_r4_c2_f2.gif','images/ContactTemplate_r4_c2_f3.gif',1);" onClick="MM_nbGroup('down','navbar1','ContactTemplate_r4_c2','images/ContactTemplate_r4_c2_f3.gif',1);"><img name="ContactTemplate_r4_c2" src="images/ContactTemplate_r4_c2.gif" width="207" height="23" border="0" alt=""></a></td>
   <td rowspan="9"><img name="ContactTemplate_r4_c4" src="images/ContactTemplate_r4_c4.jpg" width="211" height="644" border="0" alt=""></td>
   <td><img src="images/spacer.gif" width="1" height="23" border="0" alt=""></td>
  </tr>
  <tr>
   <td colspan="2"><a href="#" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','ContactTemplate_r5_c2','images/ContactTemplate_r5_c2_f2.jpg','images/ContactTemplate_r5_c2_f3.jpg',1);" onClick="MM_nbGroup('down','navbar1','ContactTemplate_r5_c2','images/ContactTemplate_r5_c2_f3.jpg',1);"><img name="ContactTemplate_r5_c2" src="images/ContactTemplate_r5_c2.jpg" width="207" height="27" border="0" alt=""></a></td>
   <td><img src="images/spacer.gif" width="1" height="27" border="0" alt=""></td>
  </tr>
  <tr>
   <td colspan="2"><a href="#" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','ContactTemplate_r6_c2','images/ContactTemplate_r6_c2_f2.jpg','images/ContactTemplate_r6_c2_f3.jpg',1);" onClick="MM_nbGroup('down','navbar1','ContactTemplate_r6_c2','images/ContactTemplate_r6_c2_f3.jpg',1);"><img name="ContactTemplate_r6_c2" src="images/ContactTemplate_r6_c2.jpg" width="207" height="25" border="0" alt=""></a></td>
   <td><img src="images/spacer.gif" width="1" height="25" border="0" alt=""></td>
  </tr>
  <tr>
   <td colspan="2"><a href="#" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','ContactTemplate_r7_c2','images/ContactTemplate_r7_c2_f2.jpg','images/ContactTemplate_r7_c2_f3.jpg',1);" onClick="MM_nbGroup('down','navbar1','ContactTemplate_r7_c2','images/ContactTemplate_r7_c2_f3.jpg',1);"><img name="ContactTemplate_r7_c2" src="images/ContactTemplate_r7_c2.jpg" width="207" height="31" border="0" alt=""></a></td>
   <td><img src="images/spacer.gif" width="1" height="31" border="0" alt=""></td>
  </tr>
  <tr>
   <td colspan="2"><a href="#" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','ContactTemplate_r8_c2','images/ContactTemplate_r8_c2_f2.jpg','images/ContactTemplate_r8_c2_f3.jpg',1);" onClick="MM_nbGroup('down','navbar1','ContactTemplate_r8_c2','images/ContactTemplate_r8_c2_f3.jpg',1);"><img name="ContactTemplate_r8_c2" src="images/ContactTemplate_r8_c2.jpg" width="207" height="23" border="0" alt=""></a></td>
   <td><img src="images/spacer.gif" width="1" height="23" border="0" alt=""></td>
  </tr>
  <tr>
   <td><img name="ContactTemplate_r9_c2" src="images/ContactTemplate_r9_c2.jpg" width="1" height="28" border="0" alt=""></td>
   <td><a href="#" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','ContactTemplate_r9_c3','images/ContactTemplate_r9_c3_f2.jpg','images/ContactTemplate_r9_c3_f3.jpg',1);" onClick="MM_nbGroup('down','navbar1','ContactTemplate_r9_c3','images/ContactTemplate_r9_c3_f3.jpg',1);"><img name="ContactTemplate_r9_c3" src="images/ContactTemplate_r9_c3.jpg" width="206" height="28" border="0" alt=""></a></td>
   <td><img src="images/spacer.gif" width="1" height="28" border="0" alt=""></td>
  </tr>
  <tr>
   <td colspan="2"><a href="#" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','ContactTemplate_r10_c2','images/ContactTemplate_r10_c2_f2.jpg','images/ContactTemplate_r10_c2_f3.jpg',1);" onClick="MM_nbGroup('down','navbar1','ContactTemplate_r10_c2','images/ContactTemplate_r10_c2_f3.jpg',1);"><img name="ContactTemplate_r10_c2" src="images/ContactTemplate_r10_c2.jpg" width="207" height="27" border="0" alt=""></a></td>
   <td><img src="images/spacer.gif" width="1" height="27" border="0" alt=""></td>
  </tr>
  <tr>
   <td colspan="2"><a href="#" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','ContactTemplate_r11_c2','images/ContactTemplate_r11_c2_f2.jpg','images/ContactTemplate_r11_c2_f3.jpg',1);" onClick="MM_nbGroup('down','navbar1','ContactTemplate_r11_c2','images/ContactTemplate_r11_c2_f3.jpg',1);"><img name="ContactTemplate_r11_c2" src="images/ContactTemplate_r11_c2.jpg" width="207" height="23" border="0" alt=""></a></td>
   <td><img src="images/spacer.gif" width="1" height="23" border="0" alt=""></td>
  </tr>
  <tr>
   <td colspan="2"><img name="ContactTemplate_r12_c2" src="images/ContactTemplate_r12_c2.jpg" width="207" height="437" border="0" alt=""></td>
   <td><img src="images/spacer.gif" width="1" height="437" border="0" alt=""></td>
  </tr>
</table>
</body>
</html>
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 1000 total points
ID: 12439300
That's what I was afraid of.  This is the lline that controls it, the the browser cannot ever see it.  
<!-- fwtable fwsrc="Master.png" fwbase="ContactTemplate.jpg" fwstyle="Dreamweaver" fwdocid = "1698286417" fwnested="0" -->

The only way to change it is with the tool.  I don't sse a way to do it dynamically.  You are
limited by the tool.  Pages that are dynamic are general hand coded or code with tools that
don't stick a lot of stuff in.  

I don't know of a way to solve your problem, but maybe another expert used to working with
the Macro Media stuff will come along and have a suggestion.

Cd&
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 2

Author Comment

by:johnson00
ID: 12443722
Perhaps I should also post in the DreamWeaver section for advice there.  I wasn't sure where the appropriate place would be.  What tool are you speaking of?
0
 
LVL 18

Expert Comment

by:arantius
ID: 12444365
0
 
LVL 2

Author Comment

by:johnson00
ID: 12445798
arantius -

Thank you for the link.  I've looked over the information there, and hope you can answer a few questions regarding the content there.

Their example assumes that the page is done solely in layers (div).  My page's main content is in a div, but the graphics are

not in a div.  Can you take a look at the code I posted and help me figure out how this solution would work with my code?

Thank you!
0

Featured Post

[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
Suggested Courses

591 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question