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.

 
%d bloggers like this: