WE are hiring!

Voodoochilli

Voodoochilli Blog

Scrollable HTML content without the use of frames

20th of January 2007
Tags:

The majority of projects our company work on are powered by some form of custom built content management system (CMS). Depending on the exact requirements of a project, we will build a system for those exact needs. There are a few features that are required often, for example; image uploads, page creation, file browsing etc. On larger projects there are hundreds if not thousands of files and images that need to be browsed and although they could be shown all on one page or in a drop down list this is not practical.

Traditionally we have used an iframe to list these files along with a stepping function to step between each page of content. Another way could be using a textarea but this doesn’t allow for HTML such as images, links and different fonts.

However more recently I have stumbled across a much better way of doing this with CSS.

To do this simply create some CSS that looks like this and save it in an external stylesheet:

#browser {
top : 10%;
bottom : 100px;
margin : 0px 0px 0px 0px;
padding-left : 0px;
padding-right : 0px;
color : #000000;
overflow : auto;
width : 325px;
height: 200px;
}

In your file where you want the scrollable box to be create a div and apply the CSS.

You can change the width and height attributes as you need them. The real work is done with the overflow attribute which should be set to auto. The main advantages of this technique over the use of frames or iframes is that not only will users never accidentally open the frame on its own, but also the passing of data between the content is much simpler.


Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • About Us

    We are Voodoochilli Design Ltd - the place to go for Hereford web design

    We have been designing and building websites for over 10 years and have worked with a wide range of businesses from start-ups to multi-billion pound internationals and everything in between.

    If you are interested in finding out more, check out our full website.

  • Recent Posts

  • Awards, Associations & Media

    Go to
    Media