PDA

View Full Version : Table overflow/scroll bar??

The_Jimbo
06-22-2006, 10:03 PM
Hi. I'm pretty new to HTML...I usually just Design the website

Well, I have an issue. I have a template I made using Photoshop, and I'm coding it in Dreamweaver.

I have a table which I want to put a scroll bar. If the text gets too long, it pushes the whole template down and skrews it up.


Here's the section I want the scroll box:

<td colspan="6" rowspan="8" valign="top" background="images/MAIN-CONTENT.gif"><p class="style1">News</p>
<p class="style10">6.21.06- This is a preview of the new rescue youth website. Hope You Enjoy. I'll eventually put up pics and stuff like that (on the &quot;stuff Page&quot;. </p>
<p class="style10">-Matt.</p>
<p class="style2">&nbsp;</p></td>




Here's the coding for the entire page (I know it's a mess) :o
<html>
<head>
<title>Maintemplate</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.style1 {
font-family: "Skratch Punk";
font-size: 24px;
color: #990000;
}
.style2 {font-family: "Skratch Punk"; font-size: 14px; color: #000000; }
.style3 {
font-size: 14px;
color: #000000;
font-family: Edo;
}
.style4 {
font-family: "Skratch Punk";
font-size: 12px;
}
.style6 {font-family: "Skratch Punk"; font-size: 24px; color: #000000; }
.style8 {
font-family: "28 Days Later";
font-size: 20px;
color: #000066;
}
.style10 {font-size: 24px; color: #000000; font-family: "AlphaMack AOE";}
-->
</style></head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Maintemplate.psd) -->
<table id="Table_01" width="801" height="601" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="23">
<img src="images/Main_01.gif" width="800" height="78" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="78" alt=""></td>
</tr>
<tr>
<td colspan="9">
<img src="images/Main_02.gif" width="375" height="1" alt=""></td>
<td colspan="3" rowspan="5">
<img src="images/TOP-LINK-1.gif" width="63" height="8" alt=""></td>
<td colspan="3">
<img src="images/Main_04.gif" width="63" height="1" alt=""></td>
<td colspan="2">
<img src="images/TOP-LINK-2.gif" width="70" height="1" alt=""></td>
<td rowspan="6">
<img src="images/Main_06.gif" width="57" height="23" alt=""></td>
<td colspan="3" rowspan="2">
<img src="images/TOP-LINK-3.gif" width="69" height="2" alt=""></td>
<td colspan="2" rowspan="6">
<img src="images/Main_08.gif" width="103" height="23" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td colspan="6" rowspan="5">
<img src="images/Main_09.gif" width="266" height="22" alt=""></td>
<td rowspan="2">
<a href="Main.html"><img src="images/TOP-HOME.gif" alt="" width="62" height="5" border="0"></a></td>
<td colspan="2" rowspan="5">
<img src="images/Main_11.gif" width="47" height="22" alt=""></td>
<td colspan="2" rowspan="5">
<img src="images/Main_12.gif" width="19" height="22" alt=""></td>
<td colspan="2" rowspan="4">
<img src="images/agfcLINK.gif" width="68" height="7" alt=""></td>
<td rowspan="4">
<img src="images/TOP-LINK-2-15.gif" width="46" height="7" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/TOP-LINK-3-16.gif" width="13" height="6" alt=""></td>
<td rowspan="2">
<img src="images/RHEMA-link.gif" width="36" height="5" alt=""></td>
<td rowspan="3">
<img src="images/TOP-LINK-3-18.gif" width="20" height="6" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="4" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/Main_18.gif" width="62" height="17" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/TOP-LINK-3-20.gif" width="36" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/Main_20.gif" width="63" height="15" alt=""></td>
<td colspan="3">
<img src="images/Main_21.gif" width="114" height="15" alt=""></td>
<td colspan="3">
<img src="images/Main_22.gif" width="69" height="15" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="15" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/Main_23.gif" width="63" height="8" alt=""></td>
<td colspan="7" rowspan="2">
<img src="images/HEAEDER.gif" width="365" height="59" alt=""></td>
<td colspan="2" rowspan="14">
<img src="images/Main_25.gif" width="12" height="499" alt=""></td>
<td colspan="9" rowspan="3" align="left" valign="bottom" background="images/Main_26.gif"><p align="left" class="style8">friday nights 6 pm </p>
<p class="style4">&nbsp;</p></td>
<td rowspan="14">
<img src="images/Main_27.gif" width="63" height="499" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="8" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="6">
<img src="images/Main_28.gif" width="22" height="201" alt=""></td>
<td rowspan="3">
<a href="Main.html"><img src="images/Bar-Home.gif" alt="" width="32" height="78" border="0"></a></td>
<td rowspan="13">
<img src="images/Main_30.gif" width="9" height="491" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="51" alt=""></td>
</tr>
<tr>
<td colspan="6" rowspan="8" valign="top" background="images/MAIN-CONTENT.gif"><p class="style1">News</p>
<p class="style10">6.21.06- This is a preview of the new rescue youth website. Hope You Enjoy. I'll eventually put up pics and stuff like that (on the &quot;stuff Page&quot;. </p>
<p class="style10">-Matt.</p>
<p class="style2">&nbsp;</p></td>
<td rowspan="12">
<img src="images/Main_32.gif" width="12" height="440" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td colspan="9" rowspan="5" valign="top" background="images/SIDE-CONTENT.gif"><p class="style6">What's Coming Up:</p>
<p class="style1 style3">7.14.06 - Great Adventure </p></td>
<td>
<img src="images/spacer.gif" width="1" height="17" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Main_34.gif" width="32" height="23" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="23" alt=""></td>
</tr>
<tr>
<td>
<a href="../About/About.html"><img src="images/Bar-About.gif" alt="" width="32" height="80" border="0"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="80" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Main_36.gif" width="32" height="20" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td rowspan="7">
<img src="images/Main_37.gif" width="21" height="290" alt=""></td>
<td colspan="2" rowspan="3">
<a href="../Stuff/Stuff.html"><img src="images/Bar-Stuff.gif" alt="" width="33" height="86" border="0"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="34" alt=""></td>
</tr>
<tr>
<td colspan="9">
<img src="images/Main_39.gif" width="297" height="9" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="9" alt=""></td>
</tr>
<tr>
<td colspan="9" rowspan="3">
<img src="images/Main_40.gif" width="297" height="135" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="43" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/Main_41.gif" width="33" height="17" alt=""></td>
<td>
<img src="images/Main_42.gif" width="5" height="17" alt=""></td>
<td colspan="3">
<img src="images/Main_43.gif" width="272" height="17" alt=""></td>
<td colspan="2">
<img src="images/Main_44.gif" width="76" height="17" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="17" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/Main_45.gif" width="1" height="187" alt=""></td>
<td rowspan="2">
<a href="../Contact/Contact.html"><img src="images/Bar-Contact.gif" alt="" width="32" height="85" border="0"></a></td>
<td colspan="6" background="images/Main_47.gif">&nbsp;</td>
<td>
<img src="images/spacer.gif" width="1" height="75" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/Main_48.gif" width="5" height="112" alt=""></td>
<td colspan="3">
<img src="images/Main_49.gif" width="272" height="10" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/Main_50.gif" width="76" height="112" alt=""></td>
<td colspan="9" rowspan="2">
<img src="images/Main_51.gif" width="297" height="112" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Main_52.gif" width="32" height="102" alt=""></td>
<td colspan="3">
<img src="images/Main_53.gif" width="272" height="102" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="102" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="21" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="32" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="9" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="5" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="198" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="62" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="12" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="35" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="41" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="12" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="10" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="2" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="17" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="44" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="24" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="46" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="57" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="36" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="20" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="40" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="63" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>


Thanks.
VIPStephan
06-22-2006, 10:23 PM
Well... at least you already know that your code is a mess. Too bad you are creating one more website with bad code (bad meaning tables for layout and no CSS based layout as it is (should be) common practice today).
But I don't wanna be the always complaining bad guy :) So for the solution of your problem use this as temporary fix:


<td style="height: ??px; overflow: auto; background-image: url(images/MAIN-CONTENT.gif);" colspan="6" rowspan="8" valign="top">

If that doesn't work put a div inside that td and apply the styles to this one instead of the td (for the question marks put a number of your desire). Within that div goes your content.
I used inline styles here but you can also giv the element an ID and put the styles into a separate stylesheet. And do you see how I added the background image through the style attribute? You should separate the content (HTML) from the styles (CSS) and avoid deprecated attributes (like background).

And one last thing: Always use a doctype (http://www.w3schools.com/tags/tag_doctype.asp) in the beginning of your document! I'd recommend HTML strict (in Dreamweaver you can easily convert it: File > Convert > HTML 4.01 Strict).

Hope I could express myself clearly enough. If not just ask.


Oh and be aware that nobody will be able to see your special font called "Skratch Punk" unless the user has installed it on his/her machine. You should always specify some fallback (alternative) fonts like this: font-family: "Skratch Punk", Arial, Sans-serif;
The_Jimbo
06-22-2006, 11:23 PM
Thanks for the quick reply.:thumbsup:

That code did not work. But what I did is I put a layer over that box to make it a <div>.

<div id="Layer2"></div>

So how would I add overflow to that?

PS: Thanks for the font warning too, I completely forgot about that...I'm used to saving it as JPEG in Photoshop and sending it to the developer.

EDIT2: Nevermind, Dreamweaver has an "overflow" drop down to make it auto...lol...Thanks so much for your help