Tuesday

How to make a scroll boxes

How to make scrollable box. One of the way do this is to paste this code in your edit html tab on your blog post editor:




<div style="overflow:auto; height:300px; width:400px">
<table cellpadding="0" cellspacing="0" style="width:250px;">
<tr>
<td>Put your stuff here</td>
</tr>
</table>
</div>

Example :


Horizontal or, most often, vertical scrollbox or both. A vertical scrollbox is a narrow strip drawn up the side of the window containing a "bubble" whose position in the scrollbox represents the position of the visible part within the whole document. By dragging the bubble with the mouse the user can scroll the view over the entire document. Arrow buttons are usually provided at the end(s) of the scrollbox to allow the window to be scrolled by a small amount, e.g. one line of text, in either direction by clicking them with the mouse. Some programs provide a second pair of buttons for scrolling a page at a time or some other unit. Clicking on the scrollbox outside the bubble will either, depending on the particular {WIMP}, move the bubble to that point or move it some amount (typically a screenful) in that direction. Different {WIMP} systems define different standards for whether scrollboxs appear on the left or right, top or bottom of the window, and for their behaviour. To reduce mouse movement, the up and down scroll buttons should either be next to each other at one end of the scrollbox (as in {NEXTSTEP}) or should reverse their effect when clicked with the right-hand mouse button (as in the {X Window System} and {RISC OS}). The fraction of the scrollbox filled by the bubble should indicate the fraction of the document visible in the window. (1998-06-26)












How to put image wider than the main column. If you try to put image wider than the main column into a post, will cause the sidebar to slide down to the bottom of the page. If you ever want to put a large image in your blog without the problem of sidebar sliding to the bottom of the page, put it in a scroll box. Just cut and paste your upload image to "Put your stuff here".

Example :







No comments: