How to Add a Scrolling Text Box to Your HTML Page

My webpage was initially looking very unorganized and scattered despite my attempts to divide the text up through images, colors, and sections. This is what the website looked like initially:

wf3

I needed a way to consolidate text but still have it visible to the viewer.  The solution: a scrolling text box.

To create a scrolling text box,  add a <div> and then proceed to stylize the text box. All you have to do is choose the width and height of the box (make sure that the text box height is short enough so that you have an overflow of text, allowing the box to scroll down). After you add the height and width, add “overflow:auto” to create the scrolling effect.

wf2

Now that you have formatted the text box, you are ready to add your content!

Format the content of the text box just as you would any regular text on your HTML page. Once you have added all of the content you want, close out your </div>. And voila! You have created a scrolling text box and your page will instantly look more organized!

Here is what the finished product looks like on the web:

 

wf1

By, Amelia Merritt

Advertisements

~ by ameliaam on February 23, 2014.

3 Responses to “How to Add a Scrolling Text Box to Your HTML Page”

  1. Best overall composition because the images fit-in nicely with the text, which makes it easy to follow

  2. Best procedural rhetoric.

    The post was concise and was free of jargon. That being said, it still conveyed exactly what needed to be done adeptly. Easy to follow and read.

    • example: “I needed a way to consolidate text but still have it visible to the viewer. The solution: a scrolling text box.”

Comments are closed.

 
%d bloggers like this: