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

Discussion in 'Web Design & Programming' started by davisphive, Jul 9, 2007.

  1. davisphive

    davisphive Geek Trainee

    Likes Received:
    0
    Trophy Points:
    0
    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.
     
  2. Sniper

    Sniper Administrator Staff Member

    Likes Received:
    59
    Trophy Points:
    63
    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!
     
  3. davisphive

    davisphive Geek Trainee

    Likes Received:
    0
    Trophy Points:
    0
    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.
     
  4. Matt555

    Matt555 iMod

    Likes Received:
    98
    Trophy Points:
    48
    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.
     
  5. davisphive

    davisphive Geek Trainee

    Likes Received:
    0
    Trophy Points:
    0
    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.
     
  6. Sniper

    Sniper Administrator Staff Member

    Likes Received:
    59
    Trophy Points:
    63
    maybe you need to use [google]word-wrap css[/google]?
     
  7. davisphive

    davisphive Geek Trainee

    Likes Received:
    0
    Trophy Points:
    0
    Doesn't that only work in IE?
     
  8. roy92

    roy92 CSS HAXOR

    Likes Received:
    0
    Trophy Points:
    0
    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.
     
  9. Platinum1211

    Platinum1211 Geek Trainee

    Likes Received:
    0
    Trophy Points:
    0
    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.
     
  10. Matt555

    Matt555 iMod

    Likes Received:
    98
    Trophy Points:
    48
    Using tables for layout isn't considered good design and coding practice anymore.
     
  11. roy92

    roy92 CSS HAXOR

    Likes Received:
    0
    Trophy Points:
    0
    tables are like... so old school:p
     
  12. Platinum1211

    Platinum1211 Geek Trainee

    Likes Received:
    0
    Trophy Points:
    0
    Guess that makes me a bit old school =\
     
  13. Matt555

    Matt555 iMod

    Likes Received:
    98
    Trophy Points:
    48
    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.
     

Share This Page