|
|
|
|
|
|
| |
The overflow property (CSS Reference)
Introduction
The overflow property works similar to the clip property. It
simply allows you to select whether an element should be cut off or not if it
is too big.
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">
<head><title>overflow
Demonstration</title>
<style type="text/css">
div.overflow
{
overflow: scroll;
height: 100px;
width: 100px;
}
div.auto {
overflow: auto;
}
div.hidden
{
overflow: hidden;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<h1><p>overflow
demonstration</p></h1>
<h2>Overflow</h2>
<div class="overflow">
<img src="http://topxml.com/images/topxml_site.gif">
</div>
<h2>Auto</h2>
<div class="auto">
<img
src="http://topxml.com/images/topxml_site.gif">
</div>
<h2>Hidden</h2>
<div class="auto">
<img
src="http://topxml.com/images/topxml_site.gif">
</div>
</body>
</html>
Output
Values
|
Name:
|
Description:
|
|
auto
|
This value can be used if you want the element to be
clipped. It will show scrollbars to see the rest of the element.
|
|
hidden
|
This value can be used if you want to see only the clipped
part of the element.
|
|
scroll
|
This value can be used if you want the element to be
clipped. It will be show scrollbars to see the rest of the element.
|
|
visible
|
This value can be used if you do not want the element to
be clipped. It will show the element in any case. It doesn’t matter if it is
too big or not. It will automatically extend the boundaries if the element is
too big.
|
|
|
|
|
|
|
|
|
Email TopXML