Solved

Image problem in dreamweaver all spread out

Posted on 2007-04-09
2
237 Views
Last Modified: 2010-04-25
Using Dreamweaver 8 & photoshop cs2
created site graphics with roll over in photoshop cs2
see test site http://thethirdlink.com/asc/ASCneighborhood.html , note the graphics problem ,any suggestions on how can I correct this problem I tried Div tags but not sure where to apply them here is the code

<html>
<head>
<title>Neighborhood Developments</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- ImageReady Preload Script (ASCneighborhood.psd) -->
<script type="text/javascript">
<!--

function newImage(arg) {
      if (document.images) {
            rslt = new Image();
            rslt.src = arg;
            return rslt;
      }
}

function changeImages() {
      if (document.images && (preloadFlag == true)) {
            for (var i=0; i<changeImages.arguments.length; i+=2) {
                  document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
            }
      }
}

var preloadFlag = false;
function preloadImages() {
      if (document.images) {
            ASCabouthomebtn_10_over = newImage("images/ASCabouthomebtn_10-over.gif");
            ASCaboutaboutbtn_11_over = newImage("images/ASCaboutaboutbtn_11-over.gif");
            ASCaboutwhychoosebtn_12_over = newImage("images/ASCaboutwhychoosebtn_12-ove.gif");
            ASCaboutservicebtn_13_over = newImage("images/ASCaboutservicebtn_13-over.gif");
            ASCaboutneighborbtn_14_over = newImage("images/ASCaboutneighborbtn_14-over.gif");
            ASCaboutphotobtn_15_over = newImage("images/ASCaboutphotobtn_15-over.gif");
            ASCaboutlinksbtn_16_over = newImage("images/ASCaboutlinksbtn_16-over.gif");
            ASCaboutcontactbtn_17_over = newImage("images/ASCaboutcontactbtn_17-over.gif");
            preloadFlag = true;
      }
}

