Depiction- Webmaster Resources
Stock Image


Contributors: Advertise Here  |  Advertise Here  |  Advertise Here


Misc Links: Submit Tutorials (Earn $$) l Advertising l Privacy Policy | Site Map

Tutorials > CSS > Overflow

 

Specify what should happen when an element's content is too big to fit in a specified area. (An alternative to IFrames.)


Tired of IFrames? The CSS overflow property, which specifies what should happen when an element's content is too big to fit in a specified area, can be used as an alternative.

The Downside

This property doesn't provide the advantage of quick updates that IFrames do because the frames' content isn't kept in an external file. Therefore, this method is only suggested to be used for content on one page.

Start off by placing the following code in the head section of you page.(between <head> and </head>)

Code:
------------------------------------------------------------------------
<style type="text/css">
div#overflow
{
background-color:#FFFFFF;
width:200px;
height:125px;
overflow: scroll
}

</style>
------------------------------------------------------------------------

(The background color, width, and height properties can be changed to suit your site's needs. Additional properties may be added.)

Next place the following code anywhere between <body> and </body>. (The text can be changed.)

Code:
------------------------------------------------------------------------
<div id="overflow">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla rhoncus. Fusce in sapien in pede blandit euismod. Integer tincidunt tortor quis turpis. Vestibulum scelerisque felis non justo. Sed leo magna, lacinia in, mollis vel, egestas non, dui. Nullam tempus sem quis mi. Cras ac tellus et ligula porta commodo. Sed quis eros ac ipsum convallis placerat. Aliquam vitae mauris. In luctus metus sit amet ipsum luctus egestas.
</div>
------------------------------------------------------------------------

Example:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla rhoncus. Fusce in sapien in pede blandit euismod. Integer tincidunt tortor quis turpis. Vestibulum scelerisque felis non justo. Sed leo magna, lacinia in, mollis vel, egestas non, dui. Nullam tempus sem quis mi. Cras ac tellus et ligula porta commodo. Sed quis eros ac ipsum convallis placerat. Aliquam vitae mauris. In luctus metus sit amet ipsum luctus egestas.

The overflow property has many values that can be used. Experiment by changing the overflow property's current value to: visible, hidden, auto, or inherit.

To change the generic scrollbar to a custom made one, please refer to the Scrollbars tutorial.


 

Affiliates

Lunacore Photoshop Tutorials
Tutorial Man Wallpaper Stock  More

Resources