Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Image problem in dreamweaver all spread out

Posted on 2007-04-09
2
Medium Priority
?
242 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 1500 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

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

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…
I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
In this brief tutorial Pawel from AdRem Software explains how you can quickly find out which services are running on your network, or what are the IP addresses of servers responsible for each service. Software used is freeware NetCrunch Tools (https…
Visualize your data even better in Access queries. Given a date and a value, this lesson shows how to compare that value with the previous value, calculate the difference, and display a circle if the value is the same, an up triangle if it increased…

670 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