PDA

Click to See Complete Forum and Search --> : Banners making page too wide, please help..

onogirludidn
09-11-2005, 01:28 PM
Hello. Please fogive if this is not the appropriate forum to ask this question, but I am new. I am working on a test page and have determined that the banners on my page are making the page too wide. Someone told me that I might consider putting the banners in their own table, but I haven't a clue how. I have been working on this day and night. The banners are positioned how I want them, but they are stretching my text and photo too far to the right. Would someone please look at this page and tell me how I would go about putting these banners in their own table if that is what I need to do, or any method to keep them from stretching the page. My test page address is

http://enchantingcharms.homestead.com/Page4.html
chrisrock79
09-11-2005, 02:55 PM
The easy answer would be to not use tables, just use css. You don't really have any tabular data anyways.

I wouldn't add any more tables. If you must use tables, put your banner images in a new <tr></tr>

<a href="http://enchantingcharms.homestead.com/contactme.html" class="vertical">Links</a><br>
<br>
</div>

<br>

<br>
<br>



</div>




<p>&nbsp;</p>
</td>
<td width="620"valign="top">
<font face="****** BT"style="color: #FFFF99">
<h1 align="center">Charms</h1>
<div align="center"><img src="http://enchantingcharms.homestead.com/graphic1.jpg"></div>
<h3 align="left"><font face="****** BT"style="color: #FFFF99">sieoaoijfoaiuorueof idkamldj &nbsp;eiooaijf aojnn odjkdoiodasjld oaijdofna/a oij ajfoiufo iau &nbsp;d</font></h3>

<p align="left">jidalkjdanmr rjioea dianfaknfakafn aidjfo;afnaoiufnfoaijfoijfiajfoiufoajnoufoaijandoiuiadfn</p>
<p align="left">ooela oidjkamoidufoa foiadjoijf afoifujaio ff joiif.</p></font>
<p align="center">&nbsp;</p>
</td>
</tr>

<tr><td colspan="2">
<p align="center"><a href="http://www.craftsxcetra.com"><img src="http://enchantingcharms.homestead.com/craftsxcetra.com_anmi_banner_1.gif" width="468" height="60" alt="craftsxcetra.com anmi banner 1" border="0"></a></p>

<br>
<p align="center"><a href="http://www.hugsandstitches.com"><img src="http://enchantingcharms.homestead.com/hsb.gif" width="468" height="60" alt="hugsandstiches.com banner 1" border="0"></a></p>

<br>
<p align="center"><a href="http://www.walken2008.com"><img src="http://enchantingcharms.homestead.com/walkenbanner.jpg" width="345" height="70" alt="walkenbanner" border="0"></a></p>

<p><br>
<a style="COLOR: #fffff; TEXT-DECORATION: none" href="http://enchantingcharms.homestead.com"></a></p>
</td></tr>
</table>




</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

</body>
</html>

Really though, get rid of all those tables and use CSS for much cleaner code.

Oh, and it is stretching the page because the <td> which holds your text does not begin until the <td> which holds your banners ends.

Don't use tables for your layout.

Hope this helped
Chris
onogirludidn
09-11-2005, 05:19 PM
Chris I am bowing at your feet and would kiss them if you were here! LOL! Thank you for the bottom of my heart for figuring that out for me. I will heed your advice and switch completely to css in the next few days. I have only kept the tables really because someone long ago created them for the 3 layer border I have for my web page background. That is the only reason I ever had them. Any suggestions on how to make that css and get rid of the existing table?

I have been working on this day and night for a week, I am tired, and dumb, and have posted this same question for help on several message boards. You were the only person that responded with real help. Thank you ,thank you, and God bless, Karen :)
chrisrock79
09-12-2005, 12:06 AM
Here is a 5 minute head start. Verify location of images before testing.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {background: url(ferntile.jpg);}

#outerBox {background: url(green6a.gif);
width:790px;
padding:35px;
border:1px solid white;
}

#innerBox {background: url(ferntile.jpg);
width:775px;
color:#ffffff;
border:1px solid white;
padding:10px}

#navigation {border:1px solid #006600;
background: #FFFFCC;
width:175px;
color:#006600;
}
</style>
</head>

<body>
<div id="outerBox">
<div id="innerBox">
<div id="navigation">
<ul>
<li>Home</li>
<li>What Are Italian Charms?</li>
<li>Starter Bracelets</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>


</div>

</div>
</body>
</html>

Chris
onogirludidn
09-12-2005, 09:05 PM
Thanks again Chris! I saved it and will work on the changes tomorrow. I appreciate your help so much, Karen :)