Make your own free website on Tripod.com

Visibility

Making An Object Invisible
You've already learned how to make an object invisible, but there is a different method to do this. With this technique the object will still take up the same amount of space, leaving behind a large blank area, where the object should be.

You do this using the visibility property. The values are hidden, visible, and inherit. Visible is the default, inherit will cause the element to inherit the visibility of its parent, and hidden will completely hide the object. For example, let's say you wanted to hide your images with this method;

img {
visibility: hidden;
}

Making Only Parts Of An Object Visible
To set the visibilities of an object, you need to set the position, top, and left properties shown in the position tutorial, then you can set which parts of the image will be clipped.

For example:

img {
position: absolute;
top: 0px;
left: 0px;
clip: rect(10 90 300 30);
}

That image's clipping path will be set 10 pixels from the top, 90 from the left to the right, 300 pixels down, and 30 pixels from the left side.

Setting Up Where Overflow Goes
You can set the overflow property to the values scroll, hidden, visible, and auto. With scroll, the overflow will create an inline scroll that will allow you to see the rest of the content. With hidden, extra content will be hidden. With visible the overflow is displayed in full, as with typical content. Auto allows the browser to decide what to do with the overflow.

If I wanted to make this:

overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow overflow

I would make my CSS this:

div {
width: 200px;
height: 100px;
overflow: scroll;
border: 1px solid #809BB9;
}

Main?