1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SELFHTML: HTML/XHTML / Multimedia / Eigenschaften von Objekten</title>
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<meta name="description" content="Wie Sie Objekte zum umgebenden Text ausrichten können, und welche zusätzlichen Optionen es für Objekte gibt.">
<meta name="keywords" content="SELFHTML, HTML, XHTML, Multimedia, Java-Applets, Video, Sound, virtuelle Welten, Plugins, Flash, <object>, align=, hspace=, vspace=, declare, standby=">
<meta name="author" content="Stefan Münz, selfhtml@teamone.de">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="DC.Publisher" content="selfhtml@teamone.de">
<meta name="DC.Date" content="2001-10-27T08:00+01:00">
<meta name="DC.Identifier" content="http://selfhtml.teamone.de/html/multimedia/objekteigenschaften.htm">
<meta name="DC.Language" content="de">
<meta name="DC.Rights" content="../../editorial/copyright.htm">
<meta name="DC.Date.Create" content="2001-10-27T08:00+01:00">
<meta name="SELF.Version" content="1">
<meta name="SELF.Pagetype" content="Information">
<meta name="SELF.Path" content="SELFHTML == ../../index.htm // HTML == ../index.htm // Multimedia == index.htm">
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#AA5522" vlink="#772200" alink="#000000">
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td bgcolor="#FFEEDD" class="nav"><a class="an" name="top"><img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"></a> <a href="../../index.htm"><b>SELFHTML</b></a>/<a href="../../navigation/index.htm" target="_parent">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="../index.htm"><b>HTML/XHML</b></a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="index.htm"><b>Multimedia</b></a></td>
</tr></table>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td bgcolor="#EEEEEE" class="doc" width="110"><img src="../../src/logo.gif" width="106" height="109" border="0" alt="SELFHTML"></td>
<td bgcolor="#EEEEEE" class="doc" valign="bottom" width="100%"><h2>Eigenschaften von Objekten</h2></td>
</tr>
<tr>
<td bgcolor="#EEEEEE" class="doc" valign="top" align="center">
<img src="../../src/dokx.gif" width="30" height="20" vspace="6" border="0" alt="Informationsseite">
</td>
<td bgcolor="#FFFFFF" valign="top" nowrap>
<p>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#ausrichten_zum_text"><b>Objekt zum umgebenden Text ausrichten</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#textumfluss"><b>Text um Objekt fließen lassen</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#meldungstext"><b>Meldungstext während des Ladevorgangs anzeigen</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#nur_bei_aufruf"><b>Instanz eines Objekts nur bei Aufruf durch Anwender anzeigen</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#css"><b>Objekte formatieren mit CSS Stylesheets</b></a></p>
</td>
</tr>
<tr><td colspan="2" bgcolor="#EEEEEE" class="doc"> <a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> </td></tr>
</table>
<h2 class="Sh2"><img src="../../src/html40.gif" width="30" height="30" border="0" alt="HTML 4.0"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><img src="../../src/msie5.gif" width="30" height="30" border="0" alt="MSIE 5.0"><img src="../../src/netsc6.gif" width="30" height="30" border="0" alt="Netscape 6.0"> <a class="an" name="ausrichten_zum_text">Objekt zum umgebenden Text ausrichten</a></h2>
<p>Da das <code>object</code>-Element ein <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#inline_elemente"><b>Inline-Element</b></a> ist, können Objekte mitten in einem Text platziert werden. Wenn das höher ist als die Zeilenhöhe, dann muss der Text der gleichen Zeile vertikal zum Objekt ausgerichtet werden. Wenn Sie nichts anderes angeben, wird der Text untenbündig zum Objekt ausgerichtet. Sie können jedoch mit Hilfe eines Attributs selbst bestimmen, wie der Text zum Objekt ausgerichtet werden soll. Dieses Attribut ist allerdings als <i>deprecated</i> gekennzeichnet und soll künftig aus dem HTML-Standard entfallen. Die gleiche Wirkung lässt sich nämlich auch mit <img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#css"><b>CSS Stylesheets</b></a> erzielen.</p>
<p>Die Angaben sind jedoch nur von Bedeutung, wenn die Anzeige mit Hilfe eines Plugins erfolgt und direkt im Anzeigefenster des WWW-Browsers möglich ist.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/object_align_zeile.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>HIER SPIELT&nbsp;&nbsp;<object data="haste.mid" type="audio/x-midi" width="200" height="100" align="middle">
Ihr Browser kann das Objekt leider nicht anzeigen!
</object>&nbsp;&nbsp;DIE MUSIK</h1>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Mit dem Attribut <code>align=</code> können Sie umgebenden Text vertikal zum Objekt ausrichten (<i>align = Ausrichtung</i>).</p>
<p>Mit <code>align="top"</code> wird der Text obenbündig zum eingebundenen Objekt ausgerichtet (<i>top = oben</i>).<br>
Mit <code>align="middle"</code> wird der Text mittig zum eingebundenen Objekt ausgerichtet (<i>middle = mittig</i>).<br>
Mit <code>align="bottom"</code> wird der Text untenbündig zum eingebundenen Objekt ausgerichtet (<i>bottom = unten</i>).</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Um Objekte und Texte sauber zueinander auszurichten, können Sie auch mit rahmenlosen ("blinden) <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../tabellen/index.htm"><b>Tabellen</b></a> arbeiten.</p>
<p>Netscape interpretiert noch weitere Wertzuweisungen, die jedoch nicht zum HTML-Standard gehören und ungültiges HTML erzeugen:<br>
<p>Mit <code>align="texttop"</code> richten Sie den Text obenbündig zum Objekt aus, und zwar an der Oberkante des kleinsten Textes (<i>texttop = oben am Text</i>).<br>
Mit <code>align="absmiddle"</code> richten Sie den Text absolut mittig zum Objekt aus, auch bei unterschiedlichen Textgrößen (<i>absmiddle = absolute middle = in jedem Fall mittig</i>).<br>
Mit <code>align="absbottom"</code> richten Sie den Text untenbündig zum Objekt aus, und zwar an der Unterkante des kleinsten Textes (<i>absbottom = absolute bottom = in jedem Fall untenbündig</i>).<br>
Mit <code>align="baseline"</code> richten Sie den Text genauso aus wie mit der Standardangabe <code>align="bottom"</code>. Benutzen Sie deshalb besser die Standardangabe.</p>
<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
 <a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a>
</td></tr></table>
<h2 class="Sh2"><img src="../../src/html40.gif" width="30" height="30" border="0" alt="HTML 4.0"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><img src="../../src/msie5.gif" width="30" height="30" border="0" alt="MSIE 5.0"><img src="../../src/netsc6.gif" width="30" height="30" border="0" alt="Netscape 6.0"> <a class="an" name="textumfluss">Text um Objekt fließen lassen</a></h2>
<p>Objekte können Sie links oder rechts ausrichten. Der umgebende Text fließt dabei um das Objekt. Mit zwei weiteren Attributen können Sie Abstand zum umfließenden Text erzeugen, damit der Text nicht direkt am Objekt "klebt". Den automatischen Textumfluss können Sie auch abbrechen und die Textfortsetzung unterhalb des Objekts erzwingen. Alle dazu notwendigen Attribute sind allerdings als <i>deprecated</i> gekennzeichnet und sollen künftig aus dem HTML-Standard entfallen. Die gleiche Wirkung lässt sich nämlich auch mit <img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#css"><b>CSS Stylesheets</b></a> erzielen.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/object_align_fluss.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body bgcolor="#333333" text="#FFFFFF">
<h1>
<object classid="CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"
width="200" height="200" align="left" hspace="10" vspace="7">
<param name="movie" VALUE="neucler.swf">
</object>
Animation!
</h1>
<p>Kann sch&ouml;n sein, wenn sie nicht zu aufdringlich ist.
Dies ist ein Flash-Filmchen von gerade mal einem Kilobyte Gr&ouml;&szlig;e.
<br clear="all"></p>
<h2>Gratulation!</h2>
<p>Der Text geht unterhalb weiter.</p>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Mit den Angaben <code>align="left"</code> bzw. <code>align="right"</code> veranlassen Sie den Browser, das Objekt linksbündig bzw. rechtsbündig auszurichten und den darauffolgenden Fließtext rechts bzw. links neben dem Objekt anzuzeigen und um das Objekt herumfließen zu lassen (<i>align = Ausrichtung, left = links, right = rechts</i>). Der umgebende Text kann verschiedene Elemente enthalten, zum Beispiel auch Überschriften oder Listen.</p>
<p>Um Abstand zwischen Objekt und umfließendem Text zu erzeugen, stehen die Attribute <code>hspace=</code> und <code>vspace=</code> zur Verfügung.<br>
Mit <code>hspace=</code> [Pixel] bestimmen Sie den Abstand zwischen Objekt und anderen Elementen links bzw. rechts davon (<i>hspace = horizontal space = horizontaler Abstand</i>).<br>
Mit <code>vspace=</code> [Pixel] bestimmen Sie den Abstand zwischen Objekt und anderen Elementen darüber bzw. darunter (<i>vspace = vertical space = vertikaler Abstand</i>).<br>
Das Attribut <code>hspace=</code> betrifft immer den linken <b>und</b> den rechten Randabstand vom Objekt, <code>vspace=</code> immer den oberen <b>und</b> den unteren Randabstand. Wenn Sie also beispielsweise bei einem links ausgerichteten Objekt <code>hspace=</code> definieren, wird nicht nur rechts vom Objekt 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 <img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#css"><b>CSS Stylesheets</b></a> verwenden.<br>
Sie können beide Attribute notieren oder auch nur eines davon.</p>
<p>Um den automatischen Textumfluss zu unterbrechen und zu erzwingen, dass alles was folgt unterhalb des Objekts angezeigt wird, können Sie einen <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../text/zeilenumbruch.htm"><b>Zeilenumbruch</b></a> mit dem Attribut <code>clear=</code> notieren.<br>
Mit <code><br clear="all"></code> erreichen Sie, dass der Textfluss ab der nächsten Zeile in jedem Fall unterhalb des Objekts fortgesetzt wird.<br>
Mit <code><br clear="left"></code> erreichen Sie, dass der Textfluss ab der nächsten Zeile unterhalb eines linksbündig ausgerichteten Objekts fortgesetzt wird.<br>
Mit <code><br clear="right"></code> erreichen Sie, dass der Textfluss ab der nächsten Zeile unterhalb eines rechtsbündig ausgerichteten Objekts fortgesetzt wird.</p>
<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
 <a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a>
</td></tr></table>
<h2 class="Sh2"><img src="../../src/html40.gif" width="30" height="30" border="0" alt="HTML 4.0"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"> <a class="an" name="meldungstext">Meldungstext während des Ladevorgangs anzeigen</a></h2>
<p>Multimedia-Objekte oder ausführbare Programme wie Java-Applets können zum Teil längere Ladezeiten verursachen. Auch dann, wenn die Dateien selbst nicht größer als durchschnittliche HTML- oder Grafikdateien sind, müssen beim Anwender in der Regel Plugins oder Laufzeitinterpreter aktiviert werden. Das kostet Zeit.</p>
<p>Um den Anwender nicht im Unklaren über die Wartezeit und die Ladevorgänge an seinem Rechner zu lassen, können Sie einen Meldungstext angeben, der dem Anwender bis zur fertigen Anzeige des eingebundenen Objekts angezeigt wird.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/object_standby.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Bauen Sie eine Br&uuml;cke!</h1>
<p><object classid="java:Bridges.class" codetyte="application/java-vm" width="350" height="420"
standby="Das Spiel wird geladen. Bitte einen Moment Geduld...">
<param name="Color" value="white">
</object></p>
<p>Klicken Sie auf wei&szlig;e Felder. Mit Rot versuchen Sie Ihre Br&uuml;cke zwischen
oberem und unterem Spielfeldrand zu bauen. Blau versucht Sie daran zu
hindern.</p>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Innerhalb eines einleitenden <code><object></code>-Tags können Sie mit dem Attribut <code>standby=</code> einen Meldungstext für den Ladevorgang angeben.</p>
<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
 <a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a>
</td></tr></table>
<h2 class="Sh2"><img src="../../src/html40.gif" width="30" height="30" border="0" alt="HTML 4.0"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"> <a class="an" name="nur_bei_aufruf">Instanz eines Objekts nur bei Aufruf durch Anwender anzeigen</a></h2>
<p>Sie können ein Objekt definieren, das zunächst nur deklariert wird. Damit es angezeigt oder ausgeführt wird, muss es erst aktiviert werden. Das kann z.B. mit Hilfe eines Verweises auf das deklarierte Objekt geschehen, oder durch ein anderes Objekt, das die Initialisierung anstößt.<br>
Browser, die diese Option nicht kennen (darunter auch Netscape, MS Internet Explorer),
starten den Abspielvorgang sofort.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/object_declare.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>
<h1>Wollen Sie oder wollen Sie nicht?</h1>
<p><object declare id="Marquee" classid="java:zticker.class" codetyte="application/java" width="600" height="60">
<param name="msg" value="Sie wissen was Sie wollen!">
<param name="href" value="../../../index.htm">
<param name="speed" value="5">
<param name="bgco" value="255,255,0">
<param name="txtco" value="255,000,000">
<param name="hrefco" value="255,255,255">
</object></p>
<p><a href="#Marquee">Animierten Text anzeigen</a></p>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Innerhalb eines einleitenden <code><object></code>-Tags können Sie mit dem Standalone-Attribut <code>declare</code> ein Objekt als lediglich deklariert definieren (<i>declare = erklären, angeben</i>).</p>
<p>Mit dem <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../attribute/index.htm"><b>Universalattribut</b></a> <code>id=</code> können Sie einen Zielanker innerhalb des Objekts definieren, im Beispiel: "Marquee" (<i>id = identifier = Bezeichner</i>). Der Name sollte nicht zu lang sein und darf keine Leerzeichen, Sonderzeichen oder deutsche Umlaute enthalten. Das erste Zeichen muss ein Buchstabe sein. Danach sind auch Ziffern erlaubt. Benutzen Sie als Sonderzeichen im Namen höchstens den Unterstrich (<code>_</code>), den Bindestrich (<code>-</code>), den Doppelpunkt (<code>:</code>) oder den Punkt (<code>.</code>). Groß- und Kleinschreibung wird unterschieden.</p>
<p>Mit einem Verweis auf den Zielanker (siehe obiges Beispiel) können Sie den Anwender das Objekt aktivieren lassen. Beim <code>href</code>-Attribut notieren Sie das führende Gatterzeichen (<code>#</code>) und dahinter den id-Namen des Objekts.</p>
<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
 <a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a>
</td></tr></table>
<h2 class="Sh2"><img src="../../src/html40.gif" width="30" height="30" border="0" alt="HTML 4.0"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><img src="../../src/msie5.gif" width="30" height="30" border="0" alt="MSIE 5.0"><img src="../../src/netsc6.gif" width="30" height="30" border="0" alt="Netscape 6.0"> <a class="an" name="css">Objekte formatieren mit CSS</a></h2>
<p>CSS Stylesheets bieten Eigenschaften an, mit deren Hilfe die beiden Funktionen <img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"> <a href="#ausrichten_zum_text"><b>Objekt zum umgebenden Text ausrichten</b></a> und <img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"> <a href="#textumfluss"><b>Text um Objekt fließen lassen</b></a> 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.<br>
Bei Verwendung von CSS Stylesheets müssen Sie zunächst wissen, wie man <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../../css/formate/index.htm"><b>CSS-Formate definieren</b></a> kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften:<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../css/eigenschaften/ausrichtung.htm#vertical_align"><b>vertical-align</b></a> (Vertikale Ausrichtung)<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../css/eigenschaften/positionierung.htm#float"><b>float</b></a> (Textumfluss)<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../css/eigenschaften/positionierung.htm#clear"><b>clear</b></a> (Fortsetzung bei Textumfluss)<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../css/eigenschaften/randabstand.htm"><b>Außenrand und Abstand</b></a></p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/object_css.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Objekte formatieren mit CSS</title>
</head>
<body>
<h1>HIER SPIELT <object data="breeze.mid" type="audio/x-midi" width="200" height="100"
style="vertical-align:middle; margin-left:30px; margin-right:30px;">
Ihr Browser kann das Objekt leider nicht anzeigen!
</object> DIE MUSIK</h1>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Mit <code>style="vertical-align:middle"</code> erreichen Sie in einem <code><object></code>-Tag das Gleiche wie mit <code>align="middle"</code>,<br>
mit <code>style="vertical-align:text-top"</code> das Gleiche wie mit <code>align="top"</code>,<br>
und mit <code>style="vertical-align:text-bottom"</code> das Gleiche wie mit <code>align="bottom"</code>.</p>
<p>Mit den CSS-Angaben <code>margin-left:30px;</code> und <code>margin-right:30px;</code> wird im obigen Beispiel rechts und links zum Text hin ein Abstand von 30 Pixeln geschaffen. Wenn Sie Text um ein Objekt fließen lassen wollen (im obigen Beispiel nicht realisiert), können Sie mit einer Angabe wie <code>style="float:left; margin-right:20px; margin-bottom:10px"</code> erreichen, dass das Objekt links ausgerichtet wird und nachfolgender Text rechts um das Objekt fließt. Dabei wird zwischen Objekt und Text ein Abstand von 20 Pixeln gehalten (links vom Objekt wird dagegen, anders als beim HTML-Attribut <code>hspace=</code>, kein Abstand von 20 Pixeln erzeugt). Nach unten hin, also zum Text unterhalb wird ein Abstand von 10 Pixeln definiert.</p>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td colspan="2" bgcolor="#EEEEEE" class="doc">
 <a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a>
</td></tr>
<tr><td bgcolor="#EEEEEE" class="doc" align="right"><a href="java_applets.htm"><img src="../../src/next.gif" width="10" height="10" border="0" hspace="10" alt="weiter"></a></td>
<td bgcolor="#FFFFFF"><img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="java_applets.htm"><b>Java-Applets einbinden (herkömmlich)</b></a>
</td></tr>
<tr>
<td bgcolor="#EEEEEE" class="doc" align="right"><a href="objekte.htm"><img src="../../src/prev.gif" width="10" height="10" border="0" hspace="10" alt="zurück"></a></td>
<td bgcolor="#FFFFFF" width="100%"><img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="objekte.htm"><b>Objekte einbinden</b></a>
</td>
</tr>
<tr><td colspan="2" bgcolor="#EEEEEE" class="doc"> </td></tr>
</table>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td bgcolor="#FFEEDD" class="nav"><a class="an" name="bottom"><img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"></a> <a href="../../index.htm"><b>SELFHTML</b></a>/<a href="../../navigation/index.htm" target="_parent">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="../index.htm"><b>HTML/XHML</b></a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="index.htm"><b>Multimedia</b></a></td>
</tr></table>
<p>© 2001 <img src="../../src/mail.gif" width="15" height="10" border="0" alt="E-Mail"> <a href="mailto:selfhtml@teamone.de">selfhtml@teamone.de</a></p>
</body>
</html>
|
