PDA

View Full Version : Help - I am trying to code, but the images aren't showing up

Ty_Ty_McFly
08-24-2005, 07:29 PM
I followed this tutorial:

http://www.magitek-designs.net/index.php?magitek=tutorials_tablelay_00
http://www.magitek-designs.net/index.php?magitek=tutorials_tablelay_01
http://www.magitek-designs.net/index.php?magitek=tutorials_tablelay_02
http://www.magitek-designs.net/index.php?magitek=tutorials_tablelay_03

I have sliced up the images, but when it comes to the coding part:

http://www.magitek-designs.net/index.php?magitek=tutorials_tablelay_04

I can't get the images to show up. I have uploaded them onto my account at geocities. Can anybody help?
mandarinspyce
08-24-2005, 08:11 PM
#1: Are your image links pointing to the correct directory (ie, if you have pict001.jpg in an images directory, do the links point to images/pict001.jpg)?

#2: Would you be able to post your code so we could see exactly what you're havging trouble with. It could be a simple error in code you're overlooking. Happens all the time :)
Ty_Ty_McFly
08-24-2005, 08:32 PM
I put the basic code in:

<html>
<head>
<title>(Site Title Here)</title>
</head>

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginheight="0" marginwidth="0">


(your table HTML code will eventually go here)


</body>
</html>

and it says this:

You'll notice that we have two rows. One for the image header, and one for everything else. The first row is made of only one collumn. The second row is made out if five collumns for the menu area, the content area, and the three spacers. There are always the same amount of collumns on each row, so how will we put one large image header across five collumns?

The solution is the handy-dandy colspan cell property! We will add colspan="5" to our first <td> tag to instruct the browser to make that cell to span the space of five collumns. Perfect!



The thing is, i don't know where to add thr colspan=*5* tag.
mandarinspyce
08-24-2005, 08:45 PM
Well all the code you need is located right on that page:

<table width="(width of top.jpg)" height="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td height="(height of top.jpg)" colspan="5"><img src="top.jpg" width="(width of top.jpg)" height="(height of top.jpg)" border="0"></td>
</tr>
<tr>
<td valign="top" width="(width of lefttop.jpg)" background="leftbg.jpg"><img src="lefttop.jpg" width="(width of lefttop.jpg)" height="(height of lefttop.jpg)" border="0"></td>
<td valign="top" width="(width of menutop.jpg)" background="menubg.jpg"><img src="menutop.jpg" width="(width of menutop.jpg)" height="(height of menutop.jpg)" border="0">

<p>This is the side menu. Fantastic!</p>

</td>
<td valign="top" width="(width of middletop.jpg)" background="middlebg.jpg"><img src="middletop.jpg" width="(width of middletop.jpg)" height="(height of middletop.jpg)" border="0"></td>
<td valign="top" width="(width of content.jpg)" background="content.jpg">

<p>This is the content area. Yay!!</p>

</td>
<td valign="top" width="(width of righttop.jpg)" background="rightbg.jpg"><img src="righttop.jpg" width="(width of righttop.jpg)" height="(height of righttop.jpg)" border="0"></td>
</tr>
</table>

So your code will end up looking like this:

<html>
<head>
<title>(Site Title Here)</title>
</head>

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginheight="0" marginwidth="0">


<table width="(width of top.jpg)" height="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td height="(height of top.jpg)" colspan="5"><img src="top.jpg" width="(width of top.jpg)" height="(height of top.jpg)" border="0"></td>
</tr>
<tr>
<td valign="top" width="(width of lefttop.jpg)" background="leftbg.jpg"><img src="lefttop.jpg" width="(width of lefttop.jpg)" height="(height of lefttop.jpg)" border="0"></td>
<td valign="top" width="(width of menutop.jpg)" background="menubg.jpg"><img src="menutop.jpg" width="(width of menutop.jpg)" height="(height of menutop.jpg)" border="0">

<p>This is the side menu. Fantastic!</p>

</td>
<td valign="top" width="(width of middletop.jpg)" background="middlebg.jpg"><img src="middletop.jpg" width="(width of middletop.jpg)" height="(height of middletop.jpg)" border="0"></td>
<td valign="top" width="(width of content.jpg)" background="content.jpg">

<p>This is the content area. Yay!!</p>

</td>
<td valign="top" width="(width of righttop.jpg)" background="rightbg.jpg"><img src="righttop.jpg" width="(width of righttop.jpg)" height="(height of righttop.jpg)" border="0"></td>
</tr>
</table>


</body>
</html>

Then you just have to slice up your image to fit the code.
However, (though I shouldn't be saying this) this is why I simply use the slicing tool in Photoshop or Fireworks, then export it as an HTML file. It generates all the code I'll ever need :)
Ty_Ty_McFly
08-24-2005, 09:47 PM
Hey thanks for the code! I typed everything in, but it came up like this:

http://img45.imageshack.us/my.php?image=layout4rj.png

Here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>(Site Title Here)</title>
</head>

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginheight="0" marginwidth="0">


<table width="748" height="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td height="102" colspan="5"><img src="top.jpg" width="748" height="102" border="0"></td>
</tr>
<tr>
<td valign="top" width="396" background="leftbg.jpg"><img src="lefttop.jpg" width="396" height="16" border="0"></td>
<td valign="top" width="318" background="menubg.jpg"><img src="menutop.jpg" width="318" height="238" border="0">

<p>This is the side menu. Fantastic!</p>

</td>
<td valign="top" width="80" background="middlebg.jpg"><img src="middletop.jpg" width="80" height="398" border="0"></td>
<td valign="top" width="304" background="content.jpg">

<p>This is the content area. Yay!!</p>

</td>
<td valign="top" width="56" background="rightbg.jpg"><img src="righttop.jpg" width="56" height="406" border="0"></td>
</tr>
</table>


</body>
</html>
flahoneyboo
08-24-2005, 10:38 PM
thats the exact tutorial I used on mine but my problem was when I put the images after they were sliced the layout turned out all messed up looking :dead:

http://i23.photobucket.com/albums/b392/spectacularluvsyou/rihannalayout.gif
thats what my layout is gonna look when its all done
Ty_Ty_McFly
08-24-2005, 11:25 PM
^Yeah that is happening for me too. They don't match up and it is really annoying.