How to Insert a Scrollbar in Dreamweaver

Use scrollbars to provide a lot of information in a small amount of space.

A useful feature in Adobe Dreamweaver is the ability to provide a lot of content information in a minimum amount of space. Specifically, you can define a table or small space on your webpage as vertical and/or horizontal scrolling area by using optional Cascading Style Sheets (CSS) and a simple JavaScript parameter. The scrolling area can contain graphics, text content or both. When the area you have defined has finite dimensions and there is content overflow, the scrolling takes over automatically.

Instructions

1. Navigate to the place in your HTML code where you wish to insert the scrollbar. If the scrollbar is going to be part of a new table, then insert the table by placing the cursor at the position of the new table, select "Insert" from the main menu and choose "Table" from the resulting drop-down selection. The "Table" dialog panel appears. If the scrollbar is not a part of a table, simply place the cursor in the place on the page you wish to have it appear and proceed to Step 3.

2. Enter "1" in the Rows, and "1" in the Columns text entry fields. Make the Table width 350 pixels. You can change this later if you wish. Select "None" for a header and click "OK."

3. Insert the following code: <DIV style="overflow: auto; WIDTH: 350px; HEIGHT: 200px">. Now insert your text immediately after and close the code by typing </DIV>.

4. Test your scrollbar by clicking the "Live View" button icon.

References

• Dreamweaver Resources: Simple Vertical Scroller
• Purchase College: WebDocs 2011: Scrolling to Handle Overflow

Resources

• The College of New Jersey, Scrollbar in a Table Cell: