PDA

View Full Version : Coding Expandable - +5 Rep For Help!



redtom
08-01-2007, 06:55 PM
I'm starting to learn to code my layouts but I keep getting Gaps when I have somthing expanding, how would I get rid of them?

Example: http://www.****************/uploads/f26243daf1.png

Thanks.

Heinous
09-01-2007, 09:23 AM
Show me the code please?

redtom
09-01-2007, 04:03 PM
I've edited it from when I took the pic but I still have the problem


<html>
<head>
<title>Teen-Tunes.com...The Place To Be!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body { backgroundcolor="#000000" } img { border;none; }

.subheader { font-size:10px
font-family: Aril, Verdana, Tahoma;
color:#4f1d1d;
padding:0pk 0pk 0px; }

.default { font-size:10px
font-family: Verdana, Aril, Tahoma;
color:#4f1d1d;
padding:5pk 0pk 5px; }

.side { font-size:10px
font-family: Verdana, Aril, Tahoma;
color:#606060;
padding:7pk 0pk 7px; }

</style>
</head>
<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="center">
<table id="Table_01" width="801" height="801" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="6" background="images/gray-left-of-banner.gif" width="63" height="177" alt=""></td>
<td colspan="22">
<img src="images/banner-top.gif" width="670" height="3" alt=""></td>
<td colspan="2" rowspan="5">
<img src="images/banner-right.gif" width="4" height="174" alt=""></td>
<td rowspan="6" background="images/gray-right-of-banner.gif" width="63" height="177" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="3" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/banner-left-side.gif" width="5" height="174" alt=""></td>
<td colspan="13">
<img src="images/banner-main.gif" width="298" height="51" alt="Teen-Tunes.com"></td>
<td colspan="8" rowspan="3">
<img src="images/Banner-graphics.gif" width="367" height="126" alt="Teen-Tunes.com"></td>
<td>
<img src="images/spacer.gif" width="1" height="51" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/banner-main-09.gif" width="15" height="75" alt="Teen-Tunes.com"></td>
<td colspan="5" background="images/the-place-to-be%21.gif" width="161" height="21" alt="the place to be!">
<div class=subheader>
The Place To Be!
</div>
</td>
<td colspan="6" rowspan="2">
<img src="images/banner-main-11.gif" width="122" height="75" alt="Teen-Tunes.com"></td>
<td>
<img src="images/spacer.gif" width="1" height="21" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/banner-main-12.gif" width="161" height="54" alt="Teen-Tunes.com"></td>
<td>
<img src="images/spacer.gif" width="1" height="54" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/left-of-home.gif" width="54" height="45" alt=""></td>
<td>
<img src="images/line-left-of-home.gif" width="1" height="45" alt=""></td>
<td>
<a href="#"><img src="images/home.gif" width="85" height="45" alt="Back Home"></td>
<td>
<img src="images/line-left-of-news.gif" width="1" height="45" alt=""></td>
<td colspan="5">
<a href="#"><img src="images/News.gif" width="97" height="45" alt="Whats Going On?"></td>
<td>
<img src="images/line-left-of-about.gif" width="1" height="45" alt=""></td>
<td colspan="2">
<a href="#"><img src="images/about.gif" width="90" height="45" alt="Who Are We?"></td>
<td>
<img src="images/line-left-of-radio.gif" width="2" height="45" alt=""></td>
<td>
<a href="#"><img src="images/radio.gif" width="90" height="45" alt="Shout It Out!"></td>
<td>
<a href="#"><img src="images/contact.gif" width="95" height="45" alt="Did You Say Somthing?"></td>
<td>
<img src="images/line-left-of-links.gif" width="1" height="45" alt=""></td>
<td>
<a href="#"><img src="images/links.gif" width="91" height="45" alt="Where Now?"></td>
<td>
<img src="images/line-right-of-links.gif" width="1" height="45" alt=""></td>
<td>
<img src="images/right-of-links.gif" width="56" height="45" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="45" alt=""></td>
</tr>
<tr>
<td colspan="23">
<img src="images/under-nav.gif" width="669" height="3" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="3" alt=""></td>
</tr>
<tr>
<td colspan="26">

<td>
<img src="images/spacer.gif" width="1" height="7" alt=""></td>
</tr>
<tr>
<td rowspan="24">

<td colspan="2" rowspan="23" background="images/nav-left.gif" width="9" height="560" alt=""></td>
<td colspan="7">
<img src="images/above-1.gif" width="214" height="8" alt=""></td>
<td rowspan="23" background="images/nav-right.gif" width="8" height="560" alt=""></td>
<td rowspan="24">

<td colspan="12" rowspan="2">
<img src="images/top-content.gif" width="433" height="15" alt=""></td>
<td colspan="2" rowspan="24">

