HTML Forum

**ty_the3rd** · 07:15 PM

Hi everyone! I have just started getting my feet wet in the nice warm waters of the web design pool, when I banged my head into a very basic problem. After slicing an image consisting of the design for a home page, I threw it in a HTML table I did in Dreamweaver. I haven't played with this things for a good while now (and even when I played in the past, it was all an intermediates' game), so I don't remember what I was doing back then in this situations. What the problem is the HTML page shows (when previewed) the borders of the table (actually not really the borders but you can see the separating line between the cells). Could you please tell me what my dead brain cells used to contain on this subject? 'Coz I don't remember what I was doing. I have set the border, cellpadding and cellspacing to 0. What else needs to go? Or what is the proper way of doing this? I understand that CSS is prefered nowadays to the use of tables. I know there are zillions of sites for CSS tutorials, but would any of you be able to jump-start me (or point me in the right direction for a quick start) if CSS is the way forward - as this little project is something a friend of mine urgently needed some help with? Much appreciated and many thanks in advanced for any replies! here is a link to my little testing area to see what I mean: http://www.xabcx.iudean.net/index.html Cheers!! Ty

**Nathand** · 11-30-2007, 12:33 AM

Just add:

Code:

<style type="text/css">
td{
border-spacing: 0;
padding: 0;
}
</style>

Between your "<header>" and "</header>" tags.

Nathan

**Nathand** · 11-30-2007, 12:44 AM

Here's a somewhat "cleaner" version of your file, IMHO:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Untitled Document</title>
<style type="text/css">
table{
width: 878px;
margin-left: auto;
margin-right: auto;
border: 0;
border-spacing: 0;
}

td{
padding: 0;
}
</style>
</head>
<body>
<table>
  <tbody><tr>
    <td><table border="0" cellspacing="0" width="878">
  <tbody><tr>
    <td><img src="index_files/top_1.gif"></td>
    <td><img src="index_files/top_2.gif"></td>
    <td><img src="index_files/top_3.gif"></td>
    <td><img src="index_files/top_4.gif"></td>
  </tr>
      </tbody></table>
      </td>
  </tr>
  <tr>
    <td><table>
      <tbody><tr>
        <td><img src="index_files/menu_first.gif"></td>
        <td><img src="index_files/services_dark.gif"></td>
        <td><img src="index_files/gallery_dark.gif"></td>
        <td><img src="index_files/contact_dark.gif"></td>
        <td><img src="index_files/menu_last.gif"></td>
        
      </tr>
    </tbody></table></td>
  </tr>
  <tr>
    <td><table>
      <tbody><tr>
        <td><img src="index_files/middle_1.gif"></td>
        <td><img src="index_files/middle_2.gif"></td>
        <td><img src="index_files/middle_3.gif"></td>
        <td><img src="index_files/middle_4.gif"></td>
      </tr>
    </tbody></table></td>
  </tr>
  <tr>
    <td><table>
      <tbody><tr>
        <td><img src="index_files/bottom_1.gif"></td>
        <td><img src="index_files/bottom_2.gif"></td>
        <td><img src="index_files/bottom_3.gif"></td>
        <td><img src="index_files/bottom_4.gif"></td>
      </tr>
    </tbody></table></td>
  </tr>
</tbody></table>

<map name="Map" id="Map"><area shape="rect" coords="213,-1,288,17" href="http://www.xabcx.iudean.net/index.html"><area shape="rect" coords="299,1,374,18" href="http://www.xabcx.iudean.net/index.html"><area shape="rect" coords="390,2,465,17" href="http://www.xabcx.iudean.net/index.html">


</map>
</body>
</html>

Nathan

**LadynRed** · 11-30-2007, 04:15 PM

Actually, you're be far better off ditching the tables completely and step into the 21st century of web design and table-less layouts. Since you're basically starting over, now would be the time to forget what you did in the past and start anew

.

**Nathand** · 11-30-2007, 04:35 PM

Cough *She doesn't like tables* cough...

**LadynRed** · 11-30-2007, 05:16 PM

Ya got that did ya ?

**blue-dreamer** · 11-30-2007, 05:17 PM

Well not quite true, our lady loves using tables for tabulated data

**johneva** · 11-30-2007, 10:46 PM

Listen to LadynRed tables suck for website layout, they have there uses and that is displaying tabular data not doing whole page layouts.

**ty_the3rd** · 08:18 PM

Thanks for replies, Lady and gentelmen!
So, as I thought: CSS is the way forward (as our Lady sayeth). But, alas, oh Ty, how will thou doeth that, for thy knowledge of CSS is not great?

Or maybe the Lady will show thee mercy and instucteth thee into the fine arts of CSS (or at least kick-starteth thee on this one).

And just to make things even more complicated, how on earth would I get a template that would hold my sliced image, and the area where (in the image) text is make it the only editable area and have the image_text replaced with ... editable text (sorry if I am expressing myself in a confusing manner) - either in CSS or in the "bad old" table way?

Ty

**chrishirst** · 12-02-2007, 09:33 AM

don't slice the image and use it as the background of a <div> sized appropriately

background-image:url(images/image.ext);
background-position:center center;

Then you overlay and position the text accordingly

**ty_the3rd** · 12-02-2007, 06:10 PM

Cheers, Chris! I am not sure I get the first sentence though. If I "don't slice the image", what should I do with it? Use the whole image as a background? Ty

**chrishirst** · 12-02-2007, 07:01 PM

Yep,

Once it's cached by browsers it won't take up any loading time.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!