Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Grafiken
SELFHTML

Grafiken ausrichten
Informationsseite

nach unten Grafik zum umgebenden Text ausrichten
nach unten Text um Grafik fließen lassen
nach unten Grafik und andere Inhalte ausrichten mit Tabellen
nach unten Grafiken ausrichten mit CSS
 nach unten 

HTML 3.2XHTML 1.0deprecated (missbilligt)MS IE 2.0Netscape 1.1Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2 Grafik zum umgebenden Text ausrichten

Da das img-Element ein Seite 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 nach unten CSS Stylesheets erzielen.

Beispiel:

Beispiel-Seite 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.

nach obennach unten

HTML 3.2XHTML 1.0deprecated (missbilligt)MS IE 2.0Netscape 1.1Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2 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 nach unten Stylesheets erzielen.

Beispiel:

Beispiel-Seite 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 nach unten 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 Seite 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.

nach obennach unten

HTML 3.2XHTML 1.0MS IE 2.0Netscape 1.1Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2 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 Kapitel Tabellen an.

Beispiel:

Beispiel-Seite 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.

nach obennach unten

HTML 4.0XHTML 1.0MS IE 4.0Netscape 6.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.2 Grafiken ausrichten mit CSS

Stylesheets bieten Eigenschaften an, mit deren Hilfe die beiden Funktionen nach oben Grafik zum umgebenden Text ausrichten und nach oben 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 Kapitel CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften:
Seite vertical-align (Vertikale Ausrichtung)
Seite float (Textumfluss)
Seite clear (Fortsetzung bei Textumfluss)
Seite Außenrand und Abstand

Beispiel:

Beispiel-Seite 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.

 nach oben
weiter Seite Grafiken als Verweise
zurück Seite Grafiken einbinden
 
Teil von SELFHTML/Navigationshilfen Teil von HTML/XHTML Teil von Grafiken

© 2005 Seite Impressum