CSS Scroll Box

There can be times when adding a scrolling text area on a webpage can be useful. Getting one that is cross browser compatible can be a bit difficult at times, so I hope the instructions below are of use to you.

 

This one works In IE, Firefox and Opera but I have not tested it in anything else, and you can use html within the box area.

 

CSS scroll box containing html

 


Image inside scroll box

This is an example of a scroll box where contents can be displayed using html.

  • Bulleted List
  • Works in IE
  • Works in Firefox


 For this box to work correctly, it must be placed within the <td> tag of a Table.

 

Below is the code, change the colours and sizes to suit the layout you want.

 


<style type="text/css">
ul {
margin-top: 0px;
margin-bottom: 0px;
list-style-image: url(your custom bullet);
color: #333333;
font-size: 80%;
font-weight: normal;
margin-left: 20px;
padding-left: 20px;
line-height: 1.3em;
}

.scrollArea {
width: 275px;
height: 100px;
padding-left: 5px;
padding-right: 5px;
border-color: #6699CC;
border-width: 1px;
border-style: solid;
float: left;
overflow: auto;
}
</style>

 

 

Code to display scroll box in a Table

The Code to display the above scrolling area is:-

 

<table width=480 border=0 align=center summary="">
<tr>
<td><span class="scrollArea"><img src="your.jpg" border=0 width=192 height=80 alt="Logo">
This is an example of a scroll box where contents can be displayed using html.
<ul>
<li>Bulleted List</li>
<li>Works in IE</li>
<li>Works in Firefox</li>
</ul>
</span>
</td>
<td>This is the right hand cell contents
</td>>
</tr>
</table>

 

This css scroll box has many uses and although it is designed to work within a table, it can also be used within a div tag as below.

 

Scrolling area inside a div tag

This is the Scrolling Area used within a div tag.

 

<div><class="scroll"><img src="your.jpg" class="right" border=0 width=192 height=80 alt="Logo">
This is the Scrolling Box Area used within a div tag.
</div>

 

Just change the width, to match your layout, and height setting to whatever you want.

 

<style type="text/css">
.scroll {
width: 546px;
height: 100px;
padding-left: 5px;
padding-right: 5px;
overflow: auto;
}
</style>

 

Another simple way to add a scrolling area to your page is by adding a div style tag instead of adding a class to your style sheet, Code is below.

<div style="width: 540px; height: 90px; overflow: auto; padding: 5px;">
using this would produce the box below.

A simple scroll box which can also contain html elements.
The border is created by adding the following into the tag.
border-color: #6699CC; border-width: 1px; border-style: solid;
Another advantage of of using this code is that you can have several scrolling areas of different sizes on your page where you would like them. You could even set a tiled background or fixed size image. Many possibilites are available to you.

 

Home

web stats script