PDA

View Full Version : Problem with layout shifting down when typing...


markrees
01-04-2008, 10:36 AM
I just made the change from FrontPage to Dreamweaver.

Having created my layout in Photoshop/ImageReady I opened the site in Dreamweaver.

Whenever I type anything on the page and press enter (to move to the next paragraph) most of the other images on the page shift down.

Pressing delete doesnt bring it back up in line (as it used to do in Frontpage).

Is there any way of locking everything so it doesnt move or do I need to do something else.

Thanks in advance!

davidj
01-04-2008, 10:58 AM
need to see the code

markrees
01-04-2008, 11:20 AM
Thanks. Here's the code. Basically when I type in the main section on the right all the other images nearby all get shifted down the page. This then creates spaces between them all.

I just opened it in FrontPage just to see what it was like there - any it doesn't move down at all so I'm guessing it's DW where the issue lays.







<html>
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (index.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) {
index_07_over = newImage("images/index_07-over.jpg");
index_08_over = newImage("images/index_08-over.jpg");
index_09_over = newImage("images/index_09-over.jpg");
index_10_over = newImage("images/index_10-over.jpg");
index_11_over = newImage("images/index_11-over.jpg");
index_18_over = newImage("images/index_18-over.jpg");
index_22_over = newImage("images/index_22-over.jpg");
index_26_over = newImage("images/index_26-over.jpg");
preloadFlag = true;
}
}
// -->
</script>
<!-- End Preload Script -->
<style type="text/css">
<!--
.style1 {
font-family: Tahoma;
font-size: 10px;
color: #FFFFFF;
padding-left: 10px;
}
.style2 {
font-family: Tahoma;
font-size: 11px;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="preloadImages();">
<div align="center">
<!-- ImageReady Slices (index.psd) -->
<table id="Table_01" width="878" height="801" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="11">
<img src="images/index_01.jpg" width="878" height="7" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="3">
<img src="images/index_02.jpg" width="24" height="153" alt=""></td>
<td colspan="4">
<img src="images/index_03.jpg" width="302" height="114" alt=""></td>
<td>
<img src="images/index_04.jpg" width="187" height="114" alt=""></td>
<td colspan="3">
<img src="images/index_05.jpg" width="342" height="114" alt=""></td>
<td rowspan="15">
<img src="images/index_06.jpg" width="23" height="793" alt=""></td>
</tr>
<tr>
<td colspan="2">
<a href="#"
onmouseover="changeImages('index_07', 'images/index_07-over.jpg'); return true;"
onmouseout="changeImages('index_07', 'images/index_07.jpg'); return true;"
onmousedown="changeImages('index_07', 'images/index_07-over.jpg'); return true;"
onmouseup="changeImages('index_07', 'images/index_07-over.jpg'); return true;">
<img name="index_07" src="images/index_07.jpg" width="137" height="29" border="0" alt=""></a></td>
<td colspan="2">
<a href="#"
onmouseover="changeImages('index_08', 'images/index_08-over.jpg'); return true;"
onmouseout="changeImages('index_08', 'images/index_08.jpg'); return true;"
onmousedown="changeImages('index_08', 'images/index_08-over.jpg'); return true;"
onmouseup="changeImages('index_08', 'images/index_08-over.jpg'); return true;">
<img name="index_08" src="images/index_08.jpg" width="165" height="29" border="0" alt=""></a></td>
<td>
<a href="#"
onmouseover="changeImages('index_09', 'images/index_09-over.jpg'); return true;"
onmouseout="changeImages('index_09', 'images/index_09.jpg'); return true;"
onmousedown="changeImages('index_09', 'images/index_09-over.jpg'); return true;"
onmouseup="changeImages('index_09', 'images/index_09-over.jpg'); return true;">
<img name="index_09" src="images/index_09.jpg" width="187" height="29" border="0" alt=""></a></td>
<td>
<a href="#"
onmouseover="changeImages('index_10', 'images/index_10-over.jpg'); return true;"
onmouseout="changeImages('index_10', 'images/index_10.jpg'); return true;"
onmousedown="changeImages('index_10', 'images/index_10-over.jpg'); return true;"
onmouseup="changeImages('index_10', 'images/index_10-over.jpg'); return true;">
<img name="index_10" src="images/index_10.jpg" width="173" height="29" border="0" alt=""></a></td>
<td colspan="2">
<a href="#"
onmouseover="changeImages('index_11', 'images/index_11-over.jpg'); return true;"
onmouseout="changeImages('index_11', 'images/index_11.jpg'); return true;"
onmousedown="changeImages('index_11', 'images/index_11-over.jpg'); return true;"
onmouseup="changeImages('index_11', 'images/index_11-over.jpg'); return true;">
<img name="index_11" src="images/index_11.jpg" width="169" height="29" border="0" alt=""></a></td>
</tr>
<tr>
<td colspan="8">
<img src="images/index_12.jpg" width="831" height="10" alt=""></td>
</tr>
<tr>
<td rowspan="12">
<img src="images/index_13.jpg" width="23" height="640" alt=""></td>
<td colspan="4">
<img src="images/index_14.jpg" width="283" height="31" alt=""></td>
<td rowspan="11">
<img src="images/index_15.jpg" width="20" height="590" alt=""></td>
<td height="590" colspan="4" rowspan="11" valign="top"><p>&nbsp;</p>
</td>
</tr>
<tr>
<td colspan="2">
<img src="images/index_17.jpg" width="96" height="23" alt=""></td>
<td colspan="2">
<a href="#"
onmouseover="changeImages('index_18', 'images/index_18-over.jpg'); return true;"
onmouseout="changeImages('index_18', 'images/index_18.jpg'); return true;"
onmousedown="changeImages('index_18', 'images/index_18-over.jpg'); return true;"
onmouseup="changeImages('index_18', 'images/index_18-over.jpg'); return true;">
<img name="index_18" src="images/index_18.jpg" width="187" height="23" border="0" alt=""></a></td>
</tr>
<tr>
<td colspan="4">
<img src="images/index_19.jpg" width="283" height="33" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/index_20.jpg" width="283" height="37" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/index_21.jpg" width="96" height="23" alt=""></td>
<td colspan="2">
<a href="#"
onmouseover="changeImages('index_22', 'images/index_22-over.jpg'); return true;"
onmouseout="changeImages('index_22', 'images/index_22.jpg'); return true;"
onmousedown="changeImages('index_22', 'images/index_22-over.jpg'); return true;"
onmouseup="changeImages('index_22', 'images/index_22-over.jpg'); return true;">
<img name="index_22" src="images/index_22.jpg" width="187" height="23" border="0" alt=""></a></td>
</tr>
<tr>
<td colspan="4">
<img src="images/index_23.jpg" width="283" height="28" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/index_24.jpg" width="283" height="33" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/index_25.jpg" width="96" height="22" alt=""></td>
<td colspan="2">
<a href="#"
onmouseover="changeImages('index_26', 'images/index_26-over.jpg'); return true;"
onmouseout="changeImages('index_26', 'images/index_26.jpg'); return true;"
onmousedown="changeImages('index_26', 'images/index_26-over.jpg'); return true;"
onmouseup="changeImages('index_26', 'images/index_26-over.jpg'); return true;">
<img name="index_26" src="images/index_26.jpg" width="187" height="22" border="0" alt=""></a></td>
</tr>
<tr>
<td colspan="4">
<img src="images/index_27.jpg" width="283" height="33" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/index_28.jpg" alt="" width="283" height="124" border="0" usemap="#constructionline"></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/index_29.jpg" width="1" height="253" alt=""></td>
<td height="203" colspan="3" valign="top" bgcolor="#E6E5E0"><form name="form1" method="post" action="">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</form>
</td>
</tr>
<tr>
<td height="50" colspan="4" background="images/index_31.jpg"><p class="style1"><strong>address<br>
Tel: 0116 2713909</p></td>
<td height="50" colspan="3" background="images/index_32.jpg">&nbsp;</td>
<td height="50" background="images/index_33.jpg"><div align="center"><span class="style1"><strong>link.co.uk &copy;
2008</strong></span></div></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="23" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="95" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="42" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="145" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="20" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="187" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="173" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="12" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="157" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="23" height="1" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</div>
<map name="constructionline"><area shape="rect" coords="10,22,114,95" href="http://www.ukas.com (http://www.ukas.com/)" target="_blank">
<area shape="rect" coords="129,22,199,93" href="http://www.chas.gov.uk (http://www.chas.gov.uk/)" target="_blank">
<area shape="rect" coords="213,23,272,82" href="http://www.constructionline.co.uk (http://www.constructionline.co.uk/)" target="_blank">
</map></body>
</html>

domedia
01-04-2008, 02:39 PM
It looks like everything on your website is an image. Can you confirm this? If 'yes' you need to rethink your approach. Do you have this on a webpage somewhere so it's easier to look at?

markrees
01-04-2008, 02:45 PM
basically the site was designed in photoshop as normal then sliced up in imageready and then opened (as html) in dreamweaver.

can't upload anything more yet.

having said that for some reason when the images all get shifed down if you press F5 and refresh they all go back up how they should - so it looks like it's ok now.

thanks.