Scroll box is very handy when you have a lot of data or text but limited space to display them. Besides text, the scroll box can contain images and HTML codes too! And, it's so easy to create one that can be located within your blog post or pages and even at the sidebar, footer or below a header for announcement and the like! It helps to save valuable space in your blog, giving a professional touch too!
2 examples of scroll boxes
Just follow these easy steps on
how-to create a scroll box :
- To make one, you just need to use simple HTML code (highlighted in orange) to enclose your text as follows :
<div style="height: 100px; width: 350px; overflow: auto;">PLACE YOUR TEXT HERE</div>
The values of the height and width of the scroll box can be changed to fit your needs. So adjust them accordingly.
Go on, try scrolling to see the rest of the content!
Here's to demonstrate how the simple HTML codes were placed to generate this scroll box:
<div style="height: 150px; overflow: auto; width: 300px;">
Place the text or your content between the div tags as shown here. And this scroll box is the result with the default alignment to the left and the font will follow that where the scroll box is placed.
Tips: Take note that the scroll bar will automatically show, only when the contents within the box exceed the settings of the width and height, not otherwise. And, the scroll box can contain images as well. So, just type in (or copy and paste) the HTML of the image that you want included.
- By default, the scroll box will be aligned to the left. If you wish to place the entire scroll box in the center, just add the 'center' tags to enclose the scroll box 'div' tags as follows:
- That's all to it! Fast and easy, right?
|Changes you may want to apply||CSS codes to add are highlighted in orange.|
The px value, color, etc. that is bold-faced below can be changed as desired. For color, use either the name or hex value.
(Know more about CSS color names/hex from W3Schools)
|Add a coloured border around the scroll box||border: 1px solid darkblue;|
|Add background colour||background-color: pink;|
|Text colour||color: maroon;|
|Font family||font-family: arial;|
|Font size||font-size: 12px;|
|Text align||text-align: center;|
|Add space around the text/content inside the border||padding: 4px;|
|To position the entire scroll box|| position: relative; left: 50px;|
(Relative positioning moves it relative to its original left position. The higher the value, the further away from the left the box will move)
Here's an example to show how the HTML was configured to create a modified scroll box, using the codes in orange below : <div style="background-color: #efd9f8; border: 2px solid darkmagenta; color: mediumblue; font-family: 'lucida handwriting', cursive; font-size: 12px; text-align: center; height: 100px; overflow: auto; padding: 4px; width: 350px; position: relative; left: 60px;">TEXT HERE</div>
and ta da...the result!
Easy, huh? Why not try to create your own stylish scroll box for your blog right now!
Keep learning~~keep smiling~~keep sharing!!
Update: Sept. 5 2010 Next, learn how to place HTML code in a scroll box e.g. image code for a blog's button!
Last edit: April 20 2013