// -->
</script>
<!-- End Preload Script -->
<style type="text/css">
<!--
.style6 {
      font-size: 11pt;
      color: #6B7E00;
      text-indent: 3px;
      font-family: Arial, Helvetica, sans-serif;
      padding: 0;
      margin-left: 20px;
      line-height: 20pt;
}
.style12 {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 8pt;
      line-height: 11pt;
      display: block;
      text-indent: 0px;
      margin-left: 5px;
      color: #000000;
      margin-right: 0px;
}
.style16 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; line-height: 13pt; display: block; text-indent: 0px; margin-left: 20px; color: #000000; margin-right: 0px; }
body {
      background-color: #ebebeb;
}
.style17 {font-size: 7pt}
.style18 {color: #0099FF}
.style19 {color: #0099FF; font-size: 7pt; }
.style20 {color: #0099ff}
.style21 {font-size: 7pt; color: #0099ff; }
.style25 {font-size: 7pt; font-family: Verdana, Arial, Helvetica, sans-serif; }
.style26 {
      color: #666666;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 7pt;
      line-height: 25px;
}
-->
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="preloadImages();">
<!-- ImageReady Slices (ASCneighborhood.psd) -->
<table width="792" height="541" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
      <tr>
            <td colspan="16">
                  <img src="images/ASCneighborhood_01.gif" width="792" height="36" alt=""></td>
      </tr>
      <tr>
            <td rowspan="8" bgcolor="#FFFFFF">
                  <img src="images/ASCneighborhood_02.gif" width="35" height="486" alt=""></td>
            <td>
                  <img src="images/ASCneighborlogo_03.gif" width="170" height="46" alt=""></td>
            <td colspan="8">
                  <img src="images/ASCneighborhood_04.gif" width="335" height="46" alt=""></td>
            <td colspan="5">
                  <img src="images/ASCneighborcontact_05.gif" width="215" height="46" alt=""></td>
            <td rowspan="8" bgcolor="#FFFFFF"></td>
      </tr>
      <tr>
            <td rowspan="3">
                  <img src="images/ASCneighborimage_07.jpg" width="170" height="127" alt=""></td>
            <td colspan="2">
                  <img src="images/ASCneighborhood_08.jpg" width="98" height="9" alt=""></td>
            <td colspan="11">
                  <img src="images/ASCneighborhood_09.gif" width="452" height="9" alt=""></td>
      </tr>
      <tr>
            <td>
                  <a href="index.html"
                        onmouseover="changeImages('ASCabouthomebtn_10', 'images/ASCabouthomebtn_10-over.gif'); return true;"
                        onmouseout="changeImages('ASCabouthomebtn_10', 'images/ASCabouthomebtn_10.gif'); return true;"
                        onmousedown="changeImages('ASCabouthomebtn_10', 'images/ASCabouthomebtn_10-over.gif'); return true;"
                        onmouseup="changeImages('ASCabouthomebtn_10', 'images/ASCabouthomebtn_10-over.gif'); return true;">
                        <img name="ASCabouthomebtn_10" src="images/ASCabouthomebtn_10.gif" width="48" height="18" border="0" alt=""></a></td>
            <td>
                  <a href="ASCabout.html"
                        onmouseover="changeImages('ASCaboutaboutbtn_11', 'images/ASCaboutaboutbtn_11-over.gif'); return true;"
                        onmouseout="changeImages('ASCaboutaboutbtn_11', 'images/ASCaboutaboutbtn_11.gif'); return true;"
                        onmousedown="changeImages('ASCaboutaboutbtn_11', 'images/ASCaboutaboutbtn_11-over.gif'); return true;"
                        onmouseup="changeImages('ASCaboutaboutbtn_11', 'images/ASCaboutaboutbtn_11-over.gif'); return true;">
                        <img name="ASCaboutaboutbtn_11" src="images/ASCaboutaboutbtn_11.gif" width="50" height="18" border="0" alt=""></a></td>
            <td>
                  <a href="ASCwhychoose.html"
                        onmouseover="changeImages('ASCaboutwhychoosebtn_12', 'images/ASCaboutwhychoosebtn_12-ove.gif'); return true;"
                        onmouseout="changeImages('ASCaboutwhychoosebtn_12', 'images/ASCaboutwhychoosebtn_12.gif'); return true;"
                        onmousedown="changeImages('ASCaboutwhychoosebtn_12', 'images/ASCaboutwhychoosebtn_12-ove.gif'); return true;"
                        onmouseup="changeImages('ASCaboutwhychoosebtn_12', 'images/ASCaboutwhychoosebtn_12-ove.gif'); return true;">
                        <img name="ASCaboutwhychoosebtn_12" src="images/ASCaboutwhychoosebtn_12.gif" width="79" height="18" border="0" alt=""></a></td>
            <td>
                  <a href="ASCservices.html"
                        onmouseover="changeImages('ASCaboutservicebtn_13', 'images/ASCaboutservicebtn_13-over.gif'); return true;"
                        onmouseout="changeImages('ASCaboutservicebtn_13', 'images/ASCaboutservicebtn_13.gif'); return true;"
                        onmousedown="changeImages('ASCaboutservicebtn_13', 'images/ASCaboutservicebtn_13-over.gif'); return true;"
                        onmouseup="changeImages('ASCaboutservicebtn_13', 'images/ASCaboutservicebtn_13-over.gif'); return true;">
                        <img name="ASCaboutservicebtn_13" src="images/ASCaboutservicebtn_13.gif" width="49" height="18" border="0" alt=""></a></td>
            <td colspan="5">
                  <a href="ASCneighborhood.html"
                        onmouseover="changeImages('ASCaboutneighborbtn_14', 'images/ASCaboutneighborbtn_14-over.gif'); return true;"
                        onmouseout="changeImages('ASCaboutneighborbtn_14', 'images/ASCaboutneighborbtn_14.gif'); return true;"
                        onmousedown="changeImages('ASCaboutneighborbtn_14', 'images/ASCaboutneighborbtn_14-over.gif'); return true;"
                        onmouseup="changeImages('ASCaboutneighborbtn_14', 'images/ASCaboutneighborbtn_14-over.gif'); return true;">
                        <img name="ASCaboutneighborbtn_14" src="images/ASCaboutneighborbtn_14.gif" width="137" height="18" border="0" alt=""></a></td>
            <td>
                  <a href="ASCphoto.html"
                        onmouseover="changeImages('ASCaboutphotobtn_15', 'images/ASCaboutphotobtn_15-over.gif'); return true;"
                        onmouseout="changeImages('ASCaboutphotobtn_15', 'images/ASCaboutphotobtn_15.gif'); return true;"
                        onmousedown="changeImages('ASCaboutphotobtn_15', 'images/ASCaboutphotobtn_15-over.gif'); return true;"
                        onmouseup="changeImages('ASCaboutphotobtn_15', 'images/ASCaboutphotobtn_15-over.gif'); return true;">
                        <img name="ASCaboutphotobtn_15" src="images/ASCaboutphotobtn_15.gif" width="73" height="18" border="0" alt=""></a></td>
            <td>
                  <a href="ASClinks.html"
                        onmouseover="changeImages('ASCaboutlinksbtn_16', 'images/ASCaboutlinksbtn_16-over.gif'); return true;"
                        onmouseout="changeImages('ASCaboutlinksbtn_16', 'images/ASCaboutlinksbtn_16.gif'); return true;"
                        onmousedown="changeImages('ASCaboutlinksbtn_16', 'images/ASCaboutlinksbtn_16-over.gif'); return true;"
                        onmouseup="changeImages('ASCaboutlinksbtn_16', 'images/ASCaboutlinksbtn_16-over.gif'); return true;">
                        <img name="ASCaboutlinksbtn_16" src="images/ASCaboutlinksbtn_16.gif" width="35" height="18" border="0" alt=""></a></td>
            <td>
                  <a href="ASCcontact.html"
                        onmouseover="changeImages('ASCaboutcontactbtn_17', 'images/ASCaboutcontactbtn_17-over.gif'); return true;"
                        onmouseout="changeImages('ASCaboutcontactbtn_17', 'images/ASCaboutcontactbtn_17.gif'); return true;"
                        onmousedown="changeImages('ASCaboutcontactbtn_17', 'images/ASCaboutcontactbtn_17-over.gif'); return true;"
                        onmouseup="changeImages('ASCaboutcontactbtn_17', 'images/ASCaboutcontactbtn_17-over.gif'); return true;">
                        <img name="ASCaboutcontactbtn_17" src="images/ASCaboutcontactbtn_17.gif" width="71" height="18" border="0" alt=""></a></td>
            <td>
                  <img src="images/ASCneighborhood_18.gif" width="8" height="18" alt=""></td>
      </tr>
      <tr>
            <td colspan="2">
                  <img src="images/ASCneighborhood_19.jpg" width="98" height="100" alt=""></td>
            <td colspan="11">
                  <img src="images/ASCneighborbannertype_20.gif" width="452" height="100" alt=""></td>
      </tr>
      <tr>
            <td colspan="14">
                  <img src="images/ASCneighborhood_21.gif" width="720" height="6" alt=""></td>
      </tr>
      <tr>
            <td colspan="14">
                  <img src="images/ASCneighborhood_22.gif" width="720" height="28" alt=""></td>
      </tr>
      <tr>
            <td colspan="6" rowspan="2" valign="top" bgcolor="#FFFFFF"><p><span class="style6">Neighborhood Developments<br>
                <span class="style16">Each neighborhood below is special to ASC. They understand that finding the right place is important to you and your family. ASC invites you to read about each neighborhood and then search for your perfect home. If you cannot find a home that meets your criteria, contact their office to discuss a beautiful, new custom-built home!</span></span></p>
              <table width="427" cellpadding="10" cellspacing="15">
            <tr>
              <td width="165" align="left" valign="top"><span class="style12"><strong>Brannon's Crossing</strong><br>
              &bull; Northwest Dothan<br>
              &bull; Off of Murphy Mill Road<br>
              &bull; Community pond<br>
              &bull; Spacious lots<br>
              &bull; Conveniently located near Kelly Springs Elementary School &amp; Providence Christian.<br>
              <span class="style17"><br>
              <span class="style18">&gt;&gt;&gt;Find a home in Brannon's Crossing</span> </span></span></td>
              <td width="175"><img src="images/neighbor1.jpg" width="175" height="131" align="texttop"></td>
            </tr>
            <tr>
              <td align="left" valign="top"><span class="style12"><strong>Camden Ridge</strong><br>
              &bull; West of Ross Clark Circle<br>
&bull; Off of Fortner Street<br>
&bull; Spacious lots<br>
&bull; Homes between 2000-3000 sq. ft.<br>
              <br>
              <span class="style19">&gt;&gt;&gt;Find a home in Camden Ridge</span> </span></td>
              <td><img src="images/camden.jpg" width="175" height="131" align="texttop"></td>
            </tr>
            <tr>
              <td align="left" valign="top"><span class="style12"><strong>Crestwood Village</strong><br>
              &bull; West of Ross Clark Circle<br>
&bull; Off of Fortner Street<br>
&bull; Homes between 1350-1900 sq. ft.<br>
              <br>
              <span class="style19">&gt;&gt;&gt;Find a home in Crestwood Village </span></span></td>
              <td><img src="images/crestwood.jpg" width="175" height="131" align="texttop"></td>
            </tr>
            <tr>
              <td align="left" valign="top"><span class="style12"><strong>Grove Park</strong><br>
              &bull; Northwest Dothan<br>
&bull; Great location off Highway 84, close to Flowers Hospital<br>
&bull; Wonderful community atmosphere<br>
&bull; Many amenities &ndash; sidewalks, tree-lined streets, streetlights, <br>
community park with playground<br>
&bull; Homes between 1500-3000 sq. ft. <br>
              <br>
              <span class="style19">&gt;&gt;&gt;Find a home in Grove Park</span> </span></td>
              <td><img src="images/grovepark.jpg" width="175" height="163" align="texttop"></td>
            </tr>
            <tr>
              <td align="left" valign="top"><span class="style12"><strong>Highlands South &amp; The Village</strong><br>
              &bull; West of Ross Clark Circle<br>
&bull; Off of Highway 84 West and
Brannon Stand Road<br>
&bull; Convenient to Highlands Elementary<br>
&bull; Sidewalks, parks<br>
&bull; On Robert Trent Jones Golf Course<br>
&bull; The Village &ndash; <br>
homes between 2000-3000 sq. ft.<br>
&bull; Highlands South &ndash; <br>
homes between 2500-4000 sq. ft. <br>
              <span class="style17"><br>
              <span class="style18">&gt;&gt;&gt;Find a home in Highlands South or The Village </span></span></span></td>
              <td><img src="images/village.jpg" width="175" height="226" align="texttop"></td>
            </tr>
            <tr>
              <td align="left" valign="top"><span class="style12"><strong>Kelly Springs</strong><br>
              &bull; Northwest Dothan<br>
&bull; Off Murphy Mill and Barrington Road<br>
&bull; Near Kelly Springs Elementary and<br>
Providence Christian School<br>
&bull; Homes between 2000-3000 sq. ft.<br>
              <span class="style17"><br>
              <span class="style20">&gt;&gt;&gt;Find a home in Kelly Springs</span></span> </span></td>
              <td><img src="images/kelly.jpg" width="175" height="131" align="texttop"></td>
            </tr>
            <tr>
              <td align="left" valign="top"><span class="style12"><strong>Westbrook</strong><br>
              &bull; Northwest Dothan<br>
&bull; Off of John D. Odom Road<br>
&bull; Near Houston Academy, Flowers Hospital<br>
&bull; Sidewalks, streetlights<br>
&bull; Homes between 2000-3000 sq. ft.<br>
              <span class="style17"><br>
              <span class="style20">&gt;&gt;&gt;Find a home in Westbrook</span></span> </span></td>
              <td><img src="images/westbrook.jpg" width="175" height="131" align="texttop"></td>
            </tr>
            <tr>
              <td align="left" valign="top"><span class="style12"><strong>Pine Lake</strong><br>
              &bull; Southwest Dothan<br>
&bull; Off of Taylor Road<br>
&bull; Big community lake, park<br>
&bull; Homes between 1300-2500 sq. ft. <br>
              <br>
              <span class="style19">&gt;&gt;&gt;Find a home in Pine Lake</span> </span></td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td align="left" valign="top"><span class="style12"><strong>Reflections On The Water</strong> <br>
                &bull; Eufaula, AL<br>
                &bull; Off of Highway 431<br>
                &bull; Detailed craftsman-style lake houses<br>
                &bull; Lots of community amenities<br>
                <br>
                <span class="style21">&gt;&gt;&gt;Find a home in Reflections On The Water</span> </span></td>
              <td>&nbsp;</td>
            </tr>
          </table>
            
              <p>&nbsp;</p></td>
            <td bgcolor="#FFFFFF"></td>
            <td rowspan="2" bgcolor="#FFFFFF"></td>
            <td colspan="6" rowspan="2" bgcolor="#FFFFFF"></td>
      </tr>
      <tr>
            <td bgcolor="#FFFFFF"></td>
      </tr>
      <tr>
            <td colspan="16">
                  <img src="images/ASCneighborhood_28.gif" width="792" height="18" alt=""></td>
      </tr>
      <tr>
            <td>
                  <img src="images/spacer.gif" width="35" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="170" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="48" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="50" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="79" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="49" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="33" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="39" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="14" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="23" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="28" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="73" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="35" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="71" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="8" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="37" height="1" alt=""></td>
      </tr>
</table>
<div align="center" class="style25"><span class="style26">For problems contact Webmaster.&nbsp; | &nbsp;Site design by Norma Hanson &amp; Associates. <br>
  <!-- End ImageReady Slices -->
  </span></div>
</body>
</html>
0
Comment
Question by:rawilkins
2 Comments
 
LVL 9

Expert Comment

by:fuzzboxer
ID: 18879933
To me, it looks like your problems stems from using Photoshop slices.  Slices tries to fit everything into a table.  All of your different sized images don't mesh well together and the different row/column spans do not space correctly.  If you must use slices, try to keep your slices on the horizontal and cut as few times as possible.

However, the ideal solution would be to use CSS with a few images to achieve the results you desire.  In your header, I see what could be three images and a menu.  Currently, it is split into about 10 images.
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 total points
ID: 18880120
Hi rawilkins,

Your colspans are screwed up.

First row of the table:

<tr>

            <td colspan="16">
                  <img src="images/ASCneighborhood_01.gif" width="792" height="36" alt=""></td>
      </tr>


16 columns.

Second row:

      <tr>
            <td rowspan="8" bgcolor="#FFFFFF">
                  <img src="images/ASCneighborhood_02.gif" width="35" height="486" alt=""></td>
            <td>
                  <img src="images/ASCneighborlogo_03.gif" width="170" height="46" alt=""></td>
            <td colspan="8">

                  <img src="images/ASCneighborhood_04.gif" width="335" height="46" alt=""></td>
            <td colspan="5">
                  <img src="images/ASCneighborcontact_05.gif" width="215" height="46" alt=""></td>
            <td rowspan="8" bgcolor="#FFFFFF"></td>
      </tr>

29 columns.

Third row:

      <tr>
            <td rowspan="3">
                  <img src="images/ASCneighborimage_07.jpg" width="170" height="127" alt=""></td>
            <td colspan="2">

                  <img src="images/ASCneighborhood_08.jpg" width="98" height="9" alt=""></td>
            <td colspan="11">
                  <img src="images/ASCneighborhood_09.gif" width="452" height="9" alt=""></td>
      </tr>

16 columns again.

The browser is trying to fix the different colspans and that results in the misaligned elements.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…
In an interesting question (https://www.experts-exchange.com/questions/29008360/) here at Experts Exchange, a member asked how to split a single image into multiple images. The primary usage for this is to place many photographs on a flatbed scanner…

840 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