Wednesday, October 3, 2007

Scrollable DIVs - Using Overflow, Overflow-X and Overflow-Y

An option to frameworks and IFRAMES within a XHTML written document where page layout is fixed, but content necessitates to be within a scrollable area, is to utilize a DIV and set the CSS property 'overflow'. This is relatively consecutive forward to make and plant in all modern browsers. In the event that CSS is handicapped or the content is read by a hunt engine spider, the DIV acts like any other block degree element. This avoids the job associated with frameworks and IFRAMES where a hunt engine makes not associate the framework content to the parent page.

More... There are three fluctuations to the 'overflow' place and four possible values;

The fluctuations are:

* overflow: Put property for both perpendicular and horizontal scrolling. Widely supported.

* overflow-x: and overflow-y: Put place for each axis; perpendicular and horizontal. Variable browser support.

Acceptable place values are:

* Visible: textual matter will render outside the component beyond DIV dimensions;

* Hidden: Contents will be clipped, not able to be seen outside DIV dimensions

* Scroll: Contents will be clipped, with a scroll-bar to see the remainder of the content

* Auto: No coil bar, unless content is bigger than DIV dimensions.

NB: Some browsers make not back up the overflow-x and overflow-y properties, which can take to unexpected layout jobs when you only desire the DIV to coil on one axis. To guarantee upper limit rapport usage both flood and overflow-x and/or overflow-y. The followers illustration shows a DIV which by default have car scrolling, but for browsers that support overflow-x, only coils horizontally:

overflow: auto;

overflow-x: scroll !important;

Code fragment:


Lorem ipsum dolour sit down amet, consectetuer adipiscing elit. Aliquam pretium Eastern Time actinium mi. Sed eget sem vitae justo Viverra nonummy. Sed adipiscing. Nullam pretium adipiscing ligula. Aliquam vitae dui. Nam enim arcu, hendrerit et, iaculis lobortis, posuere euismod, lacus. Praesent scelerisque lectus a urna. Morbi interdum. Aliquam adipiscing. Aliquam in mi. Pellentesque actinium lectus Idaho Purus hendrerit
euismod.

No comments: