logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 11-23-2013, 12:49 AM   #1
phanta89
 
Join Date: Nov 2013
Posts: 4
Default Inserting text in dreamweaver changes image locations when previewed in firefox/IE

I am making my 2nd website in Dreamweaver. My process is to make the design in photoshop, then save for web and bring it into dreamweaver where I put the text etc.
Worked fine with first website, but with this one, whenever I delete the image where I want to put the text (image is invisible - just one of the slices exported from photoshop) the rest of the images (header etc.) move to different locations of the page when viewed in firefox or IE (Dreamweaver, Chrome and Safari are fine)

Here's the code - Like I said I mainly use photoshop to make the website and dreamweaver to put in text/links so I really don't know anything about html/css stuff
HTML Code:
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org">
<title>Aliitasit's Website 02v8.1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
body {
        background-image: url(../background_4.3.jpg);
        background-repeat: repeat;
}
-->
</style>

<style type="text/css">
 body {
  background-color: #AF9D9C;
 }
</style>
</head>
<body>
<!-- Save for Web Slices (Aliitasit's Website 02v8.1.psd) -->
<table width="1200" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td rowspan="4"><img src="images/tasi8.3_01.png" width="116" height="1232" alt=""></td>
<td colspan="2"><img src="images/home.png" width="181" height="92" alt=""></td>
<td><img src="images/service.png" width="159" height="92" alt=""></td>
<td><img src="images/contact.png" width="179" height="92" alt=""></td>
<td colspan="2" rowspan="2"><img src="images/tasi8.3_05.png" width="565" height="208" alt=""></td>
</tr>
<tr>
<td colspan="4"><img src="images/tasi8.3_06.png" width="519" height="116" alt=""></td>
</tr>
<tr>
<td rowspan="2"><img src="images/tasi8.3_07.png" width="136" height="1024" alt=""></td>
<td colspan="4"><img src="images/title.png" width="670" height="59" alt=""></td>
<td rowspan="2"><img src="images/tasi8.3_09.png" width="278" height="1024" alt=""></td>
</tr>
<tr>
<td colspan="4"><img src="images/tasi8.3_10.png" width="670" height="965" alt=""></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="116" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="136" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="45" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="159" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="179" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="287" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="278" height="1" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

So that looks fine, but when i change this:
HTML Code:
<tr>
<td colspan="4"><img src="images/tasi8.3_10.png" width="670" height="965" alt=""></td>
</tr>
<tr>
To this
HTML Code:
<tr>
<td colspan="4">(&nbsp; or text/content here)</td>
</tr>
<tr>
the header and home/contact etc. jump to the bottom of the page..
Weird thing is that other website I made seems to have almost the exact same setup/code but none of these problems :S
Any help much appreciated!
phanta89 is offline   Reply With Quote
Old 11-23-2013, 04:48 PM   #2
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Letting Ps convert your design into HTML is asking for troubles. Well... actually... developing websites is solving problems all the time, but if you slice the design yourself & code it (the right way) yourself you will have at least control over it.

Now you end up with a bunch of tables which were the old way (12 to 20 years ago) of constructing a layout, but they're actually not meant for this and they're very inflexible.

While it's only just your second website, I would recommend just to learn HTML & CSS, so you can code your design yourself following best practices.
This is a free 30 day video tutorial which is already from 2011, but still stands.

http://freecourses.tutsplus.com/30-d...-html-and-css/





...
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 11-24-2013, 09:46 AM   #3
phanta89
 
Join Date: Nov 2013
Posts: 4
Default

Thanks for that gentleone. The tutorial looks good, however, I am meeting the client tomorrow and she wants the website up asap, so a quick fix in the meantime would be great if anyone has one.
phanta89 is offline   Reply With Quote
Old 11-24-2013, 10:06 AM   #4
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

To be honest... you're far from ready to do clients work.

But you want a quick and dirty fix... try this:

HTML Code:
<tr>
  <td collspan="4">
    <table width="670" height="965" border="0" cellpadding="0" cellspacing="0">
      <tr>
         <td>
           <p>your text</p>
         </td>
       </tr>
     </table>
   </td>
</tr>
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 11-25-2013, 10:09 PM   #5
phanta89
 
Join Date: Nov 2013
Posts: 4
Default

Well thanks for the help, but for some reason that code didn't fix anything :S
phanta89 is offline   Reply With Quote
Old 11-26-2013, 07:39 AM   #6
Mackajjan
 
Join Date: Nov 2013
Posts: 1
Default

Try leaving the image and insert a div just before the start of the image, style the div to be the same size as the image. That will make a text area same size, but the image design will stay intact. Good luck phanta89
Mackajjan is offline   Reply With Quote
Old 11-26-2013, 09:52 AM   #7
phanta89
 
Join Date: Nov 2013
Posts: 4
Default

Mackajjan, you are a legend! Inserting a div tag fixed everything, thank you so much!!
phanta89 is offline   Reply With Quote
Old 11-26-2013, 12:31 PM   #8
d a v e
 
Join Date: Feb 2006
Location: finland
Posts: 1,684
Default

fixed for now maybe... but as gentleone says you're a long way from offering sites to clients - learn the basics of he trade first before offering your services. you're just making problems for yourself because you don't yet have the underestanding of coding and good practices.

it just devalues our profession and ilitmately might give you a bad name with prospective clients.

what are you going to do when next (or this!) client mentions they'd like a mobile version?

suggest you make some practice sites after this one and getting your skills up to scratch before selling your sevices

p.s. hopefully users won't need to increase text size on the current clients site or it will break like a waterballoon
d a v e is offline   Reply With Quote
Old 11-27-2013, 07:21 PM   #9
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

Dodged a bullet phanta89 Good luck!
domedia is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 07:39 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com