PDA

View Full Version : Layout Coding help

RadicalNe6
07-24-2005, 07:43 PM
What my layout looks like sliced:http://img135.imageshack.us/img135/3777/cut0hf.gif

How my layout looks coded: http://www.geocities.com/endless0route/index.htm


As you can see its not the way I want it. The images are all disjointed and stuff and I'm having trouble putting them together. Heres my code:


<html>
<head>
<title>Endless Route</title>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<!-- first row -->
<tr valign="top">
<td width="800" height="64"><img src="01.jpg" alt="" width="800" height="64" /></td>
<td height="1" style="background: url(05.jpg) repeat-x">&nbsp;</td> <!-- fifth column, don't set any width, it will be used for a background -->
</tr>
<!-- second row -->
<tr valign="top">
<td width="246" height="269"><img src="02.jpg" alt="" width="246" height="269" /></td>
<td width="246" height="269"><table width="246" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="15" height="23"><img src="a.jpg" alt="" width="15" height="23"/></td>
<td width="358" height="23"><img src="b.jpg" alt="" width="358" height="23"/></td>
<td width="19" height="23"><img src="c.jpg" alt="" width="19" height="23"/></td>
</tr>
<tr valign="top">
<td width="15" height="412"><img src="d.jpg" alt="" width="15" height="412" /></td>
<td width="358" height="412" style="background:url(e.jpg) no-repeat">&nbsp;</td>
<td width="19" height="412"><img src="f.jpg" alt="" width="19" height="412" /></td>
</tr>
<tr valign="top">
<td width="15" height="61"><img src="g.jpg" alt="" width="15" height="61" /></td>
<td width="358" height="61"><img src="h.jpg" alt="" width="358" height="61" /></td>
<td width="19" height="61"><img src="i.jpg" alt="" width="19" height="61" /></td>
</tr>
</table></td>
<td width="60" height="248"><img src="09.jpg" alt="" width="60" height="248" /></td>
<td height="248" style="background: url(e.jpg) repeat-x">&nbsp;</td>
</tr>
<!-- third row -->
<tr valign="top">
<td width="29" height="24"><img src="101.jpg" alt="" width="29" height="24"/></td>
<td width="191" height="24"><img src="102.jpg" alt="" width="191" height="24"/></td>
<td width="26" height="24"><img src="103.jpg" alt="" width="26" height="24"/></td>
</tr>
<tr valign="top">
<td width="29" height="180"><img src="104.jpg" alt="" width="29" height="180" /></td>
<td width="191" height="180" style="background:url(105.jpg) no-repeat">&nbsp;</td>
<td width="26" height="180"><img src="106.jpg" alt="" width="26" height="180" /></td>
</tr>
<tr valign="top">
<td width="29" height="23"><img src="107.jpg" alt="" width="29" height="23" /></td>
<td width="191" height="23"><img src="108.jpg" alt="" width="191" height="23" /></td>
<td width="26" height="23"><img src="109.jpg" alt="" width="26" height="23" /></td>
</tr>
</table></td>
<td width="60" height="248"><img src="09.jpg" alt="" width="60" height="248" /></td>
<td height="248" style="background: url(105.jpg) repeat-x">&nbsp;</td>
</tr>
</table>
</body>
</html>
RadicalNe6
07-24-2005, 08:09 PM
and ideas or help?
jhereg
07-25-2005, 08:46 AM
When working with tables, remember that it wants to be like a box. This means that if you set a row to a height, then all columns in that row will be that height, and if you set a column to a width, all rows with that colum will be set to that width (this also means if you set a height or with to larger value, it will use the largest value). The way around this is to nest tables in tables. I have fixed up your code below (because it had a lot of details to it, thought it would be eaiesr than trying to explain what to do at each step). One of the picutre links does not work, the 09.jpg.


<html>
<head>
<title>Endless Route</title>
</head>
<body bgcolor='black'>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="800" height="64"></td>
</tr>
<tr valign="top"><td><table border='0'><tr><td><table><tr>
<td width="246" height="269"><img src="02.jpg" alt="" width="246" height="269" /></td>
</tr><tr>
<td><table border='0' cellspacing='0' cellpadding='0'>
<tr border='0'>
<td width="29" height="24"><img src="101.jpg" alt="" width="29" height="24"/></td>
<td width="191" height="24"><img src="102.jpg" alt="" width="191" height="24"/></td>
<td width="26" height="24"><img src="103.jpg" alt="" width="26" height="24"/></td>
</tr>
<tr>
<td width="29" height="180"><img src="104.jpg" alt="" width="29" height="180" /></td>
<td width="191" height="180" style="background:url(105.jpg) no-repeat">&nbsp;</td>
<td width="26" height="180"><img src="106.jpg" alt="" width="26" height="180" /></td>
</tr>
<tr>
<td width="29" height="23"><img src="107.jpg" alt="" width="29" height="23" /></td>
<td width="191" height="23"><img src="108.jpg" alt="" width="191" height="23" /></td>
<td width="26" height="23"><img src="109.jpg" alt="" width="26" height="23" /></td>
</tr>
</table></td>
</tr></table></td>
<td width="246" height="269"><table width="246" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15" height="23"><img src="a.jpg" alt="" width="15" height="23"/></td>
<td width="358" height="23"><img src="b.jpg" alt="" width="358" height="23"/></td>
<td width="19" height="23"><img src="c.jpg" alt="" width="19" height="23"/></td>
</tr>
<tr valign="top">
<td width="15" height="412"><img src="d.jpg" alt="" width="15" height="412" /></td>
<td width="358" height="412" style="background:url(e.jpg) no-repeat">&nbsp;</td>
<td width="19" height="412"><img src="f.jpg" alt="" width="19" height="412" /></td>
</tr>
<tr valign="top">
<td width="15" height="61"><img src="g.jpg" alt="" width="15" height="61" /></td>
<td width="358" height="61"><img src="h.jpg" alt="" width="358" height="61" /></td>
<td width="19" height="61"><img src="i.jpg" alt="" width="19" height="61" /></td>
</tr>
</table></td>
<td width="60"><img src="09.jpg" alt="" width="60"/></td>
<td width="70"></td>
</tr></table></td></tr><tr><td height='60'></td></tr></table>
</body>
</html>