How do you do this

Discussion in 'HTML & Website Design' started by oo7ml, Jul 13, 2007.

0
  1. #1
    I am looking to build a page that doesn't have a scroll bar. Instead i want the contents on the page to have there own cool separate scroll bars like you see in a Flash site. can some one please point me in the right direction, thanks
     
    oo7ml, Jul 13, 2007 IP
  2. pash

    pash Peon

    Messages:
    670
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #2
    <Iframe></IFrame>

    learn about this tag... this is one way of doing it. i think you are looking for this one..
     
    pash, Jul 13, 2007 IP
  3. ColorWP.com

    ColorWP.com Notable Member

    Messages:
    3,121
    Likes Received:
    100
    Best Answers:
    1
    Trophy Points:
    270
    #3
    The answer is CSS. You should wrap around the content you want with separate scrollbar with overflow: auto. Example:
    <div class="scrolled">
sometext<br>
sometext<br>
sometext<br>
sometext<br>
sometext<br>
sometext<br>
sometext<br>
sometext<br>
sometext<br>
sometext<br>
</div>
    HTML:
    And in the CSS part:
    .scrolled {
postition:absolute;
width: (desired width in pixels);
height: (desired height in pixels);
overflow: auto;
}
    HTML:
    So when the content's wodth or height exceeds the size you selected in the CSS, it will appear a scrollbar around the content, because of the overflow. ;)
     
    ColorWP.com, Jul 13, 2007 IP
  4. oo7ml

    oo7ml Well-Known Member

    Messages:
    656
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    105
    #4
    Ok, cool, but it has that horrible standard scroll bar, is there any way to change that to your custom one, no... And thanks
     
    oo7ml, Jul 13, 2007 IP
  5. ColorWP.com

    ColorWP.com Notable Member

    Messages:
    3,121
    Likes Received:
    100
    Best Answers:
    1
    Trophy Points:
    270
    #5
    ColorWP.com, Jul 13, 2007 IP
  6. oo7ml

    oo7ml Well-Known Member

    Messages:
    656
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    105
    #6
    <Iframe> - does that allow you to change the scroll bars in both FF and IE
     
    oo7ml, Jul 13, 2007 IP
  7. ColorWP.com

    ColorWP.com Notable Member

    Messages:
    3,121
    Likes Received:
    100
    Best Answers:
    1
    Trophy Points:
    270
    #7
    No, scrollbars are not changable thru changing any part of the HTML code of the page in FF.
     
    ColorWP.com, Jul 13, 2007 IP
  8. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #8
    If you're talking about coloring your scrollbars, that can only be done in Internet Explorer, Opera and Konqueror. No other browser to my knowledge supports that.

    If you want to kill the default scrollbar, you'll have to globally collapse all of your margins and padding using the universal selector (* { margin: 0; padding: 0;}), set the HTML and BODY elements to height: 100%: overflow: hidden (since IE 5/6 treat height as min-height, using overflow: hidden will force it to act like height does in more standards compliant browsers, such as IE 7, Firefox, Opera, Safari and Konqueror).

    Then you're going to have to use fixed positioning to affix your footer to the bottom of the viewport (which IE 5/6 doesn't support unless you force it, which can be done using CSS alone but will screw up any relative positioning you use elsewhere), and then set your heights on the page contents, and their overflow properties on those elements to auto (to force the scrollbar if the contents exceed the height of their containers).

    It's not a pretty solution, and requires a LOT of bending over backwards, but it can be done.
     
    Dan Schulz, Jul 13, 2007 IP