HTML » Updates/scroll box

This is the code for a scroll box you can place on your site. If you want to make a complete scroll layout, check the scroll layout tutorial.

Unpositioned scroll box

If this is a updates box for your expanding layout, insert this code inside the writing area (just like if it was text)

<div style="overflow: auto; height: 100px; width: 150px; border: 1px solid black">

Write text here

</div>

If you don't want a border, remove border: 1px solid black

Positioned scroll box

If you want to place your scroll box somewhere on the layout picture, you can use a positioned div. Note that this should only be used together with a layout with absolute positioning. If you have a regular table, perhaps centerized, the scroll box will get out of position for a person with another screen than you have, or if the browser window is resized.

<div style="overflow: auto;
position: absolute;
left:
0px;
top:
0px;
height:
100px;
width:
150px;
border:
1px black solid;"> Change "left" and "right" to position the box.

Write text here

</div>

Remember, you can add scroll colors too

<div style="overflow: auto;
position: absolute;
left:
0px;
top:
0px;
height:
100px;
width:
150px;
border:
1px black solid;
scrollbar-face-color:
#FFFFFF;
scrollbar-shadow-color:
#FFFFFF;
scrollbar-highlight-color:
#FFFFFF;
scrollbar-3dlight-color:
#FFFFFF;
scrollbar-darkshadow-color:
#FFFFFF;
scrollbar-track-color:
#FFFFFF;
scrollbar-arrow-color:
#FFFFFF;">

Write text here

</div>