3/30/2005

HTML Tricks: Scroll Box


Here's how to add a scroll box to your website, blog, or whatever! Simply take this code:


<div style="border: 1px solid #aaa;background-colo r:#f9efef; width:350px; height:250px; overflow:auto; color:#FFF;"><p>

</p>
</div>


Place whatever you want in between the <p> and </p>. Adjust size, border, background, and text color as needed.


58 Comments:

Blogger Antonio Hicks said...

I was just browsing various blogs as I was doing a search on the word poster, and I just wanted to say that I really like what you've done with your blog, even though it wasn't particularly related to what I searched for. I appreciate your postings, and your blog is a good example of how a blog should be done. I've only just recently started a Posters website - feel free to visit it when you get a chance if you wish. Much success, antonio.

7:38 AM  
Anonymous Anonymous said...

GREAT html! thank you! :D

1:37 PM  
Anonymous Anonymous said...

hmmm, this doesn't seem to work for me. I get the box, but no scroll bar

2:42 PM  
Anonymous Anonymous said...

it's not working for me AT ALL.
none of the box shows up.......????

8:47 PM  
Anonymous Nightwitch said...

fantastic..solved all my probelems
thank you very much

9:42 AM  
Anonymous Anonymous said...

Solved my problems like *tries to snap but fails pitifully* aw man *claps* that

12:58 PM  
Blogger Chic Alert said...

It worked perfectly for me....it's awesome, thanks heaps.

Sally Green
Chic Alert

3:26 AM  
Blogger Culture Shiok! said...

Where have you been all my life?!?

Just what I badly needed!

Thanks a lot!


to anonymous - you need to have a lot of items listed to get a scroll bar, if not, it will just be a box.

Try adjusting the height and insert your stuff between p and /p

9:35 PM  
Anonymous Anonymous said...

Is there a trick to get items to go to a new line cause enter doesn't work and I dont wanna put "<" br ">" (without the quotes) before my list (423 items) thanks so much!

9:52 PM  
Blogger malerina said...

Sorted - Thankyou very much. I was going to ask How to make this work in Wordpress sidebar please? But I managed my first scroller on WP...wheeee!
K

11:44 AM  
Anonymous Anonymous said...

This screwed up my page...

2:42 PM  
Blogger malerina said...

How come it screwed anon?

Mine works like a dream with images
http://katesdreamweavercentre.com/katesplace/

Whats your problem? Maybe we can help!

2:45 PM  
Anonymous Anonymous said...

THANK YOU! thank you thank you thank you thank you!! ive been looking for this all day and i havent been able to figure it out til now! THANK YOU!

2:52 PM  
Anonymous Anonymous said...

Thank you ! I finally have a scroll box :]

9:28 AM  
Anonymous Salena said...

Thanks, I really thought this html was really easy, and it works. See how I used the scroll box on christinacastle.com
Thanks,
Salena

11:29 PM  
Anonymous Anonymous said...

thank you

5:07 AM  
Anonymous Anonymous said...

now how do you disable the html code you put in the box

10:33 AM  
Anonymous Anonymous said...

awesome i love it it may seem it doesnt work at first but then again it does once u fix the with and the length

8:37 PM  
Anonymous Anonymous said...

Wow works!!
TO those who dont know how to do it.. Add alot of pics..
WOA THANXS SOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO MUCH!!
XD

11:03 AM  
Anonymous Shannon said...

Thanks dude! it deffinately works for me :)

11:34 AM  
Blogger Victoria said...

This comment has been removed by the author.

7:52 PM  
Blogger Victoria said...

i'm trying to put html inside the scroll box.

can you help?

it isnt working.. i just get the box..=/

7:53 PM  
Blogger Dalifirefly said...

but here's a question for you how do i change the color of the scrollbar's track and face color?

12:22 AM  
Anonymous Anonymous said...

Hey, How did you get the html to show up in there by itself ... e-mail me at krayzy77@gmail.com

10:54 PM  
Anonymous Anonymous said...

If It doesnt work for you, meaning you get the box but no scroll bar write more text and the more you write it will start to scroll.

3:42 PM  
Anonymous Anonymous said...

can yu put pics in this scroll box?

6:24 PM  
Anonymous Obscene Jake said...

Very, very helpful.
Thank you.
(:

2:33 PM  
Blogger Allison said...

Thanks...I spent a while trying to figure this out on my own and your tip worked like a charm! Cheers!

9:34 AM  
Anonymous Windowstweaker said...

thnx man ..Cool n i Guess The Best Trick

11:34 AM  
Anonymous DisasterDillon said...

this is so helpful!!!!

5:41 PM  
Anonymous Anonymous said...

it does work but how do you disable the HTML in the box so it only shows text?

7:02 PM  
Blogger James said...

thnx man been looking all over 4 this

12:24 PM  
Blogger AryaNst said...

ThankS! Very helpful indeed :)

3:20 AM  
Anonymous GIBBARD said...

THANKS DAT REALLY HELPED

11:25 AM  
Anonymous Anonymous said...

thanks more than you know.....I love the open attitude you and others have of sharing what you know....

6:01 PM  
Anonymous Anonymous said...

how do u put a HTML code in,
without it making the picture or anything?

7:32 PM  
Anonymous Anonymous said...

I finally found what I need...thanks!

9:51 PM  
Anonymous Anonymous said...

how do you disable the html in the box?
email me plz at diamond_dice250@hotmail.com

5:25 PM  
Blogger bloggers4acause said...

Thanks a lot for sharing this trick. I've been searching for this trick in google all night and everything I found didn't work on my blog. Thanks to you now my blogroll looks more organized and my sidebar looks neater. Kudos!

2:16 AM  
Anonymous Anonymous said...

Yay.
Thankyou.
It works well :]

8:10 AM  
Anonymous Wind Mill said...

Bear HUGGGS to you. Your's worked! I tried suggestions from several others but they did not succeed. So you can imagine how happy I am after using your code.
Cheers!

10:36 PM  
Anonymous Anonymous said...

No scrollbox code ever works for myspace. I've tried adjusting the height and width but nothing seems to work. When I preview/save changes it comes out as blank. I know I have enough text but it doesn't work anyway.

10:37 PM  
Blogger Mikey said...

Thank You! That was easy!

1:37 AM  
Anonymous Jen P. said...

awesome job man! exactly what i needed!

7:27 AM  
Anonymous Anonymous said...

I love this! Thank you SO much for sharing it with us all.

1:36 PM  
Anonymous Anonymous said...

thank you. this really helped my site www.haxorz.net add a "recent updates" table

4:00 PM  
Anonymous Volte said...

thanks so much for this scroll box I love the fact that you can change the border to be dashed or dotted or just get rid of it. gives this scroll nice versatility.

10:16 AM  
Anonymous Serallena said...

Thanks for the code, and it's really easy to work with. But I'm trying to use it on my freewebs and I can't seem to get two on the same line. Can you or anyone help?

3:34 PM  
Anonymous Matt said...

Excellent help thanks. The reason you guys are having trouble is because you have to change the hex colors. Your font is white, just like your background color. Also no scroll bar appears because you dont have enough text to make it scroll yet.

8:01 PM  
Blogger noob7 said...

Thank you.
I used it here

http://icanhasfunny.blogspot.com/2008/10/advertise-us.html

6:13 PM  
Anonymous Anonymous said...

Heyy thanks...
It actually w0rks really well...
idk whats wrong wit da ones dhat says it dont work..but it works juss fine!!

thanks alot!!!!

muchh luv ♥

7:04 PM  
Anonymous Anonymous said...

TY!!!!

7:03 PM  
Blogger BLoGGiSTa said...

thanks for the tip. i used this in my blog: http://bloggistame.blogspot.com to shorten my long lists....

regards and happy blogging!

11:05 AM  
Blogger Lau Kruczynski said...

hi Im new in this blog thing and I want to know hot to put a scroll box but with images photos , I mean is the same code I just have to put the img src code? please answer ^^

8:07 PM  
Anonymous Anonymous said...

thanks ! That work out very well :)

8:19 AM  
Blogger HollyB said...

Thanks for that!

5:18 PM  
Blogger CHILLAPPLE said...

it is very useful.. keep it up..

http://chillapple.blogspot.com

8:22 AM  
Anonymous Poker Bonus said...

Looks like i found what i searching last few days. Spuerb blog i love it.
----------------------

Without deposit
Poker Bonuses
After reaching the age of majority Patrik became a regular poker player in Pot Limit Omaha casino in Helsinki, but as mentioned the first two years were pretty tough. Win money from his colleagues took to the casino, where he regularly again and again was the plays.
In the meantime, Antonius finished the Helsinki Business College and had six-month military service. Re planning bonus to try your hand at tennis world, but the back injury finally convinced him that there was no chance to become a professional tennis player. Then, as he says, he decided that since I can play texas holdem poker, to devote his time to his other passion and become a professional poker player.
Texas Holdem
Starting Poker
In 2003, he discovered online poker and two months of $ 200 free bonus to $ 20,000! With cash from the poker Antonius also decided to continue their education and even received an athletic scholarship at the University of Virginia Averett. Although it was absorbed in studying and learning bonus, it was time for a session of online poker playing in the rate of 50/100 limit even recorded a session for $ 150,000! And so I slowly came to that already in 2005 the first major poker tournament success.
Beginner Poker
Poker News

1:39 AM  

Post a Comment

<< Home