How to create a textbox with a scrollbar

Sometimes on you will need to include a lot of text on your page. This could crowd your page really fast and make the content less readable. One way to solve this problem is to create text boxes with a scrollbar, so that the large amount of text will be concealed unless you hover above the text box and scroll. There’s two ways to achieve this!

  1. The first is using inline style. My code looked something like this:

screen-shot-2017-03-02-at-10-37-59-am

Just make sure you have enough text so that the scrollbar can function.

But of course, you can play with the float, margins, width, height, and positioning of your text box.

2. The second method is using an internal style sheet. Mine looked like this:

screen-shot-2017-03-02-at-10-40-26-am

and the corresponding code later looked like this: screen-shot-2017-03-02-at-10-43-01-am

Once again, you can play with the elements of the text box to yield different visual results, including fonts and colors!

Both of these methods, yielded a page that looked like this:

screen-shot-2017-03-02-at-10-38-35-am

And there you go!

Advertisements

~ by zyjudes on March 2, 2017.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: