Blogger Tips, Scrolling Text Box

Pin It

Ever had the need to for a scrolling region on your Blog? The following code example will allow you to create a scrolling text box.

---

---

<div style="background-color #000000;  border-width:2px solid black; width:200px; height:100px; overflow:auto;">
Place Content Here</div>

---

---

The <div style=" "> and </div> are the opening and closing HTML tags for the scroll box. 

• background-color #000000; – This is the color of the inside of your box.  You can make the background whatever color you want.  Just remember that certain colors may make reading text an issue.
• border-width:2px solid black; - This tells the browser how wide to make the boarder and what color it should be.
• width:200px — This tells the browser to make the box 200 pixels wide. You can specify a different width based on your blog.
• height:100px — This tells the browser to make the box 100 pixels tall. Again you can specify a different height based on your blog.
  
• overflow:auto - sets the overflow value.

This is a scrollbox
As you can see the scrollbox will
allow you to put in as much text as you need.