Cyprich.com

Occasionally Relevant Insights from a Software Builder

By

Scrollable CSS Regions

Frames were an exciting addition to web design when it was released. They would allow you to have fixed regions on your web site which is good for keeping ads or menus constantly visible. The nice thing about the fixed regions is that if there was too much information to display, you can scroll to view the entire content. The only problem is that web browsers rendered the frames differently so text tended to overflow out of the frame which then had to be viewed by using the scroll bars (if they were set to be visible).

The following code defines a CSS scrollable region:

... text ...


If you set the overflow property to auto, the content is clipped to the area defined by div and scroll bars are added if they are necessary. For text, you would normally get the vertical scroll bars and not the horizontal ones.

Setting the overflow property to scroll will clip the contents to the view area and make the horizontal and vertical scroll bars appear regardless of the content overflowing it.

Below is an example of a scrollable CSS region using the above code.

 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi sit amet eros. Pellentesque ullamcorper dignissim dolor. Proin imperdiet lacinia nunc. Nam diam sapien, gravida sit amet, tincidunt ac, ornare vel, lacus. Nam vel eros ut ipsum mollis adipiscing. Etiam rhoncus sapien quis lorem. Proin dignissim mauris convallis leo. Suspendisse et ipsum vitae libero hendrerit porta. Aliquam congue auctor ipsum. Nulla lobortis. Etiam quis eros. Vivamus scelerisque, lacus sed aliquet placerat, sem mauris sollicitudin magna, id sodales ipsum nunc a pede.

Quisque aliquam elit et ligula. Nullam orci elit, pellentesque nec, sagittis eu, congue sed, orci. In nec ligula fringilla quam tincidunt elementum. Proin lacinia. Aenean vulputate, libero sit amet porttitor sollicitudin, diam turpis accumsan massa, et condimentum lectus quam eget enim. Nullam fermentum vestibulum sem. Aenean tempor mi sit amet lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque ultrices purus nec neque. Ut dictum orci sed ligula. In hac habitasse platea dictumst. Quisque ultrices tristique pede.

 

This is a basic example and more can be done, but it should give you an idea what is possible with CSS. You don’t need to use frames to make scrollable areas on your web site.

3 Responses to Scrollable CSS Regions

  1. Neat!

    Couple of good CSS books I like:
    – CSS Anthology (intermediate – list-based navigation, etc.)
    – CSS Mastery (advanced, with material on browser bugs and hacks)

  2. Johan says:

    There’s a lot to learn on CSS. I’m really interested in making things work across different web browsers, such as pull down menus. I’ll take a look at the books that you recommend.

  3. Pingback: cyprich.com » Displaying a Web Site in a Frame

Leave a Reply

Your email address will not be published. Required fields are marked *