SELFHTML: HTML/XHTML / Grafiken / Grafiken ausrichten

SELFHTML/Navigationshilfen HTML/XHTML Grafiken
	Grafiken ausrichten
	Grafik zum umgebenden Text ausrichten Text um Grafik fließen lassen Grafik und andere Inhalte ausrichten mit Tabellen Grafiken ausrichten mit CSS

Grafik zum umgebenden Text ausrichten

Da das img-Element ein Inline-Element ist, können Grafiken mitten in einem Text platziert werden. Wenn nun aber die Grafik höher ist als die Zeilenhöhe, dann muss der Text der gleichen Zeile in irgendeiner Weise zur Grafik ausgerichtet werden. Wenn Sie nichts anderes angeben, wird der Text untenbündig zur Grafik ausgerichtet. Sie können jedoch mit Hilfe eines Attributs selbst bestimmen, wie der Text zur Grafik ausgerichtet werden soll. Dieses Attribut ist allerdings als deprecated gekennzeichnet und soll künftig aus dem HTML-Standard entfallen. Die gleiche Wirkung lässt sich nämlich auch mit CSS Stylesheets erzielen.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Grafik zum umgebenden Text ausrichten</title>
</head>
<body>

<h1>Woran der Denker denkt</h1>

<p>
  Denkt der Denker
  <img src="denker.png" width="70" height="137" align="top" alt="Denker">
  an das Oben?
</p>

<hr>

<p>
  Denkt der Denker
  <img src="denker.png" width="70" height="137" align="middle" alt="Denker">
  an die Mitte?
</p>

<hr>

<p>
  Denkt der Denker
  <img src="denker.png" width="70" height="137" align="bottom" alt="Denker">
  an das Unten?
</p>

</body>
</html>

Erläuterung:

Das Beispiel enthält drei kurze, normalerweise in eine Zeile passende Textabsätze, bei denen jeweils die gleiche Grafik mitten im Text platziert ist. In allen drei Absätzen wird die darin notierte Grafik mit Hilfe von HTML zum Text davor und dahinter ausgerichtet.

Mit dem HTML-Attribut align im <img>-Tag können Sie Text in der gleichen Zeile zur Grafik ausrichten (align = Ausrichtung):
Mit align="top" wird der Text obenbündig zur Grafik ausgerichtet (top = oben).
Mit align="middle" wird der Text mittig zur Grafik ausgerichtet (middle = mittig).
Mit align="bottom" wird der Text untenbündig zur Grafik ausgerichtet (bottom = unten).

Beachten Sie:

Die Browser interpretieren zum Teil noch weitere Angaben. Diese sind jedoch nicht im HTML-Standard verzeichnet und führen deshalb zu ungültigem HTML. Erwähnt seien sie trotzdem:
Mit align="texttop" richten Sie den Text obenbündig zur Grafik aus, und zwar an der Oberkante des kleinsten Textes in der Zeile (texttop = oben am Text).
Mit align="absmiddle" richten Sie den Text absolut mittig zur Grafik aus, auch bei unterschiedlichen Textgrößen (absmiddle = absolute middle = in jedem Fall mittig).
Mit align="absbottom" richten Sie den Text untenbündig zur Grafik aus, und zwar an der Unterkante des kleinsten Textes in der Zeile (absbottom = absolute bottom = in jedem Fall untenbündig).
Mit align="baseline" richten Sie den Text genauso aus wie mit der Standardangabe align="bottom". Benutzen Sie deshalb besser die Standardangabe.

Text um Grafik fließen lassen

Grafiken, die Sie mit dem <img>-Tag referenzieren, können Sie links oder rechts ausrichten. Der umgebende Text fließt dabei um die Grafik. Mit zwei weiteren Attributen können Sie Abstand zum umfließenden Text erzeugen, damit der Text nicht direkt an der Grafik "klebt". Den automatischen Textumfluss können Sie auch abbrechen und die Textfortsetzung unterhalb der Grafik erzwingen. Alle dazu notwendigen Attribute sind allerdings als deprecated gekennzeichnet und sollen künftig aus dem HTML-Standard entfallen. Die gleiche Wirkung lässt sich nämlich auch mit Stylesheets erzielen.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text um Grafik fließen lassen</title>
</head>
<body>

