hiding scroll bars in code?

can someone pls explain how to hide the scrollbar? i've tried looking at tutorials but i either don't understand or completely mess up the code. in the past, using overflow:auto used to hide it for me but now it doesn't and overflow:hidden just hides the text. i'm really lost and can't figure out how to do it. it doesn't look absolutely terrible on this but i think it would look better if you couldn't actually see the scroll bars.

     

        
Name
Birthdate
Orientation
Background
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus. Magna sit amet purus gravida quis blandit turpis cursus. Lacus sed viverra tellus in. In cursus turpis massa tincidunt dui. Sed id semper risus in hendrerit. Metus dictum at tempor commodo ullamcorper a lacus. Ullamcorper dignissim cras tincidunt lobortis. Pharetra et ultrices neque ornare aenean euismod elementum nisi. Nibh sit amet commodo nulla facilisi. Aliquet bibendum enim facilisis gravida neque convallis a cras semper. Quis ipsum suspendisse ultrices gravida. Ut tellus elementum sagittis vitae et. Aliquam ultrices sagittis orci a scelerisque purus semper eget duis. Lacus sed turpis tincidunt id aliquet risus feugiat in. Cursus in hac habitasse platea dictumst. Vulputate enim nulla aliquet porttitor lacus luctus. In mollis nunc sed id. Aliquet nec ullamcorper sit amet risus nullam eget felis eget. Venenatis lectus magna fringilla urna. Nisl condimentum id venenatis a. Nisi lacus sed viverra tellus in hac habitasse platea dictumst. Nam libero justo laoreet sit amet. Vestibulum rhoncus est pellentesque elit. Eget dolor morbi non arcu risus quis varius. In cursus turpis massa tincidunt dui ut. Vitae suscipit tellus mauris a diam maecenas sed enim ut. Vitae ultricies leo integer malesuada nunc vel risus commodo. Semper viverra nam libero justo laoreet sit amet cursus. Mi bibendum neque egestas congue quisque egestas. Tellus rutrum tellus pellentesque eu tincidunt. Libero volutpat sed cras ornare arcu.
Plotting
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus. Magna sit amet purus gravida quis blandit turpis cursus. Lacus sed viverra tellus in. In cursus turpis massa tincidunt dui. Sed id semper risus in hendrerit. Metus dictum at tempor commodo ullamcorper a lacus. Ullamcorper dignissim cras tincidunt lobortis. Pharetra et ultrices neque ornare aenean euismod elementum nisi. Nibh sit amet commodo nulla facilisi. Aliquet bibendum enim facilisis gravida neque convallis a cras semper. Quis ipsum suspendisse ultrices gravida. Ut tellus elementum sagittis vitae et. Aliquam ultrices sagittis orci a scelerisque purus semper eget duis. Lacus sed turpis tincidunt id aliquet risus feugiat in. Cursus in hac habitasse platea dictumst. Vulputate enim nulla aliquet porttitor lacus luctus. In mollis nunc sed id. Aliquet nec ullamcorper sit amet risus nullam eget felis eget. Venenatis lectus magna fringilla urna. Nisl condimentum id venenatis a. Nisi lacus sed viverra tellus in hac habitasse platea dictumst. Nam libero justo laoreet sit amet. Vestibulum rhoncus est pellentesque elit. Eget dolor morbi non arcu risus quis varius. In cursus turpis massa tincidunt dui ut. Vitae suscipit tellus mauris a diam maecenas sed enim ut. Vitae ultricies leo integer malesuada nunc vel risus commodo. Semper viverra nam libero justo laoreet sit amet cursus. Mi bibendum neque egestas congue quisque egestas. Tellus rutrum tellus pellentesque eu tincidunt. Libero volutpat sed cras ornare arcu.
Out of Character
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus. Magna sit amet purus gravida quis blandit turpis cursus. Lacus sed viverra tellus in. In cursus turpis massa tincidunt dui. Sed id semper risus in hendrerit. Metus dictum at tempor commodo ullamcorper a lacus. Ullamcorper dignissim cras tincidunt lobortis. Pharetra et ultrices neque ornare aenean euismod elementum nisi. Nibh sit amet commodo nulla facilisi. Aliquet bibendum enim facilisis gravida neque convallis a cras semper. Quis ipsum suspendisse ultrices gravida. Ut tellus elementum sagittis vitae et. Aliquam ultrices sagittis orci a scelerisque purus semper eget duis. Lacus sed turpis tincidunt id aliquet risus feugiat in. Cursus in hac habitasse platea dictumst. Vulputate enim nulla aliquet porttitor lacus luctus. In mollis nunc sed id. Aliquet nec ullamcorper sit amet risus nullam eget felis eget. Venenatis lectus magna fringilla urna. Nisl condimentum id venenatis a. Nisi lacus sed viverra tellus in hac habitasse platea dictumst. Nam libero justo laoreet sit amet. Vestibulum rhoncus est pellentesque elit. Eget dolor morbi non arcu risus quis varius. In cursus turpis massa tincidunt dui ut. Vitae suscipit tellus mauris a diam maecenas sed enim ut. Vitae ultricies leo integer malesuada nunc vel risus commodo. Semper viverra nam libero justo laoreet sit amet cursus. Mi bibendum neque egestas congue quisque egestas. Tellus rutrum tellus pellentesque eu tincidunt. Libero volutpat sed cras ornare arcu.
Friends


Back to Top ↑

Comments

You must be logged in to comment
the_fictitious #1
hey there! long time no....talk i guess? btw whats this?
SkyeButterfly #2
Okay wow so for some reason my comment got cut in half (thanks AFF), so I'll post the rest in the replies haha
SkyeButterfly #3
I can definitely explain what you need to do make a hidden scrollbar, but I don't think I'll be good at explaining the reasons WHY things work as they do, though I'll try LOL.

To hide the scrollbar, you need two (or three) lines of code.

The first line should look something like this (adjust depending on sizes and other criteria):

<div style="width:200px;height:200px;overflow:hidden;">

This will insure that the scrollbar is hidden because the "overflow" is hidden.

The second line of code should look like this:

<div style="width:220px;height:200px;overflow:auto;">

This is the actual box with all your content in it. Take note everything is the same except the width and the overflow element. The width is 20px bigger than the first line of code because the scrollbar is about 20px in width on computers, which is why the first div is 20px less. By having the first div be 20px smaller, it insure that the scrollbar is hidden.

However, when you're not using the scrollbar (for example, you don't have enough text that will fill up an entire box), the scrollbar won't show up, and the text/pictures that you do have will get cut off because the second div is 20px bigger than the first div. To fix that, you can add a third line of code that corresponds to the width of the first div:

<div style="width:200px;">

Note that there's set height because all of that is predetermined by how much content you want to have.



Your final code should look like this:

<div style="width:200px;height:200px;overflow:hidden;">

<div style="width:220px;height:200px;overflow:auto;">

<div style="width:200px;">

content

</div>

</div>

</div>



I hope that helps :-)
wonpilist #4
I definitely can! I'll dm you about it later :)
Back to Top ↑