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

davisphive · 09-07-2007, 04:50 PM

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.

Sniper · 10-07-2007, 01:15 AM

I think I know what you mean, though I've not seen any site using the method recently.

You want something like this Dynamic Drive- Scrollable Content II ?

I would not recommend it, just keep it simple!

davisphive · 12-07-2007, 03:52 PM

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.

Matt555 · 13-07-2007, 01:53 PM

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.

davisphive · 18-07-2007, 08:38 PM

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.

Sniper · 19-07-2007, 02:32 PM

maybe you need to use word-wrap css?

davisphive · 20-07-2007, 03:15 AM

Doesn't that only work in IE?

roy92 · 23-07-2007, 06:39 AM

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.

Platinum1211 · 25-07-2007, 08:40 PM

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.

Matt555 · 25-07-2007, 09:54 PM

Using tables for layout isn't considered good design and coding practice anymore.

roy92 · 25-07-2007, 10:03 PM

tables are like... so old school

Platinum1211 · 26-07-2007, 12:03 PM

Guess that makes me a bit old school =\

Matt555 · 26-07-2007, 12:05 PM

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.

09-07-2007, 04:50 PM	#1 (permalink) Top
davisphive Geek Join Date: Oct 2005 Gender: Posts: 51 Status: Offline	Scrolling Content, how do you do it...should you? 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. Last edited by davisphive; 09-07-2007 at 04:55 PM.

10-07-2007, 01:15 AM	#2 (permalink) Top
Sniper Administrator Join Date: Oct 2001 Age: 24 Male Posts: 4,432 Times Helpful: 116 My Mood: Bored Status: Offline My Computer	I think I know what you mean, though I've not seen any site using the method recently. You want something like this Dynamic Drive- Scrollable Content II ? I would not recommend it, just keep it simple! __________________ Zone 365 \| F@H Team \| Team Stats \| Use The Thank You System \| My Groups: Manchester United \| Apple

13-07-2007, 01:53 PM	#4 (permalink) Top
Matt555 iMod Join Date: May 2005 Age: 21 Male Posts: 3,844 Times Helpful: 238 My Mood: Happy Status: Offline My Computer	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. __________________

19-07-2007, 02:32 PM	#6 (permalink) Top
Sniper Administrator Join Date: Oct 2001 Age: 24 Male Posts: 4,432 Times Helpful: 116 My Mood: Bored Status: Offline My Computer	maybe you need to use word-wrap css? __________________ Zone 365 \| F@H Team \| Team Stats \| Use The Thank You System \| My Groups: Manchester United \| Apple

23-07-2007, 06:39 AM	#8 (permalink) Top
roy92 CSS HAXOR Join Date: Feb 2006 Age: 15 Male Posts: 547 Times Helpful: 37 Status: Offline My Computer	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. __________________ I helped someone! here - laptop hard drive here - graphics card problem this indeed is true Interested in SLI? visit slizone Need help with PSU's? drop by Big B's PSU sticky Nvidia Display Drivers - here ATI Display Drivers - here Hate spyware and adware? Grab spybot and adaware

12-07-2007, 03:52 PM	#3 (permalink) Top
davisphive Geek Join Date: Oct 2005 Gender: Posts: 51 Status: Offline	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.

18-07-2007, 08:38 PM	#5 (permalink) Top
davisphive Geek Join Date: Oct 2005 Gender: Posts: 51 Status: Offline	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.

20-07-2007, 03:15 AM	#7 (permalink) Top
davisphive Geek Join Date: Oct 2005 Gender: Posts: 51 Status: Offline	Doesn't that only work in IE?

25-07-2007, 08:40 PM	#9 (permalink) Top
Platinum1211 Geek Trainee Join Date: Jul 2007 Age: 20 Posts: 14 My Mood: Psychadelic Status: Offline	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.

25-07-2007, 09:54 PM	#10 (permalink) Top
Matt555 iMod Join Date: May 2005 Age: 21 Male Posts: 3,844 Times Helpful: 238 My Mood: Happy Status: Offline My Computer	Using tables for layout isn't considered good design and coding practice anymore. __________________

25-07-2007, 10:03 PM	#11 (permalink) Top
roy92 CSS HAXOR Join Date: Feb 2006 Age: 15 Male Posts: 547 Times Helpful: 37 Status: Offline My Computer	tables are like... so old school __________________ I helped someone! here - laptop hard drive here - graphics card problem this indeed is true Interested in SLI? visit slizone Need help with PSU's? drop by Big B's PSU sticky Nvidia Display Drivers - here ATI Display Drivers - here Hate spyware and adware? Grab spybot and adaware

26-07-2007, 12:03 PM	#12 (permalink) Top
Platinum1211 Geek Trainee Join Date: Jul 2007 Age: 20 Posts: 14 My Mood: Psychadelic Status: Offline	Guess that makes me a bit old school =\

26-07-2007, 12:05 PM	#13 (permalink) Top
Matt555 iMod Join Date: May 2005 Age: 21 Male Posts: 3,844 Times Helpful: 238 My Mood: Happy Status: Offline My Computer	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. __________________

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Excel Scrolling	duffgun	General Software	5	24-08-2006 11:58 PM
(X/K)ubuntu example content	megamaced	Linux and Other OSes	1	22-06-2006 09:56 PM
Some new content	Big B	News and Article Comments	0	13-01-2005 12:50 PM
What type of content do you want to see?	syngod	Suggestions and Feedback	2	24-02-2003 12:44 AM