<td>
<img src="images/spacer.gif" width="1" height="8" alt=""></td>
</tr>
<tr>
<td colspan="7" rowspan="2">
<a href="#"><img src="images/1home.gif" width="214" height="20" alt="Back Home"></td>
<td>
<img src="images/spacer.gif" width="1" height="7" alt=""></td>
</tr>
<tr>
<td colspan="12" rowspan="14" background="images/content-area.gif" width="433" height="286" alt="" valign="top">
<div class="default">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lectus. Vivamus pellentesque metus non velit. Donec pulvinar felis ut dui. Aenean vel nunc sed lorem congue dignissim. Praesent dignissim. Cras vel mi. In hac habitasse platea dictumst. Sed faucibus. Mauris vel tellus at nisl tincidunt scelerisque. Proin leo tortor, fringilla a, consequat a, semper vitae, magna. Mauris sodales.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lectus. Vivamus pellentesque metus non velit. Donec pulvinar felis ut dui. Aenean vel nunc sed lorem congue dignissim. Praesent dignissim. Cras vel mi. In hac habitasse platea dictumst. Sed faucibus. Mauris vel tellus at nisl tincidunt scelerisque. Proin leo tortor, fringilla a, consequat a, semper vitae, magna. Mauris sodales.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lectus. Vivamus pellentesque metus non velit. Donec pulvinar felis ut dui. Aenean vel nunc sed lorem congue dignissim. Praesent dignissim. Cras vel mi. In hac habitasse platea dictumst. Sed faucibus. Mauris vel tellus at nisl tincidunt scelerisque. Proin leo tortor, fringilla a, consequat a, semper vitae, magna. Mauris sodales.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lectus. Vivamus pellentesque metus non velit. Donec pulvinar felis ut dui. Aenean vel nunc sed lorem congue dignissim. Praesent dignissim. Cras vel mi. In hac habitasse platea dictumst. Sed faucibus. Mauris vel tellus at nisl tincidunt scelerisque. Proin leo tortor, fringilla a, consequat a, semper vitae, magna. Mauris sodales.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lectus. Vivamus pellentesque metus non velit. Donec pulvinar felis ut dui. Aenean vel nunc sed lorem congue dignissim. Praesent dignissim. Cras vel mi. In hac habitasse platea dictumst. Sed faucibus. Mauris vel tellus at nisl tincidunt scelerisque. Proin leo tortor, fringilla a, consequat a, semper vitae, magna. Mauris sodales.
</div>
</td>
<td>
<img src="images/spacer.gif" width="1" height="13" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/middle-of-1-and-2.gif" width="214" height="3" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="3" alt=""></td>
</tr>
<tr>
<td colspan="7">
<a href="#"><img src="images/2news.gif" width="214" height="20" alt="What Going On?"></td>
<td>
<img src="images/spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/middle-of-2-and-3.gif" width="214" height="3" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="3" alt=""></td>
</tr>
<tr>
<td colspan="7">
<a href="#"><img src="images/3about.gif" width="214" height="20" alt="Who Are We?"></td>
<td>
<img src="images/spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/middle-of-3-and-4.gif" width="214" height="3" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="3" alt=""></td>
</tr>
<tr>
<td colspan="7">
<a href="#"><img src="images/4radio.gif" width="214" height="19" alt="Shout It Out!"></td>
<td>
<img src="images/spacer.gif" width="1" height="19" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/middle-of-4-and-5.gif" width="214" height="4" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="4" alt=""></td>
</tr>
<tr>
<td colspan="7">
<a href="#"><img src="images/5contact.gif" width="214" height="20" alt="Did You Say Somthing?"></td>
<td>
<img src="images/spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/middle-of-5-and-6.gif" width="214" height="3" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="3" alt=""></td>
</tr>
<tr>
<td colspan="7">
<a href="#"><img src="images/6links.gif" width="214" height="20" alt="Where Now?"></td>
<td>
<img src="images/spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td colspan="7" background="images/under-6.gif" width="214" height="9" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="9" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/top-user.gif" width="214" height="25" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="25" alt=""></td>
</tr>
<tr>
<td colspan="7" rowspan="2" background="images/main-user.gif" width="214" height="131" alt="" valign="top">
<div class="side">
Praesent dignissim. Cras vel mi. In hac habitasse platea dictumst. Sed faucibus. Mauris vel tellus at nisl tincidunt scelerisque. Proin leo tortor, fringilla a, consequat a, semper vitae, magna. Mauris sodales.
</div>
</td>
<td>
<img src="images/spacer.gif" width="1" height="124" alt=""></td>
</tr>
<tr>
<td colspan="12" rowspan="3">
<img src="images/bottom-content.gif" width="433" height="39" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="7" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/bottom-user.gif" width="214" height="28" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="28" alt=""></td>
</tr>
<tr>
<td colspan="7" rowspan="2">
<img src="images/top-radio.gif" width="214" height="31" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="4" alt=""></td>
</tr>
<tr>

<td>
<img src="images/spacer.gif" width="1" height="27" alt=""></td>
</tr>
<tr>
<td colspan="7" background="images/main-radio.gif" width="214" height="128" alt="" valign="top">
<div class="side">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lectus. Vivamus pellentesque metus non velit. Donec pulvinar felis ut dui. Aenean vel nunc sed lorem congue dignissim. Praesent dignissim. Cras vel mi. In hac habitasse platea dictumst. Sed faucibus. Mauris vel tellus at nisl tincidunt scelerisque. Proin leo tortor, fringilla a, consequat a, semper vitae, magna. Mauris sodales.
</div>
</td>
<td>
<img src="images/spacer.gif" width="1" height="128" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/bottom-radio.gif" width="214" height="29" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="29" alt=""></td>
</tr>
<tr>
<td colspan="7" background="images/under-radio.gif" width="214" height="36" alt=""></td>
<td>

</tr>
<tr>

<td>

</tr>
<tr>
<td>
<img src="images/spacer.gif" width="63" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="5" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="4" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="39" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="85" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="35" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="42" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="8" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="9" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="59" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="31" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="2" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="90" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="95" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="91" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="56" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="63" height="1" alt=""></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>

Heinous
11-01-2007, 06:09 AM
Late reply, sorry. But basically, because you're using tables.

Do not use tables for a layout.

Story
11-01-2007, 07:57 AM
:D yeah dnt!

Want to hide these adverts? Register an account for free!