Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Scrollbar messing up layout

    Hi all, thanks in advance for helping me out!

    I'm working on this project and have been puzzling how to put a scrollbar in a table to create the same effect as if you were using frames, but without the disatvantages of frames.
    I found a way, and implemented it. But somehow it messes up the layout, and I have no idea what causes this.

    Before inputting the scrollbarfunction:
    www.niekdekker.com/site/noscrollbar.htm

    After inputting the scrollbarfunction:
    www.niekdekker.com/site/scrollbar.htm

    My question is:
    How do I change the code so the layout won't get messed up? If that's not possible; is there another way to get a scrollbar without using frames?

    You can download and adjust the websitefiles here:
    www.niekdekker.com/site/files.zip

    I hope you can help me!

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change presentation

    It depends on what effect you want to accomplish, but it seems to me that it would be easiest to move around the presentational graphics.

    Move the yellow triangle graphic in a bar underneath the div, instead of to the right of it; you'll need to separate it from the photograph. This way, the div scroll bar will align to the far right of the div and the footer-like effect of the yellow triangle will be preserved.
    Furthermore, use padding to create sufficient whitespace around the text contained in the div so it doesn't run into the scroll bar area.

    While I'm still far from a fan of fixed height scrolling elements like this, at least the visuals should work out to some extent.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    Regular Coder Pepe, the bull's Avatar
    Join Date
    Feb 2005
    Location
    Vancouver, WA
    Posts
    163
    Thanks
    1
    Thanked 16 Times in 16 Posts
    Just change the height of the div.scroll until the white space goes away. 343 worked for me. I also agree that more white space would make it easier to read. Adding the blue text will space it out further from the scrollbar.
    Code:
    div.scroll {overflow: auto; height: 343; padding-right: 10px;   }
    Pepe, the bull


  •  

    Posting Permissions

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