<h1><img src="text.png" width="311" height="194" align="left" vspace="10" hspace="20" alt="Text?">Ein Text</h1>

<p>Manche Texte erschlie&szlig;en sich nur aus der n&ouml;tigen Distanz. <!-- usw. -->
Aber das hier, das ist richtiger Text. Und er flie&szlig;t sogar, n&auml;mlich um die
Grafik.<br clear="all"></p>

</body>
</html>

Erläuterung:

Mit align="left" richten Sie eine Grafik linksbündig aus. Nachfolgend notierter Text fließt rechts um die Grafik.
Mit align="right" können Sie die Grafik rechtsbündig ausrichten. Der nachfolgend notierte Text fließt dann links um die Grafik.
Von "nachfolgend notiertem Text" wird hier nur der Einfachheit halber gesprochen. Es kann sich um beliebige Elemente handeln, also z.B. auch andere Grafiken, Tabellen, Multimedia-Referenzen usw.

Um Abstand zwischen Grafik und umfließendem Text zu erzeugen, stehen die Attribute hspace und vspace zur Verfügung.
Mit hspace [Pixel] bestimmen Sie den Abstand zwischen Grafik und anderen Elementen links bzw. rechts davon (hspace = horizontal space = horizontaler Abstand).
Mit vspace [Pixel] bestimmen Sie den Abstand zwischen Grafik und anderen Elementen darüber bzw. darunter (vspace = vertical space = vertikaler Abstand).
Das Attribut hspace betrifft immer den linken und den rechten Randabstand von der Grafik, vspace immer den oberen und den unteren Randabstand. Wenn Sie also beispielsweise bei einer links ausgerichteten Grafik hspace definieren, wird nicht nur rechts der Grafik zum nebenstehenden Text ein Abstand erzeugt, sondern auch links zum Rand des Anzeigefensters hin. Um dies zu verhindern, können Sie exakter arbeiten, indem Sie Stylesheets verwenden.
Sie können beide Attribute notieren oder auch nur eines davon.

Um den automatischen Textumfluss zu unterbrechen und zu erzwingen, dass alles was folgt unterhalb der Grafik angezeigt wird, können Sie einen Zeilenumbruch mit dem Attribut clear notieren.
Mit <br clear="all"> erreichen Sie, dass der Textfluss ab der nächsten Zeile in jedem Fall unterhalb der Grafik fortgesetzt wird.
Mit <br clear="left"> erreichen Sie, dass der Textfluss ab der nächsten Zeile unterhalb einer linksbündig ausgerichteten Grafik fortgesetzt wird.
Mit <br clear="right"> erreichen Sie, dass der Textfluss ab der nächsten Zeile unterhalb einer rechtsbündig ausgerichteten Grafik fortgesetzt wird.

Grafik und andere Inhalte ausrichten mit Tabellen

In der Praxis kommt es häufig vor, dass Sie Grafiken sauber nebeneinander oder untereinander platzieren und mit Text beschriften wollen. In solchen Fällen bietet sich das Arbeiten mit "blinden", also unsichtbaren Tabellen an.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Grafik und andere Inhalte ausrichten mit Tabellen</title>
</head>
<body>

<div align="center">
  <table border="0" cellpadding="4" width="600">
    <tr>
      <th><h3>Schadenfreude</h3></th>
      <th><h3>Erstaunen</h3></th>
      <th><h3>Skepsis</h3></th>
      <th><h3>Betretenheit</h3></th>
    </tr>
    <tr>
      <td align="center"><img src="ausdruck_1.gif" width="100" height="100" alt="Schadenfreude"></td>
      <td align="center"><img src="ausdruck_2.gif" width="100" height="100" alt="Erstaunen"></td>
      <td align="center"><img src="ausdruck_3.gif" width="100" height="100" alt="Skepsis"></td>
      <td align="center"><img src="ausdruck_4.gif" width="100" height="100" alt="Betretenheit"></td>
    </tr>
    <tr>
      <td align="center" valign="top">ist die sch&ouml;nste Freude, kann aber Feinde schaffen</td>
      <td align="center" valign="top">gebar die Philosophie und wird von Rechthabern immer wieder untersch&auml;tzt</td>
      <td align="center" valign="top">ist bisweilen angebracht, sollte aber nicht das weitere Dazulernen behindern</td>
      <td align="center" valign="top">ist sehr unangenehm, w&auml;hrt aber nicht ewig</td>
    </tr>
  </table>
