How Do You Creat Scrollable Content Within a Page?

Discussion in 'HTML & Website Design' started by larssonk22, May 22, 2008.

  1. #1
    I'll try to be more clear. Bacially I have designed a template however I do not want the template to be stretched when I add the large amount of text. So I would like to have this content have its own scroll bar.

    Is there a method to doing this without using frames.

    Once this is done I would like to be able to change the look and colour of the scroll bar, I understand this can be done by using CSS??

    Thanks :cool:
     
    larssonk22, May 22, 2008 IP
  2. Neticule

    Neticule Well-Known Member

    Messages:
    491
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    108
    #2
    You need to use a bit of CSS and a <div> for this. click for an example

    Just enclose your content in a div tag as so:
    <div style="width: 200px; height: 200px; overflow:scroll">
    Put your content here
    </div>

    You can change the numbers on width: and height: to the amount of pixels wide and tall you want the scrolling area to be.

    As for changing the color of the scrollbar, I think that is IE only, and not sure if you can do it on a div scrollbar.
     
    Neticule, May 22, 2008 IP
  3. larssonk22

    larssonk22 Well-Known Member

    Messages:
    236
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    103
    #3
    Oh wow Neticule thank you very much that is exactly what I was looking for. I will try that code out when I get home, I thought it would be far more complicated :p What part of that involves CSS?

    If anyone else has an idea on how to change the scroll bar look and colour I would be very grateful.

    thanks again.
     
    larssonk22, May 22, 2008 IP
  4. Neticule

    Neticule Well-Known Member

    Messages:
    491
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    108
    #4
    Everything you see in the style="" attribute is technically CSS :)

    If you have trouble getting it to fit right try:
    1. use a % sign instead of px for width and height to define the dimensions as a percentage.
    2. add "float: left;" or "float: right;" to the end of the style="" properties

    those might help get it fit to your page correctly, just fiddle with it a bit :)
     
    Neticule, May 22, 2008 IP
  5. Cherryone

    Cherryone Peon

    Messages:
    43
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    This can also be done with an iframe, but Neticule's solution is way better though
     
    Cherryone, May 22, 2008 IP
  6. Dondon2d

    Dondon2d Peon

    Messages:
    3,193
    Likes Received:
    146
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Read the first post, he does not want to use frames. An iframe is a frame, so..
     
    Dondon2d, May 22, 2008 IP
  7. Cherryone

    Cherryone Peon

    Messages:
    43
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Whoops... sorry :)
     
    Cherryone, May 23, 2008 IP
  8. larssonk22

    larssonk22 Well-Known Member

    Messages:
    236
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    103
    #8
    Well I know frames should not be used from a search engines perspective, but I do not know much about iframes.
     
    larssonk22, May 24, 2008 IP
  9. ss210

    ss210 Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    use some CSS mate, it helps :D
     
    ss210, May 24, 2008 IP
  10. techfired

    techfired Well-Known Member

    Messages:
    214
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    115
    #10
    You can use textarea(read only) for that

    <textarea cols="10" rows"40" readonly="yes">Write whatever</textarea>

    Easily customizable with no CSS knowledge.
     
    techfired, May 24, 2008 IP