HTML Scroll Box - HTML Forums

scoutt · 10-04-2005, 08:27 AM

I have seen a lot of question on how to make a table scroll or how to make a scroll box. This is very easy. But for a beginner I can see how you can over see this.

in a blank document save this text to it.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Scroll Box</title>

</head>
<body>
<div style="overflow:auto; height:300px; width:300px">
    <table cellpadding="0" cellspacing="0" style="width:250px;">
        <tr>
            <td> stuff here</td>
        </tr>
    </table>
</div>
</body>
</html>

that will scroll if the table gets bigger than 300 pixels in height. change the height and width in the div container to suit your needs. This is a generic scoll box so you are more than welcome to spruce it up and make it look pretty

Have fun.

tootytoot · 12-04-2005, 06:14 AM

hi!
can this method be done up in a cell alone rather than the whole table?

scoutt · 12-07-2005, 01:27 PM

you bet

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Scroll Box</title> 
</head>
<body> 

<table cellpadding="0" cellspacing="0" style="width:300px;">
    <tr>
        <td><div style="overflow:auto; height:300px; width:300px">stuff here</div></td>
    </tr>
</table>

</body> 
</html>

althalus · 12-13-2005, 10:56 AM

dunno if it'd be a big issue (could be depending on your design), but now your div is wider than the table, scoutt.

Enigmatic_Shado · 12-14-2005, 05:42 PM

okay i thought i posted a reply in here once before but its not showing up... strange!!

Okay so here's my question, how on EARTH do you put this code into http://www.geocities.com/enigmatic_henna/index.htm the html on that site?

I've tried this once before and i totally screwed it up and lost all my information!

I want where the text is, to stop expanding and to scroll. I also want it so when u click on a link, it doesn't reload the entire page. It just loads the bottom area where the text is. How do i do this?

Help ! And thanks!

scoutt · 12-19-2005, 03:37 PM

Quote:

Originally Posted by althalus

dunno if it'd be a big issue (could be depending on your design), but now your div is wider than the table, scoutt.

Thanks, I fixed it

Quote:

Originally Posted by Enigmatic_Shado

okay i thought i posted a reply in here once before but its not showing up... strange!!

post are moderated in here, so they won't show up until a moderator approves them.

Quote:

Originally Posted by Enigmatic_Shado

Okay so here's my question, how on EARTH do you put this code into http://www.geocities.com/enigmatic_henna/index.htm the html on that site?

I've tried this once before and i totally screwed it up and lost all my information!

I want where the text is, to stop expanding and to scroll.

Help ! And thanks!

just put the text in the div that has the overflow on it and it will take care of it.

Quote:

Originally Posted by Enigmatic_Shado

I also want it so when u click on a link, it doesn't reload the entire page. It just loads the bottom area where the text is. How do i do this?

if you want to have it so you can click a link and it will load into this box then you "have" to use an iframe or frame, no other way.

tonilouisa · 01-07-2006, 10:27 AM

I just wanted to post a big thank you to the person who posted the text for a Scroll Bar.

I have now successfully implemented this into the new design for my website.

Does anyone know if it is possible to change the look of this scroll bar so that it is different to the regular scroll bar - maybe a different colour or shape?

Also does anyone know how I might code some HTML so that the background colour of my website is not a block of colour but a subtle blend of colours.

Thank you

Toni

scoutt · 01-08-2006, 12:48 PM

Quote:

Originally Posted by tonilouisa

I just wanted to post a big thank you to the person who posted the text for a Scroll Bar.

I have now successfully implemented this into the new design for my website.

you are welcome. also the rest of your questions will have to be asked in the html forum, not here.

boyo1991 · 11-23-2006, 03:03 PM

scout, you do it a weird way.... i just say make a table and in the td tag make a textbox its easy....

scoutt · 04-15-2007, 04:19 PM

Quote:

Originally Posted by boyo1991

scout, you do it a weird way.... i just say make a table and in the td tag make a textbox its easy....

It is not a weird way. The way you do it with the textarea is bad cause it is part of a form. It is not used for this. a textarea has it's place but for this purpose we have in this tutorial it is not recommended. you cannot put a table in a textarea can you? You can't include a html (show another page) file in a textarea can you? You can't style it better in a textarea can you? So far I see you are the one doing it weird. you also don't have to use a table. it can be done without the use of any table and you can still style it like I mentioned.

moonstar11401 · 04-22-2007, 08:32 PM

Can I add a background color, so it's just that color in the scroll box? If so, what is the tag, and where do I put it?

CdnRebel · 04-27-2007, 04:37 PM

Just wanted to say thanks to Scout for posting the information on creating the scrolling. It would have greatly complicated matters, if I had to use frames.

CdnRebel

scoutt · 04-29-2007, 06:52 PM

Quote:

Originally Posted by moonstar11401

Can I add a background color, so it's just that color in the scroll box? If so, what is the tag, and where do I put it?

sure, something like this

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Scroll Box</title>

</head>
<body>
<div style="overflow:auto; height:300px; width:300px; background-color:#00ff00">
    <table cellpadding="0" cellspacing="0" style="width:250px;">
        <tr>
            <td> stuff here</td>
        </tr>
    </table>
</div>
</body>
</html>

See the background color attribute in the div tag. You can have any color you want there.

CdnRebel · 05-02-2007, 04:17 PM

Hi Scoutt,

I tried using your code on another page where the info to be scrolled is in a table in two rows with one containing a picture and another containing the text and my left menu bar is sent to the far left and the bottom footer which should only be 800 pixels wide is spread across the entire screen and sent right to the bottom. With the other page I was able to place the scroll bars within the dimensions of my target area. I tried your code inside the table and the footers expanded in height as well. I am using ASP for the first time. Would that make a difference?

Thanks,
CdnRebel (feeling like I'm in shark infested waters and going down for the count)

CdnRebel · 05-02-2007, 06:06 PM

Hi Scoutt,

Just wanted to say please ignore my last message. I wasn't sure how to go back and delete it. I just changed some table sizes and I got what I wanted. I'm suffering from a cold and not thinking clearly. I have yet to see the scroll bar work when, the amount to be seen surpasses the display image. It seems like I am having to display most of my content and the scroll doesn't seem to go beyond that. Thanks again for your examples.

CdnRebel