How to Insert Scroll Bars in Web Pages
Years ago, Web designers who wanted to closely control the way their pages looked had to use inefficient technologies and complicated code. One good example is framing, a method that separated sections of a Web page into individual frames that loaded separately in the browser. Although frames were once popular for isolating the content of Web sites from more constant elements like headers and footers, they since have been made obsolete by more effective and search-engine-friendly methods -- namely, Cascading Style Sheets or CSS.
Today, designers use CSS to control nearly every aspect of a Web site -- from fonts and colors to page layout and structure -- with code that's concise and organized. They also can use it to quickly add scroll bars to Web page elements via the Overflow property.
Other People Are Reading
Things You'll Need
- HTML editor
- FTP client or other file uploading software
- Internet browser
Instructions
-
Download or Create the Necessary Files
-
1
Open the FTP client and log into your Web site.
-
2
Find the HTML file containing the text you'd like to make scrollable and download that file to your hard drive.
-
-
3
Create a new file with the extension .css, such as "style.css." Pages of your Web site will reference this file, or stylesheet, for rules about how to display the content.
Edit Your Stylesheet
-
4
Open style.css in the HTML editor.
-
5
Type the following code into style.css to create a new class called "scrollbar":
.scrollbar { }
-
6
Define the Overflow property in the scrollbar class as "scroll," as seen in the example below. This tells your Web pages to add a scroll bar to any elements that are part of the scroll bar class. Style.css should now look like this:
.scrollbar {overflow: scroll}
-
7
Define the Height property of the element in number of pixels, as seen below:
.scrollbar {overflow: scroll; height: 200px;}
This will tell the browser how tall the box containing the text should be. Any text that fits inside the box will be visible, while any text that doesn't fit can be seen by scrolling down.
-
8
Save style.css.
Edit the HTML File
-
9
Open the HTML file into which you'd like to insert a scroll bar in the HTML editor.
-
10
Add the following code to the <head> section of your HTML file:
<link href="style.css" type="text/css" rel="stylesheet" media="screen">
This code tells the browser to reference style.css for rules about how to display the HTML file.
-
11
Find the text in the HTML file that you want to make scrollable. Enclose it in tags that apply the scrollbar class.
Example:
<div class="scrollbar">
Example text
</div> -
12
Save the HTML file.
Upload the Files to Your Server and Test
-
13
Use the FTP Client to upload both files to the server that hosts your Web site. Be sure to upload both files to the same directory; otherwise the browser will not know where to find style.css and will not add the scroll bars to your page.
-
14
Open the Internet browser and visit the Web page you modified. The scroll bars you added should appear!
-
15
Repeat the process for any other Web pages that require scroll bars.
-
1
Tips & Warnings
Be careful when typing, copying and pasting code. Small mistakes like misplaced characters can cause big problems when the browser displays the Web page. If your scroll bars don't appear, carefully check the code in both files to be sure there are no errors.
