Scrollable Content Areas with Css

ACTIVITY:

SCROLLABLE CONTENT AREAS WITH CSS

Although iframes can be useful for practical reasons, many designers use them for aesthetic reasons - in order to provide a lot of information on a single page. For example,iframes are popular for lists of news items because they enable many hundreds of lines oftext to be contained in a small area.

However, if this is your reason for using an iframe,you are better off replacing it with a div and using CSS to control the overflow. If you usethis method, the content will remain part of the web page - which is better for accessibilityand site maintenance.

You can do this by creating a div with anid value:

<div id="scrollableContent">

[content...]

</div>

Then, style the div using CSS. The following rule sets the div’s dimensions and determines how the div’soverflow works:

#scrollableContent

{

width: 200px;

height: 200px;

overflow: auto;

}

When overflow is set to auto, scroll bars only appear when the content is too large for theset dimensions of the div. Other available values are hidden (display no scroll bars),scroll (permanently display both scroll bars) and visible (render content outside of thedefined box area). Adding some padding, especially at the right-hand side of the scrollablecontent box, helps improve the area aesthetically - ensuring that content is not too close to thescroll bar.

#scrollableContent

{

width: 200px;

height: 200px;

overflow: auto;

padding: 0 10px 0 0;

}

Using <object> element to embed an external HTML document

Another more accessible option than using iframe elements is to use the object elementto embed an external HTML document within a region of the page - when combined withthe scrolling div method shown above, it pretty much provides all the benefits ofan iframewith very few of the drawbacks. For example, the content is on the page - unlike with framesand iframes where their content remains external.

The following code block shows how an object element can be added to the page. Notethe alternate content within the object element, displayed if the browser cannot show theobject. This can be used to directly link to the file in the data attribute.

<object data="more_about_labradors.html" type="text/html">

<p>Your browser does not support the object element. Please <a href="more_about_labradors.html">click here to see the object’s content</p>

</object>

Like other elements, the object element can be styled using CSS, although InternetExplorer adds a border. You will need to overwrite existing border settings using conditionalcomments to prevent a double border. Also, if the contentis too large for the object dimensions, it will scroll in whatever direction is needed,unless you explicitly set overflow to hidden. However, this setting doesnot work in InternetExplorer and Opera.

A - Scrollable content areas with CSS.docVersion 1

Page 1 of 2