BOMBOLOM.COM

(webdev) Horizontal Scrolling

Posted by José Lopes.

When you have an area in a HTML file with information (tables, images, etc) where you want to set a specific height and width some questions about the scrolling bars my appear.

You will find plenty of information about automatic scrolling, meaning that you get horizontal and vertical scrolling bars, and about setting only the vertical scrolling bar, however, it may be difficult to find about setting as visible only the horizontal scrolling bar.

This post shows you how to do that.

You just need to create an entry on the CSS with the following code:

(1) #container {
(2) width: 700px;
(3) overflow:auto;
(4) overflow-x:scroll;
(5) overflow-y:hidden;
    }

Explaning the CSS:
(1) Name the instance class.
(2) Set the width of the area to have the horizontal scrolling bar.
(3) Cater to the older browsers.
(4) Force the horizontal scrolling bar.
(5) Hide the vertical scrolling bar.

It's really that simple!

To implement it on your HTML file just type:

<div id="container">
YOUR_CONTENT_HERE
</div>

The content can also include other CSS classes and all kind of information.

You can see a pratical example here.
This example has tables and images inside the area with the horizontal scrolling bar.

2008.01.21 | There's more... | Comments 0 | Tags ,

Deixe a sua mensagem:

Nome:


E-mail:


URL:


Comment:

Secret number

To send you comment you must insert the "secret number" on the box


Made with PyBlosxom | Add to Google