display versus visibility - Quelltext - Cascading Style Sheets

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>display versus visibility - Cascading Style Sheets - Workshop Internet-Pr&auml;senz</title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="DE" />
 <meta http-equiv="Content-Style-Type" content="text/css" />

 <meta name="description"
  content="&Uuml;bung Cascading Style Sheets. display versus visibility" />
 <meta name="keywords" content="HTML, Cascading Style Sheets" />
 <meta name="author" content="Roland Unger" />

 <style type="text/css">
 <!--

  .displayNone img {
     display: none;
  }

  .visibilityHidden img {
     visibility: hidden;
  }

  p {
     border: 1px solid #808080;
     background: #ffffee;
     padding: 0.2em 0.5em;
  }

  img {
     float: right;
  }

  .clearer {
     clear: both;
  }

 -->
 </style>
</head>

<body>

<h1>Workshop Internet-Präsenz</h1>

<h2>display versus visibility - Cascading Style Sheets</h2>

<p><img src="html_css_704.jpg" alt="Ramesseum" width="120" height="79" />
Auf der rechten Seite dieses Absatzes wird ein Bild vom
Ramesseum auf dem thebanischen Westrufer gezeigt.<br class="clearer" /></p>

<p class="visibilityHidden"><img src="html_css_704.jpg" alt="Ramesseum" width="120" height="79" />
Auf der rechten Seite dieses Absatzes wird kein Bild vom
Ramesseum auf dem thebanischen Westrufer gezeigt. Das Bild
wird nicht angezeigt, aber der Platz, den es eingenommen hätte,
freigehalten. Dies gelingt mit der Angabe
visibility: hidden.<br class="clearer" /></p>

<p class="displayNone"><img src="html_css_704.jpg" alt="Ramesseum" width="120" height="79" />
Auf der rechten Seite dieses Absatzes wird kein Bild vom
Ramesseum auf dem thebanischen Westrufer gezeigt. Das Bild
wird nicht angezeigt, auch der Platz, den es eingenommen hätte,
wird nicht dargestellt bzw. freigehalten. Dies gelingt mit
der Angabe display: none.<br class="clearer" /></p>

</body>
</html>