Small Scrollable Areas
Scrollable areas on webpages has become increasingly popular after being used by some leading design communities on internet. Scroll areas can be done with a textarea or iframe tags, but a more frequent way of doing it is through using the abilities that already lies within HTML and CSS for any block element. A normal block element like <div> can be set to a certain height and width. What happens when the content of the element exceeds the size given to it?
Enter the CSS property overflow.
- overflow: auto - This will insert a scrollbar - horizontal, vertical or both only if the content in the block requires it. For practical purposes, this is probably the most useful for creating a scrolling area.
- overflow: scroll - This will will insert horizontal and vertical scrollbars. They will become active only if the content requires it.
- overflow: visible - This will cause the block to expand to view the content.
- overflow: hidden - This forces the block to only show content that fits in the block. Other content will be clipped and not hidden with no scrollbars.
for example
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>scrolling</title>
<style type=”text/css”>
<!–
div.scroll {
height: 200px;
width: 300px;
overflow: auto;
border: 1px solid #666;
background-color: #ccc;
padding: 8px;
}
–>
</style>
</head>
<body>
<div class=”scroll”>
<p>This is a scrolling are created with the CSS property overflow.</p>
<p>
<span style=”color: red;”>This is red color</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>This is a normal paragraph.
<span style=”font-weight: bold; font-size: 22px;”>This is big bold text</span>
</p>
<p>This scrolling are can contain normal html like <a href=”#”>link</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
</div>
</body>
</html>
save this code and run.
