We're going to use these styles to talk about how to adapt your pages to print.

Showing/hiding layers

Roll your mouse over the links....

The 'visibility' property

This box (<div>) is originally set to have a style rule visibility: hidden. But when the mouse rolls over, a javascript command changes this style rule to visibility: visible.

Turning off the visibility of a layer hides the contents, but the space it would take up on the page is still reserved.

The 'display' property

When the display is changed from 'block' to 'none', then the space that this division takes up is ignored. It's as if the contents were never there.


The effects on this page depend on changing two style rules:

    visibility: visible < = > visibility: hidden
    display: block < = > display: none;