Solved

Make page background fit contents of page

Posted on 2004-10-28
116 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
Question by:johnson00
    6 Comments
     
    LVL 53

    Expert Comment

    by:COBOLdinosaur
    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
    <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:
    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
     
    LVL 2

    Author Comment

    by:johnson00
    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
    0
     
    LVL 2

    Author Comment

    by:johnson00
    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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Prepare to Pass the CompTIA A+ 900 Series Exam

    CompTIA aims to adapt its A+ Certification to reflect the most current knowledge and skills needed by today's IT professionals--and this year's 2016 exam is harder than ever. This certification is one of the most highly-respected and sought after in IT.

    Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
    What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
    The viewer will learn how to count occurrences of each item in an array.
    The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

    913 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

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now