Thursday, August 6, 2009

Creating Scroll view, using overflow property.

===============================================
HTML file
----------------------------

The below paragraph put in a div & include .stream class as in css file

reff: file:///home/Yoga/Back%20up/Beginning%20CSS%20examples/Chapter%2015/exp1.html

below is the dummy data.
By giving the box a set height, you ensure that it does not expand or contract based on the
content it holds. If there is more content than the box can hold, the scrollbar will automatically
appear, allowing you to scroll through the whole text, as you see in Figure

Now define the stream selector. First, the size of the box is declared (here it is a square
300×300 pixels), and some padding is declared to ensure the content does not touch the border.
Most importantly, the overflow property is given the auto value.

Note that for this example, you will need to paste plenty of content into this container to
see the effect of the overflow, such as masses of Lorem Ipsum text. With that taken care of, we
can move on to the nifty styling.
content it holds. If there is more content than the box can hold, the scrollbar will automatically
appear, allowing you to scroll through the whole text, as you see in Figure




================================================
CSS file
-----------------------
.stream {
width:150px;
height:250px;
padding:10px;
border:1px solid #999;
background-color:#FFF;
overflow:auto;
}

No comments:

Post a Comment