</div>

</body>
</html>

Erläuterung:

Im Beispiel wird eine blinde Tabelle (border="0") mit vier Spalten definiert. In der ersten Zeile stehen vier Überschriften, in der zweiten vier entsprechende Grafiken, und in der dritten vier zugehörige Texte. Die Tabelle ist innerhalb eines allgemeinen Bereichs zentriert ausgerichtet (<div align="center">...</div>) und hat eine Breite von 600 Pixeln.

Mit cellpadding="4" im einleitenden <table>-Tag wird sichergestellt, dass sich die Zelleninhalte nicht zu nahe kommen.

Mit align="center" werden die Inhalte der Datenzellen zentriert ausgerichtet. Da die Beschreibungstexte unterschiedlich lang sein können, wird mit valign="top" in deren Datenzellen erreicht, dass sie alle obenbündig ausgerichtet werden.

Grafiken ausrichten mit CSS

Stylesheets bieten Eigenschaften an, mit deren Hilfe die beiden Funktionen Grafik zum umgebenden Text ausrichten und Text um Grafik fließen lassen ebenso realisierbar sind wie mit HTML. Das "Fein-Tuning" ist mit Hilfe von CSS sogar deutlich genauer. Mit CSS müssen Sie arbeiten, wenn Sie die in diesem Abschnitt beschriebenen Effekte erzielen und dabei aber mit der HTML-Variante "Strict" arbeiten wollen.
Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften:
vertical-align (Vertikale Ausrichtung)
float (Textumfluss)
clear (Fortsetzung bei Textumfluss)
Außenrand und Abstand

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Grafiken ausrichten mit CSS</title>
</head>
<body>

<h1>Woran der Denker denkt</h1>

<p>
  Denkt der Denker
  <img src="denker.png" width="70" height="137" style="vertical-align:text-top" alt="Denker">
  an das Oben?
</p>

<hr>

<p>
  Denkt der Denker
  <img src="denker.png" width="70" height="137" style="vertical-align:middle" alt="Denker">
  an die Mitte?
</p>

<hr>

<p>
  Denkt der Denker
  <img src="denker.png" width="70" height="137" style="vertical-align:text-bottom" alt="Denker">
  an das Unten?
</p>

<hr>

<h2>
  <img src="text.png" width="311" height="194" style="float:left; margin-right:20px;
  margin-bottom:10px" alt="Text?">Oder denkt er an ...?
</h2>

<p>
  Manche Texte erschlie&szlig;en sich nur aus der n&ouml;tigen Distanz. <!-- usw. -->
  Aber das hier, das ist richtiger Text. Und er flie&szlig;t sogar,
  n&auml;mlich um die Grafik.<br style="clear:both">
</p>

</body>
</html>

Erläuterung:

Mit style="vertical-align:text-top" erreichen Sie in einem <img>-Tag das Gleiche wie mit align="top",
mit style="vertical-align:middle" das Gleiche wie mit align="middle",
und mit style="vertical-align:text-bottom" das Gleiche wie mit align="bottom".
Mit style="float:left; margin-right:20px; margin-bottom:10px" wird erreicht, dass die Grafik links ausgerichtet wird und nachfolgender Text rechts um die Grafik fließt. Dabei wird zwischen Grafik und Text ein Abstand von 20 Pixeln gehalten (links von der Grafik wird dagegen, anders als beim HTML-Attribut hspace, kein Abstand von 20 Pixeln erzeugt). Nach unten hin, also zum Text unterhalb wird ein Abstand von 10 Pixeln definiert.

Beachten Sie:

Netscape 4.x zerhaut die Anzeige aufs Übelste. Das ist leider ein typisches Beispiel dafür, wie Netscape 4.x die Entwicklung hin zu standardkonformerem Arbeiten ausgebremst hat.


	Grafiken als Verweise
	Grafiken einbinden

SELFHTML/Navigationshilfen HTML/XHTML Grafiken

href="../index.htm">HTML/XHTML

Grafiken