Scrollable CSS Regions
Posted by Johan Cyprich on 22 Mar 2007 | Tagged as: Programming
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:
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.
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.
| Related posts: | |
|
|
Share this post:
Follow Me:
Did you find this post interesting and useful? You can keep up to date on this blog by subscribing to my RSS feed, or you can have new posts sent to you by e-mail. You can also follow me on Twitter.
3 Comments »
on 23 Mar 2007 at 3:12 pm 1.Jonathan Aquino said …
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)
on 23 Mar 2007 at 7:40 pm 2.Johan Cyprich said …
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.
on 12 Apr 2007 at 1:58 pm 3.cyprich.com » Displaying a Web Site in a Frame said …
[...] by Johan Cyprich on 12 Apr 2007 at 01:58 pm | Tagged as: Programming In an earlier post, I demonstrated a simple technique to create a scrollable region on a web page using CSS. While [...]