Scrolling Content, how do you do it...should you?

D

davisphive

Geek Trainee
Ok, I have a design for a web site with a menu positioned on the left and a "main content area" to the right of the menu. I would like the content area to grow vertically only, but be in it's own "frame" (have scroll bars to move down through while the rest of the page remains motionless.) I've tried IFRAMEs and didn't really like them. Someone told me that I could do the same thing with DIVs and CSS.

I got the div looking the way I want but my problem is that the div scrolls horizontally as well as vertically. I'm using the overflow option. ' overflow: auto; '

I can re-type and position the text and content and that fixes the problem but isn't there a way to make your text automatically fit the container it's put in instead of the div changing itself to accomodate the text?

Also I have heard other developers criticize the scrolling content idea.
Is it foepaw? (don't know how to spell that word)
And if so, why?

My rational is:
I have quite a bit of content and wanted the menu and other links to remain where the viewer could get easy access to them.
I've never liked the target links that take you back up to the top of the page. I know of ways to make the menu drop down and follow the viewer as they scroll but think those types of menus to be annoying and a bit tacky. (just my opinion, don't wanna step on anyone's toes ;) )

Any help, advice...etc would be most welcome.
 
No not like that. That's a little too complicated. Just a little window within a window I guess...cept it wouldn't be a window...just scroll like one?...I've ceased making sense I fear.
 
You can do this with a DIV, using the CSS property "overflow: ;"

There are different options:

Code: 
overflow: auto;
overflow: hidden;
overflow: scroll;
overflow: visible;

CSS Overflow Property

I think that's what you mean, like if the content is larger than the DIV's height you can either make the DIV bigger to accomodate the content, hide the content, scroll the DIV (scroll bar at the side of the DIV) - I think that's what the options do.
overflow: visible;

I think you'd want the "overflow: scroll;" property.
 
Is there any way to keep it from scolling horizontally without have to manually format my text or images to fit the Div's dimensions?

Something that would just automatically push the text downward instead of adding horizontal scrolling.
 
Code: 
<style type="text/css">
div 
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: auto
}
</style>
try this.... specify the width and height to your liking.
 
What about creating a table with the width 100% of the frame? Resizing the window will automatically adjust the width of the table to fit the width of the window since it's 100%, not in pixels.
 
Yeah, they're not in-keeping with Web Accessibility guidelines either...

Use the <div> tag and CSS to construct the actual layout - tables are for tabular data.
 
You must log in or register to reply here.
Back
Top