Solved

Image problem in dreamweaver all spread out

Posted on 2007-04-09
2
239 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

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

Suggested Solutions

Title # Comments Views Activity
WordPress on local PC and hosted 11 151
installing adobe creative cloud offline 4 6,965
Jquery submit form question 11 129
Adobe Acrobat Pro top display text upside down? 5 181
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 …
This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
Exchange organizations may use the Journaling Agent of the Transport Service to archive messages going through Exchange. However, if the Transport Service is integrated with some email content management application (such as an antispam), the admini…

751 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