PDA

View Full Version : Text alignment in dreamweaver


hduk
03-11-2007, 05:11 PM
Hey people,

forgive me if this is a simple question but i am new to dreamweaver and not having much success.

I have drawn a basic layout in fireworks and exported the html. This has been imported into dreamweaver. I have added a layer with some text however even though the text is perfect in design view when you preview in browser the text has a different alignment.

I cant seem to crack it, any suggestions? Is my workflow wrong?

Thanks in advance

domedia
03-11-2007, 06:23 PM
Hi hduk and welcome to the forums :)

Read the link about posting in my signature and post your code please.

hduk
03-11-2007, 07:00 PM
Hey, i did read the guidelines before posting honest!! I thought i might of just made a simple common mistake although i did do a search first but couldn;t find a match. I have also sat through hours of dreamweaver video so i guess i havent heard a lot.

Here is the code :-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Index.gif</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
td img {display: block;}body {
background-color: #333333;
}
#Layer1 {
position:absolute;
left:131px;
top:561px;
width:765px;
height:32px;
z-index:1;
visibility: inherit;
}
#Layer2 {
position:absolute;
left:127px;
top:555px;
width:774px;
height:43px;
z-index:1;
}
.style2 {
font-size: 9px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<!--Fireworks 8 Dreamweaver 8 target. Created Fri Mar 09 21:28:55 GMT+0000 (GMT Standard Time) 2007-->
<script language="JavaScript1.2" type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('Images/Index_r2_c1_f2.gif','Images/Index_r3_c1_f2.gif','Images/Index_r4_c1_f2.gif','Images/Index_r4_c4_f2.gif','Images/Index_r5_c1_f2.gif','Images/Index_r6_c1_f2.gif','Images/Index_r7_c4_f2.gif','Images/Index_r8_c1_f2.gif','Images/Index_r9_c1_f2.gif','Images/Index_r10_c4_f2.gif','Images/Index_r12_c4_f2.gif','Images/Index_r13_c4_f2.gif');">
<div id="Layer2">
<table width="774" height="44" border="0" align="center">
<tr>
<td width="768"><p><span class="style2"><strong>The information on this website is for the use of residents of the United Kingdom only. No representations are made as to whether the information is applicable or available in any other country which may have access to it.</strong> <br />
Openwork Limited offers insurance and investment advice from a limited number of product providers and advice on mortgages representative of the whole market. </span></p></td>
</tr>
</table>
</div>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="775">
<!-- fwtable fwsrc="Concept 1.6.png" fwbase="Index.gif" fwstyle="Dreamweaver" fwdocid = "55632927" fwnested="0" -->
<tr>
<td><img src="Images/spacer.gif" width="199" height="1" border="0" alt="" /></td>
<td><img src="Images/spacer.gif" width="393" height="1" border="0" alt="" /></td>
<td><img src="Images/spacer.gif" width="44" height="1" border="0" alt="" /></td>
<td><img src="Images/spacer.gif" width="139" height="1" border="0" alt="" /></td>
<td><img src="Images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>

<tr>
<td colspan="4"><img name="Index_r1_c1" src="Images/Index_r1_c1.gif" width="775" height="90" border="0" id="Index_r1_c1" alt="" /></td>
<td><img src="Images/spacer.gif" width="1" height="90" border="0" alt="" /></td>
</tr>
<tr>
<td><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Index_r2_c1','','Images/Index_r2_c1_f2.gif',1);"><img name="Index_r2_c1" src="Images/Index_r2_c1.gif" width="199" height="25" border="0" id="Index_r2_c1" alt="" /></a></td>
<td rowspan="13"><img name="Index_r2_c2" src="Images/Index_r2_c2.gif" width="393" height="510" border="0" id="Index_r2_c2" alt="" /></td>
<td rowspan="2" colspan="2"><img name="Index_r2_c3" src="Images/Index_r2_c3.gif" width="183" height="45" border="0" id="Index_r2_c3" alt="" /></td>
<td><img src="Images/spacer.gif" width="1" height="25" border="0" alt="" /></td>
</tr>
<tr>
<td><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Index_r3_c1','','Images/Index_r3_c1_f2.gif',1);"><img name="Index_r3_c1" src="Images/Index_r3_c1.gif" width="199" height="20" border="0" id="Index_r3_c1" alt="" /></a></td>
<td><img src="Images/spacer.gif" width="1" height="20" border="0" alt="" /></td>
</tr>
<tr>
<td><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Index_r4_c1','','Images/Index_r4_c1_f2.gif',1);"><img name="Index_r4_c1" src="Images/Index_r4_c1.gif" width="199" height="20" border="0" id="Index_r4_c1" alt="" /></a></td>
<td rowspan="11"><img name="Index_r4_c3" src="Images/Index_r4_c3.gif" width="44" height="465" border="0" id="Index_r4_c3" alt="" /></td>
<td rowspan="3"><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Index_r4_c4','','Images/Index_r4_c4_f2.gif',1);"><img name="Index_r4_c4" src="Images/Index_r4_c4.gif" width="139" height="46" border="0" id="Index_r4_c4" alt="" /></a></td>
<td><img src="Images/spacer.gif" width="1" height="20" border="0" alt="" /></td>
</tr>
<tr>
<td><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Index_r5_c1','','Images/Index_r5_c1_f2.gif',1);"><img name="Index_r5_c1" src="Images/Index_r5_c1.gif" width="199" height="20" border="0" id="Index_r5_c1" alt="" /></a></td>
<td><img src="Images/spacer.gif" width="1" height="20" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2"><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Index_r6_c1','','Images/Index_r6_c1_f2.gif',1);"><img name="Index_r6_c1" src="Images/Index_r6_c1.gif" width="199" height="20" border="0" id="Index_r6_c1" alt="" /></a></td>
<td><img src="Images/spacer.gif" width="1" height="6" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="3"><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Index_r7_c4','','Images/Index_r7_c4_f2.gif',1);"><img name="Index_r7_c4" src="Images/Index_r7_c4.gif" width="139" height="40" border="0" id="Index_r7_c4" alt="" /></a></td>
<td><img src="Images/spacer.gif" width="1" height="14" border="0" alt="" /></td>
</tr>
<tr>
<td><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Index_r8_c1','','Images/Index_r8_c1_f2.gif',1);"><img name="Index_r8_c1" src="Images/Index_r8_c1.gif" width="199" height="20" border="0" id="Index_r8_c1" alt="" /></a></td>
<td><img src="Images/spacer.gif" width="1" height="20" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2"><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Index_r9_c1','','Images/Index_r9_c1_f2.gif',1);"><img name="Index_r9_c1" src="Images/Index_r9_c1.gif" width="199" height="20" border="0" id="Index_r9_c1" alt="" /></a></td>
<td><img src="Images/spacer.gif" width="1" height="6" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="2"><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Index_r10_c4','','Images/Index_r10_c4_f2.gif',1);"><img name="Index_r10_c4" src="Images/Index_r10_c4.gif" width="139" height="38" border="0" id="Index_r10_c4" alt="" /></a></td>
<td><img src="Images/spacer.gif" width="1" height="14" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="4"><img name="Index_r11_c1" src="Images/Index_r11_c1.gif" width="199" height="365" border="0" id="Index_r11_c1" alt="" /></td>
<td><img src="Images/spacer.gif" width="1" height="24" border="0" alt="" /></td>
</tr>
<tr>
<td><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Index_r12_c4','','Images/Index_r12_c4_f2.gif',1);"><img name="Index_r12_c4" src="Images/Index_r12_c4.gif" width="139" height="41" border="0" id="Index_r12_c4" alt="" /></a></td>
<td><img src="Images/spacer.gif" width="1" height="41" border="0" alt="" /></td>
</tr>
<tr>
<td><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Index_r13_c4','','Images/Index_r13_c4_f2.gif',1);"><img name="Index_r13_c4" src="Images/Index_r13_c4.gif" width="139" height="40" border="0" id="Index_r13_c4" alt="" /></a></td>
<td><img src="Images/spacer.gif" width="1" height="40" border="0" alt="" /></td>
</tr>
<tr>
<td><img name="Index_r14_c4" src="Images/Index_r14_c4.gif" width="139" height="260" border="0" id="Index_r14_c4" alt="" /></td>
<td><img src="Images/spacer.gif" width="1" height="260" border="0" alt="" /></td>
</tr>
</table>
</div>
</body>
</html>

The graphical content is fine but even though the text looks fine in design view its out of alignment in the browser and in addition when you resize the browser the changes to the text are different to the graphics.

Many thanks