Results 1 to 13 of 13
  1. #1

    How to make scrolling section in middle of page?

    Hello,
    I want to make a section on a webpage that will contain a lot of text, but rather then have a huge pagfe that will have to scroll down, I would like to have a box on the page that has a scroll bar that will scroll the tet down rather then the page. I hope this makes sense.

    I use Dreamweaver 2004 MX.
    Thank you

  2. #2
    I was able to do it using a "textarea" but I cannot format the text inside the box? Anyone know how I can do this...
    Thanks

  3. #3
    Join Date
    Mar 2004
    Location
    Rochester, NY
    Posts
    22

  4. #4
    Join Date
    Nov 2003
    Posts
    149
    There are a couple of ways that I can think of to do this. The first is using css overflow. The code would look like this
    p
    {
    overflow: scroll
    }

    or

    p
    {
    overflow: auto
    }

    This method works with browsers from NN 6.0 and up and IE 4.0 and up. It may have some problems with Mac IE but I can't confirm that.

    The second method is in inline frame also called an i-frame. This works nicely too, but has problems with older browsers and many search engine bots won't crawl the content in an i-frame.

    The code looks like this:

    <IFRAME SRC="yourpage.html" TITLE="Your inline page">
    <!-- Alternate content for non-supporting browsers -->
    <H2>Header 1</H2>
    <H3>Header 2</H3>

    Content here.
    ...
    </IFRAME>

    I have used inline frames in the past but abandoned them due to user / search engine problems.

    Hope that helps

  5. #5
    Join Date
    Jan 2004
    Location
    Chicago
    Posts
    288
    I would use a <div> before I went with an IFrame;

    Code:
    			      <div class="bodytext" style="padding-top:2px; padding-right:15px; padding-bottom:2px;padding-left:2px; margin-left:5px; height: 100px; width: 650px; overflow:auto; background-color: #FFFFFF; border: 1px #708090 solid; position:relative; float:center;"> 
    
    Text here
    
    </div>
    9/11 Memorial, do you have a story to tell?
    United Web Site Award Givers, do you believe your site is worthy of an award?

  6. #6
    You can use the <DIV> tag , like this:


    <DIV style="OVERFLOW: auto; WIDTH: 460px;; HEIGHT: 420px SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #999999">

    <!-- You content here -->


    </DIV>
    YasHost.com
    Cheap Dedicated Servers - Fully Managed, cPanel/WHM Included FOR FREE

  7. #7
    Cool. Thanks a lot. As for the Iframes, how can I change how big the width and height of the window?

    Thanks

  8. #8
    Sorry, Executive I was writing the reply and didn't saw your post.
    YasHost.com
    Cheap Dedicated Servers - Fully Managed, cPanel/WHM Included FOR FREE

  9. #9
    Originally posted by taltos1
    Cool. Thanks a lot. As for the Iframes, how can I change how big the width and height of the window?

    Thanks

    <iframe width="300" height="200" src="page.html" />
    YasHost.com
    Cheap Dedicated Servers - Fully Managed, cPanel/WHM Included FOR FREE

  10. #10
    Join Date
    Feb 2004
    Location
    S.Wales
    Posts
    97
    <iframe src="page.html" name="frame" width="200" height="200" frameborder="0"></iframe>

  11. #11
    Thanks all. I think the DIV overflow tag is the way I will go. But when I use it it pushed all the content so that it is still a large window. How can I constrain the box to say 200px by 200px. I tried this code:

    <DIV style="OVERFLOW: auto; WIDTH: 200px;; HEIGHT: 200px SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-BASE-COLOR: #999999">

    but the box does not stay 200 x 200..

    Thanks

  12. #12
    Join Date
    Feb 2004
    Location
    S.Wales
    Posts
    97
    width: 200px; height: 200px; should work

  13. #13
    Join Date
    Feb 2004
    Location
    S.Wales
    Posts
    97
    just thinking, you have your text inside the div yes, do you close the div?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •