Positionierte Abbildungen mit Bildunterschrift - 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>Positionierte Abbildungen mit Bildunterschrift - 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 Sheet. Positionierte Abbildungen mit Bildunterschrift." />
 <meta name="keywords" content="HTML, Cascading Style Sheet, Bildschirm, Ausdruck" />
 <meta name="author" content="Dr. Roland Unger" />

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

  body {
     width: 90%;
  }

  table.abb {
     margin: 1em auto;
     border: 1px solid #000;
     border-collapse: collapse;
     text-align: left;
  }

  table.abb td {
     padding: 0.3em;
  }

  div.abb {
     margin: 1em auto;
     border: 1px solid #000;
     padding: 0.3em;
     text-align: left;
  }

  div.abb img, div.abb .caption {
     padding-bottom: 0.6em;
  }

  .caption {
     font-size: 90%;
     vertical-align: baseline;
  }

  .credit {
     font-size: 90%;
     color: #999999;
     text-align: right;
  }

  table.links , div.links {
     clear: left;
     float: left;
     margin: 0 0.5em 0.5em 0;
  }

  table.rechts , div.rechts {
     clear: right;
     float: right;
     margin: 0 0 0.5em 0.5em;
  }

  .clearer {
     clear: both;
  }

 -->
 </style>
</head>

<body>

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

<h3>Positionierte Abbildungen mit Bildunterschrift</h3>

<div class="abb" style="width: 250px">
 <img src="html_css_b01.jpg" alt="Sphingen-Allee vor dem Karnak-Tempel (Luxor, Ägypten)" width="250" height="164" />
 <div class="caption">Sphingen-Allee vor dem Karnak-Tempel (Luxor, Ägypten)</div>
 <div class="credit">Roland Unger</div>
</div>

<table class="abb links" style="width: 160px">
 <tbody>
  <tr><td><img src="html_css_b02.jpg" alt="Relief im so genannten Botanischen Garten im Karnak-Tempel (Luxor, Ägypten)" width="160" height="105" /></td></tr>
  <tr><td class="caption">Relief im so genannten Botanischen Garten im Karnak-Tempel (Luxor, Ägypten)</td></tr>
  <tr><td class="credit">Roland Unger</td></tr>
 </tbody>
</table>

<p>Bildunterschriften sind im Gegensatz zu Tabellen
(Tabellenüberschriften) nicht vorgesehen. Man kann
mit „Klammern“ in Form von Tabellen oder
&lt;div&gt;-Bereichen beides zusammenhalten. Ein
zentriertes Bild erreicht man mit der Randeinstellung
(z.B.) <em>margin: 1em auto</em>. Rechts- und
linksseitig umflossene Abbildungen werden über die
<em>float</em>-Eigenschaft definiert.<br class="clearer" /></p>

<table class="abb rechts" style="width: 160px">
 <tbody>
  <tr><td><img src="html_css_b03.jpg" alt="Weiße Kappelle Sesostris’ I. im Karnak-Tempel (Luxor, Ägypten)" width="160" height="105" /></td></tr>
  <tr><td class="caption">Weiße Kappelle Sesostris’ I. im Karnak-Tempel (Luxor, Ägypten)</td></tr>
  <tr><td class="credit">Roland Unger</td></tr>
 </tbody>
</table>

<p>Die Verwendung von &lt;div&gt;-Bereichen ist sicher
die elegantere Lösung. Probleme gibt es nur, wenn der
eingeschriebene Text eine größere Breite fordert, als
vorhanden ist. Der Text wird dann über den Rand
geschrieben oder das Ganze mit Rollbalken versehen.
Tabellen sind in diesem Fall günstiger, weil sie sich
automatisch in der Größe anpassen.<br class="clearer" /></p>

</body>
</html>