Solved

Image problem in dreamweaver all spread out

Posted on 2007-04-09
2
241 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

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…
This tutorial will teach you the special effect of super speed similar to the fictional character Wally West aka "The Flash" After Shake : http://www.videocopilot.net/presets/after_shake/ All lightning effects with instructions : http://www.mediaf…
In this video you will find out how to export Office 365 mailboxes using the built in eDiscovery tool. Bear in mind that although this method might be useful in some cases, using PST files as Office 365 backup is troublesome in a long run (more on t…

626 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