Containing text in one scrollable area 2

[Stretchwickster]

Dear All,

I'm designing a website which has fixed dimensions. Consequently, I would like to have an area of text that fits within these fixed dimensions and is scrollable when the body of text is too large to be fully contained in the text area. I've seen it in the past on a number of sites - but can't find any right now! Is it a big no-no in terms of usability? If not, how would I go about achieving this? Is it something that all browsers can support?

I've done a bit of searching but can find nothing but pages telling you how to colour scrollbars so any pointers would be most welcome!

Your help would be much appreciated!

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096

 

[cLFlaVA]

depending on the object you are using (div, p, td, etc.), you should be able to set static heights and widths using a style definition, along with utilizing the overflow style definition; set overflow to 'auto' or 'scroll'. this will enabled scrolling for all content that exceeds the dimensions of your object, while keeping the size in tact.



*cLFlaVA
----------------------------
[tt]( <P> <B>)¹³ * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[Vragabond]

<div style="width: 100px; height: 100px; overflow: auto;">
  Lotsa content here.
</div>

This div box will be 100px wide and 100px high and if there is a lot of text inside, scrollbars will appear. It is not a big no-no in design if there is a specific use for it. Say if you want to put all your content in such a box and use a special scrollbar for it, I would advise against it, because most users would expect a scrollbar at far right (or left, depending on their browser orientation). If it is a small box containing latest news, updates, shoutbox or something like that, giving it scrollbars where there's more content is perfectly acceptable.

All modern browsers that support CSS will support this.

In final version, move the css style to a separate stylesheet. Think if <div> is the best element. Depending on the content, you might just want to use a paragraph (if it is only a text), or a list element (if it is a list).

 

[Stretchwickster]

Thanks for the advice guys - that works a treat.

However, I take on board what you say Vragabond. I had planned to put all my content in such a box - but knew there would be associated usability issues. What I will do is develop 2 versions: 1 with natural flow and browser scrollbars, 1 with an overflow element of fixed dimensions and custom scrollbars. Then I'll run some usability tests and dump the overflow version if results show it's too confusing.


Many thanks to both of you for your assistance.

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096

 

[Vragabond]

You have to know how big will your fixed section be in how will it behave in different screen resolutions. You can assume that hardly anyone is using 640x480 nowadays, however, someone with 1024, a sidebar and a browser window that is not maximized might have a viewing area of 640px wide. If such a user gets the main scrollbar to scroll around your design and inner scrollbar to scroll around your content, they're lost as a user. That's something worth considering I believe.

 

[Stretchwickster]

Thanks for the pointer Vragabond.

Clive

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
"To err is human, but to really foul things up you need a computer." (Paul Ehrlich)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To get the best answers from this forum see: faq102-5096