CSS: Dimensions - Scrollbars in CSS
(Page 5 of 5 )
Since there is a little bit of space available and we have finished our discussion of dimensions in CSS, I figured I would throw in a brief example of working with scrollbars. Try the following example:
<html>
<head>
</head>
<body>
<style type="text/css">
.scroll{
display:block;
border: 1px solid blue;
padding:5px;
margin-top:5px;
width:200px;
height:100px;
overflow:scroll;
}
.auto{
display:block;
border: 2px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:150px;
overflow:auto;
}
</style>
<p>This is a scroll:</p>
<div class="scroll">
My favorite cereals are: Apple Jacks, Cheerios, Fruit Loops, Pops, Cookie Crisp, and Peanut Butter Captain Crunch even though it cuts up the roof of my mouth. It is worth it though.
</div>
<br />
<p>With an auto value:</p>
<div class="auto">
My least favorite cereals are anything healthy. I mean, who needs that. It's all about the sugar. In fact, I have never tried a cereal that was really healthy for you, and if I did, I added so much sugar to it that it wasn't even funny. </div>
</body>
</html>
Well that's all the time we have for now. I will cover how scrollbars work in our next exciting episode, so stick around.
Till then...
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 2 
