CSS Scroll Box

Heading Tags Info

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, Safari 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 Safari
  • Works in Firefox
  • Works in Opera
  • Works in Google Chrome


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

You will find the full css code for this example below.

CSS Code for above Scroll Box

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

Please Note:- The code must be placed above the </head> tag on your webpage.

 


<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>

Now for the html code to display your scroll box within your web page,

<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: 830px;
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: 830px; 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.


For your help:-
1. Choose Height and Width of box.
2. The bigger the Height the better for your visitors.
3. can be annoying if visitors have to scroll a lot to read content.




Please Note: Do not forget to close your DIV tags when using the above 2 examples.