visibility
With CSS, you can actually make elements invisible on the page. This works on elements whether or not they are positioned.
H4 { visibility: hidden }
I would show you an example, but since it would be invisible, there really isn't any point, is there?
Your choices are:
- visible makes the element visible.
- hidden makes the element invisible.
- inherit means it will inherit its visibility from its parent element.
When an element is hidden, it still takes up the same amount of room in the browser window; you just don't see it. So, if you're wrapping text around an image that you've hidden, the text will appear to wrap around an empty space.
Keep this property in mind when you're scripting and using dynamic HTML. For example, you might want to make a paragraph or image visible only when the mouse rolls over something.
Communicator does not support visibility. IE 4 and 5 users, enjoy!
clip
With clipping, you can control exactly which parts of an element are visible and which are invisible.
H2 { clip: rect(10px 200px 100px 40px) }
This property works only on those elements that have been absolutely positioned. (Thankfully, it works in Communicator 4.x and IE 4 and 5!)
Clipping affects the display of the element, but not the page layout. So, whatever you clip still takes up room on the page.
The code above sets up a clipping region that is a rectangle (which is the only shape supported so far). Everything within the clipping region will be displayed. The top of our example region is 10 pixels from the top of the box containing the element. The right side is 200 pixels from the left edge of the box. The bottom edge is 100 pixels from the top of the box. And the left side is 40 pixels from the left edge of the box.
That means that if the gray box below were a paragraph (or an image), the clipping region would be the yellow line. Thus, only the black region of the entire paragraph would be visible.
Check out a real example.
You could also use any other length units, or even percentage values if you wish. A value of auto means that no clipping will occur. By the way, negative values for clip are permitted.
Clipping can come in very handy in the world of dHTML, temporarily hiding or exposing elements as needed. (Imagine creating a pulldown menu in dHTML: When a user rolls over a header, the clipping region enlarges to reveal the links below the header.)
OK, Mulder, so now we can position stuff and control it on the page. How about layering things on top of one another? Follow me ...
next page»
