DISPLAY AND VISIBILITY PAGE 13

DISPLAY AND VISIBILITY

Display and Visibility

The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden.
Value	Description
visible	The box and its contents are shown to the user.
hidden	The box and its content are made invisible, although they still affect the layout of the page.
collapse	This is for use only with dynamic table columns and row effects.
Example:37
<html><head>
<style>
h1.hidden {visibility:hidden;}
h2.hidden {display:none;}
li{display:inline;}
</style></head>
<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the hidden heading still takes up space.</p>
<h2>This is a display heading</h2>
<h2 class="hidden">This is a hidden heading</h2>
<p>Notice that the hidden heading does not take up space.</p>
<p>Display this link list as a horizontal menu:</p>
<ul>
<li><a href="d:/css/dimension1.html" target="_blank">CSS</a></li>
<li><a href="D:/css/FONT.HTML" target="_blank">FONTS</a></li>
<li><a href="D:/CSS/FONT1.HTML" target="_blank">CSS-HTML</a></li>
<li><a href="D:/CSS/PS.HTML" target="_blank">DEMO</a></li>
</ul>      </body></html>
Example:38
Example(collapse.html):
<html><head><style>
tr.collapse {visibility:collapse;}
</style></head>
<body>
<table border="1">
<tr> <td>Html</td>   <td>Css</td> </tr>
<tr class="collapse">
<td>javascript</td>  <td>xml</td>
</tr></table>
<p><b>Note:</b> If you  erase the collapse property of <tr> in second row of the table, you can see second row.</p>
</body></html>