PDA

View Full Version : Gaps between images


HinkDiezel
11-03-2010, 06:17 AM
I have created a web layout in Photoshop and sliced it properly, and when I open the html file in dreamweaver there are a couple gaps that allow the background to show through the middle of my images. Any reason of why this happens? I made sure all my images have no border, I am a noob and just wanna get this to work properly, I have searched forums and tutorials and have not gotten any direct answer, any help will be greatly appreciated. My html code dreamweaver has given me is:<html>
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="center">
<!-- Save for Web Slices (Home.psd) -->
<table width="1200" height="2501" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000" id="Table_01">
<tr>
<td colspan="17">
<img src="images/Home_01.jpg" alt="" width="1200" height="56" border="0"></td>
</tr>
<tr>
<td colspan="13">
<img src="images/Home_02.jpg" alt="" width="1020" height="131" border="0"></td>
<td colspan="2">
<img src="images/Home_03.jpg" alt="" width="136" height="131" border="0"></td>
<td colspan="2">
<img src="images/Home_04.jpg" alt="" width="44" height="131" border="0"></td>
</tr>
<tr>
<td colspan="17">
<img src="images/Home_05.jpg" alt="" width="1200" height="269" border="0"></td>
</tr>
<tr>
<td colspan="4">
<img src="images/Home_06.jpg" alt="" width="228" height="33" border="0"></td>
<td>
<img src="images/Home_07.jpg" alt="" width="160" height="33" border="0"></td>
<td colspan="3">
<img src="images/Home_08.jpg" alt="" width="158" height="33" border="0"></td>
<td>
<img src="images/Home_09.jpg" alt="" width="157" height="33" border="0"></td>
<td colspan="3">
<img src="images/Home_10.jpg" alt="" width="154" height="33" border="0"></td>
<td>
<img src="images/Home_11.jpg" alt="" width="163" height="33" border="0"></td>
<td colspan="4">
<img src="images/Home_12.jpg" alt="" width="180" height="33" border="0"></td>
</tr>
<tr>
<td colspan="8">
<img src="images/Home_13.jpg" alt="" width="546" height="234" border="0"></td>
<td colspan="5">
<img src="images/Home_14.jpg" alt="" width="474" height="234" border="0"></td>
<td colspan="4">
<img src="images/Home_15.jpg" alt="" width="180" height="234" border="0"></td>
</tr>
<tr>
<td>
<img src="images/Home_16.jpg" alt="" width="55" height="94" border="0"></td>
<td>
<img src="images/Home_17.jpg" alt="" width="103" height="94" border="0"></td>
<td colspan="11">
<img src="images/Home_18.jpg" alt="" width="862" height="94" border="0"></td>
<td colspan="4">
<img src="images/Home_19.jpg" alt="" width="180" height="94" border="0"></td>
</tr>
<tr>
<td colspan="17">
<img src="images/Home_20.jpg" alt="" width="1200" height="44" border="0"></td>
</tr>
<tr>
<td>
<img src="images/Home_21.jpg" alt="" width="55" height="98" border="0"></td>
<td>
<img src="images/Home_22.jpg" alt="" width="103" height="98" border="0"></td>
<td colspan="15">
<img src="images/Home_23.jpg" alt="" width="1042" height="98" border="0"></td>
</tr>
<tr>
<td colspan="17">
<img src="images/Home_24.jpg" alt="" width="1200" height="56" border="0"></td>
</tr>
<tr>
<td>
<img src="images/Home_25.jpg" alt="" width="55" height="160" border="0"></td>
<td>
<img src="images/Home_26.jpg" alt="" width="103" height="160" border="0"></td>
<td colspan="15">
<img src="images/Home_27.jpg" alt="" width="1042" height="160" border="0"></td>
</tr>
<tr>
<td colspan="17">
<img src="images/Home_28.jpg" alt="" width="1200" height="41" border="0"></td>
</tr>
<tr>
<td>
<img src="images/Home_29.jpg" alt="" width="55" height="79" border="0"></td>
<td>
<img src="images/Home_30.jpg" alt="" width="103" height="79" border="0"></td>
<td colspan="15">
<img src="images/Home_31.jpg" alt="" width="1042" height="79" border="0"></td>
</tr>
<tr>
<td colspan="17">
<img src="images/Home_32.jpg" alt="" width="1200" height="58" border="0"></td>
</tr>
<tr>
<td>
<img src="images/Home_33.jpg" alt="" width="55" height="109" border="0"></td>
<td>
<img src="images/Home_34.jpg" alt="" width="103" height="109" border="0"></td>
<td colspan="15">
<img src="images/Home_35.jpg" alt="" width="1042" height="109" border="0"></td>
</tr>
<tr>
<td colspan="17">
<img src="images/Home_36.jpg" alt="" width="1200" height="421" border="0"></td>
</tr>
<tr>
<td colspan="11"><img src="images/Home_37.jpg" alt="" width="856" height="428" border="0"></td>
<td width="299" height="428" colspan="3"><img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyODc3MzE1MzI*MjUmcHQ9MTI4NzczMzQwMDIyNy ZwPTE1ODM2MSZkPSZnPTEmbz1kZDFjMjBhNTE1NmM*MmEwOWMz/YTFmNzBiMTkyNDUwYSZvZj*w.gif" /><div
style="width:300px; height:450px; overflow:hidden;"><center><div><embed src="http://www.soundclick.com/widgets/creatives/mp3PlayerPremium.swf" width="300" height="430" flashvars="bandid=1114686&ext=1" name="MP3PlayerPremium" type="application/x-shockwave-flash" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer"
/></div><div style="width: 300px; position: relative; top: -390px;"><a href="

Corrosive
11-03-2010, 06:42 AM
I have created a web layout in Photoshop and sliced it properly

That is your problem right there. That's not how you build a website. You need to learn to rebuild your layout with HTML and CSS (no tables) and then you'll have a lot more success with it all :)

kearnsy
11-03-2010, 08:34 AM
Hi Hinkdiezel

I started out exactly the same as you, exporting from photoshop, it was only later down the line that i started having problems with the design, when i wanted to add things etc. so i joined this forum.

I was a bit concerned at first thinking, 'I'm never gonna learn this' but after a bit of effort and hard work, things start to fit into place.

I reckon you have 2 options, well 3

1. Carry on exporting from photoshop, and learn the wrong way to do it, and have problems later on down the line
2. Learn the right way to do it in dreamweaver
3.Pay someone else to do it

You can still use photoshop for all of your design work, just don't export it from PS and let that write the code for you, instead, slice your images, export just the images, then as Corrosive said, rebuild it in DW

Just in case you haven't got time to learn the right way to do things, this tutorial might help, http://www.youtube.com/watch?v=DVfxe4pqvo8 but, and it's a big but, (I like big but's) you're more than likely going to have problems later on down the line

Corrosive
11-03-2010, 08:42 AM
Just in case you haven't got time to learn the right way to do things, this tutorial might help, http://www.youtube.com/watch?v=DVfxe4pqvo8 but, and it's a big but, (I like big but's) you're more than likely going to have problems later on down the line

Looking at the code I think the OP has this technique already ;)

DWcourse
11-03-2010, 08:48 PM
If you exported the layout from Photoshop it should have been fine until you changed something. Whatever it was you changed or added, that's where you should look for the issue.

And then follow everyone's advice and learn to do it correctly.