File: positionierung.htm

package info (click to toggle)
selfhtml 8.1.2-1
  • links: PTS
  • area: non-free
  • in suites: bullseye, buster, jessie, jessie-kfreebsd, squeeze, stretch, wheezy
  • size: 28,076 kB
  • ctags: 4,161
  • sloc: xml: 614; java: 375; makefile: 8
file content (1004 lines) | stat: -rw-r--r-- 76,109 bytes parent folder | download
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
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen</title>
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<meta name="description"    content="Welche CSS-Eigenschaften es gibt, um HTML-Elemente frei zu positionieren, den Textfluss zu kontrollieren und die Anzeige von Elementen zu kontrollieren.">
<meta name="keywords"       content="SELFHTML, CSS, Stylesheets, Cascading Stylesheets, HTML, CSS-Eigenschaften, Positionierung, absolute Positionierung, relative Positionierung, Breite, Hhe, Anzeige von Elementen, position, top, left, bottom, right, width, min-width, max-width, height, min-height, max-height, overflow, direction, float, clear, z-index, display, visibility, clip">
<meta name="author"         content="Redaktion SELFHTML, selfhtml81@selfhtml.org">
<meta name="robots"         content="noindex, nofollow">
<meta name="DC.Publisher"   content="SELFHTML e. V.">
<meta name="DC.Date"        content="2005-11-16T01:48:05+01:00">
<meta name="DC.Identifier"  content="http://de.selfhtml.org/css/eigenschaften/positionierung.htm">
<meta name="DC.Language"    content="de">
<meta name="DC.Rights"      content="../../editorial/copyright.htm">
<meta name="DC.Date.created" content="2001-10-27T08:00+01:00">
<meta name="SELF.Pagetype"  content="page">
<link rel="alternate" type="application/atom+xml" title="SELFHTML-Weblog (Atom, gesamt)" href="http://aktuell.de.selfhtml.org/weblog/atom-feed">
<link rel="alternate" type="application/rss+xml" title="SELFHTML-Weblog (RSS, Auszge)" href="http://aktuell.de.selfhtml.org/weblog/rss-feed">
<link rel="shortcut icon" type="image/x-icon" href="../../src/favicon.ico">
<link rel="author" title="Impressum" href="../../editorial/impressum.htm">
<link rel="contents" title="Inhaltsverzeichnis" href="../../navigation/inhalt.htm">
<link rel="index" title="Stichwortverzeichnis" href="../../navigation/stichwort.htm">
<link rel="search" title="Suche" href="../../navigation/suche/index.htm">
<link rel="help" title="Hilfe" href="../../editorial/index.htm">
<link rel="copyright" title="Urheberrecht" href="../../editorial/copyright.htm">
<link rel="top" title="SELFHTML" href="../../index.htm">
<link rel="up" title="CSS-Eigenschaften" href="index.htm">
<link rel="next" title="Layouts fr Printmedien" href="printlayouts.htm">
<link rel="prev" title="Pseudoelemente und Pseudoklassen" href="pseudoformate.htm">
<link rel="first" title="Schriftformatierung" href="schrift.htm">
<link rel="last" title="Filter (nur Microsoft)" href="filter.htm">
</head>
<body>

<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td colspan="2" class="nav"><a class="an" name="top"><img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"></a> <a href="../../index.htm">SELFHTML</a>/<a href="../../navigation/index.htm" target="_parent" class="navh">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von">&nbsp;<a href="../index.htm">Stylesheets (CSS)</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von">&nbsp;<a href="index.htm">CSS-Eigenschaften</a></td>
</tr>
<tr>
<td class="doc" width="110"><a href="../../index.htm"><img src="../../src/logo.gif" width="106" height="109" border="0" alt="SELFHTML"></a></td>
<td class="docbot" width="100%"><h1 class="ph1">Positionierung und Anzeige von Elementen</h1></td>
</tr>
<tr>
<td class="doctop">
<img src="../../src/dokx.gif" width="30" height="20" vspace="6" alt="Informationsseite">
</td>
<td valign="top" nowrap="nowrap">
<p>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#allgemeines">Allgemeines zur Positionierung und Anzeige von Elementen</a><br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#position">position</a> (Positionsart)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#postop">top</a> (Startposition von oben)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#left">left</a> (Startposition von links)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#posbottom">bottom</a> (Startposition von unten)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#right">right</a> (Startposition von rechts)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#width">width</a> (Breite)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#min_width">min-width</a> (Mindestbreite)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#max_width">max-width</a> (Maximalbreite)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#height">height</a> (Hhe)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#min_height">min-height</a> (Mindesthhe)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#max_height">max-height</a> (Maximalhhe)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#overflow">overflow</a> (Elementbereich mit bergroem Inhalt)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#direction">direction</a> (Richtung)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#float">float</a> (Textumfluss)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#clear">clear</a> (Fortsetzung bei Textumfluss)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#z_index">z-index</a> (Schichtposition bei berlappung)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#display">display</a> (Anzeigeart bzw. Nichtanzeige ohne Platzhalter)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#visibility">visibility</a> (Anzeige bzw. Nichtanzeige mit Platzhalter)<br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#clip">clip</a> (Anzeigebereich eingrenzen)
</p>
</td>
</tr><tr><td colspan="2" class="doc">&nbsp;<a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a>&nbsp;</td></tr>
</table>



<h2><a class="an" name="allgemeines">Allgemeines zur Positionierung und Anzeige von Elementen</a></h2>

<p>Ab der CSS-Version 2.0 gibt es verschiedene Eigenschaften, um Elemente einer WWW-Seite exakt im Anzeigefenster des WWW-Browsers zu positionieren und die Position von Elementen untereinander genau zu kontrollieren. Dazu gehren Angaben zum absoluten und relativen Positionieren von Elementen, Angaben zur Ausdehnung von Elementen, Angaben zum Umflieen von Elementen und Angaben zum berlappen und Anzeigen von Elementen.</p>

<p>Absolutes und relatives Positionieren von Elementen bietet Ihnen die Mglichkeit, das Erscheinungsbild von Web-Seiten strker medienorientiert zu gestalten. So knnen Sie fr einzelne Bereiche festlegen, wo genau diese Bereiche beginnen sollen. Bereiche knnen sich berlappen usw. Im Wesentlichen decken diese Eigenschaften die Mglichkeiten der alten Netscape-<img src="../../src/kap.gif" width="15" height="13" alt="Kapitel">&nbsp;<a href="../../html/layer/index.htm">Layer</a> ab. Im Gegensatz zu den Layern sind sie jedoch ein offizieller Vorschlag des W3-Konsortiums. Netscape und der Microsoft Internet Explorer interpretieren diese Angaben seit ihren 4er-Versionen - allerdings noch mit einigen Einschrnkungen bzw. Besonderheiten.</p>

<p>Das Positionieren von Elementen ist eine wichtige Voraussetzung fr viele Anwendungsflle von <img src="../../src/kap.gif" width="15" height="13" alt="Kapitel">&nbsp;<a href="../../dhtml/index.htm">Dynamischem HTML</a>. Mit Hilfe entsprechender Script-Untersttzung knnen Sie positionierte Elemente bewegen, ein-/ausblenden, anders berlappen usw.</p>



<p class="doc"><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></p>



<h2><img src="../../src/css20.gif" width="30" height="30" alt="CSS 2.0" title="CSS 2.0"><img src="../../src/netsc4.gif" width="30" height="30" alt="Netscape 4.0" title="Netscape 4.0"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0">&nbsp;<a class="an" name="position">position (Positionsart)</a></h2>

<p>Sie knnen fr einen Bereich bestimmen, wie er positioniert werden soll.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/position.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;html&gt;&lt;head&gt;&lt;title&gt;position&lt;/title&gt;
&lt;style type="text/css"&gt;
body { margin:0; padding:0; height:1500px; }
div { border:1px solid #888; }

#s1 { width:150px; height:35px; }
#s2 { width:150px; height:35px; }
#r3 { width:150px; height:35px; position:relative; top:5px; left:25px; background-color:#dfd; }
#s4 { width:150px; height:35px; }
#s5 { width:150px; height:35px; }
#r6 { width:150px; height:35px; position:relative; top:-15px; left:10px; background-color:#fdd; }
#s7 { width:150px; height:35px; }
#s8 { width:150px; height:35px; }

#a1 { position:absolute; top:35px; left:240px; width:150px; height:150px;
      z-index:1; background-color:#ddf; }
#a2 { position:absolute; top:90px; left:230px; width:120px; height:70px;
      z-index:2; background-color:#ccf; }
#a3 { position:absolute; top:220px; left:200px; width:250px; height:250px;
      z-index:3; background-color:#ffa; }
#a4 { position:absolute; top:20px; left:20px; width:70px; height:70px;
      z-index:1; background-color:#ff5; }
#a5 { position:absolute; top:20px; right:20px; width:70px; height:70px;
      z-index:2; background-color:#dd2; }
#a6 { position:absolute; top:130px; left:-50px; width:190px; height:70px;
      z-index:-1; background-color:#fdd; }
#a7 { position:absolute; top:530px; left:50px; bottom:50px; right:50px;
      background-color:#fdd; }

#f1 { position:fixed; top:45px; left:430px; width:150px; height:150px; background-color:#afa; }
&lt;/style&gt;
&lt;/head&gt;&lt;body&gt;

&lt;p&gt;Um &lt;code&gt;position:fixed&lt;/code&gt; zu demonstrieren, scrollen Sie an das Ende der Seite.&lt;/p&gt;

&lt;div id="s1"&gt;s1 static&lt;/div&gt;
&lt;div id="s2"&gt;s2 static&lt;/div&gt;
&lt;div id="r3"&gt;r3 relative&lt;/div&gt;
&lt;div id="s4"&gt;s4 static&lt;/div&gt;
&lt;div id="s5"&gt;s5 static&lt;/div&gt;
&lt;div id="r6"&gt;r6 relative&lt;/div&gt;
&lt;div id="s7"&gt;s7 static&lt;/div&gt;

&lt;div id="a1"&gt;a1 absolute&lt;/div&gt;
&lt;div id="a2"&gt;a2 absolute&lt;/div&gt;
&lt;div id="a3"&gt;a3 absolute
  &lt;div id="a4"&gt;a4 absolute&lt;/div&gt;
  &lt;div id="a5"&gt;a5 absolute&lt;/div&gt;
  &lt;div id="a6"&gt;a6 absolute&lt;/div&gt;
&lt;/div&gt;

&lt;div id="a7"&gt;a7 absolute&lt;/div&gt;

&lt;div id="f1"&gt;f1 fixed&lt;/div&gt;

&lt;div id="s8"&gt;s8 static&lt;/div&gt;

&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Mit <code>position:</code> knnen Sie die Positionsart bestimmen. Folgende Angaben sind erlaubt:</p>

<p><code>static</code> = keine spezielle Positionierung, normaler Elementfluss (Normaleinstellung).<br>
<code>relative</code> = relative Positionierung (Verschiebung), gemessen an der Normalposition oder Anfangsposition des Elements selbst.<br>
<code>absolute</code> = absolute Positionierung, gemessen am Rand des nchsthheren Vorfahrenelements, das <strong>nicht</strong> die Normaleinstellung <code>position:static</code> aufweist. Scrollt mit.<br>
<code>fixed</code> = absolute Positionierung, gemessen am "Viewport", d.h. am Browserfenster. Bleibt beim Scrollen stehen.</p>

<p>Besonders das Verhalten der Angaben <code>absolute</code> und <code>relative</code> ist anfangs etwas verwirrend. Denn <code>absolute</code> verhlt sich durchaus relativ, wie die inneren <code>div</code>-Elemente a4 bis a6 des Beispiels zeigen: relativ nmlich zum Rand des Elternelements (a3), vorausgesetzt dieses Element ist mit <code>absolute</code>, <code>fixed</code> oder <code>relative</code> positioniert. Falls kein von <code>static</code> abweichend positioniertes Vorfahrenelement existiert, bezieht sich die Positionierung auf das <code>body</code>-Element.</p>

<p>Die Angabe <code>relative</code> bezieht sich auf die Normalposition des Elements selbst und verschiebt es entsprechend (Elemente r3 und r6). Der ursprnglich eingenommene Raum bleibt hinsichtlich nachfolgender Elemente &ndash; wie die Elemente s4 und s7 demonstrieren &ndash; erhalten.</p>

<p>Mit <code>absolute</code> oder <code>fixed</code> positionierte Elemente werden aus dem normalen Elementfluss entfernt und haben damit keinen Einfluss auf nachfolgende Elemente. Im Beispiel folgt demnach s8 bei der Anzeige direkt auf s7, ohne sich an den im Quelltext dazwischen liegenden Elementen a1 bis a7 und f1 zu orientieren.</p>

<p>Die Angabe <code>position:</code> allein legt noch nicht fest, wo genau ein Element beginnen soll. Es bleibt standardmig erst einmal dort, wo es ohne Positionierung auch angezeigt wrde. Die gewnschte abweichende Position mssen Sie zustzlich angeben. Dies knnen Sie beispielsweise mit Angaben fr <img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#postop">top</a>, <img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#left">left</a>, <img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#posbottom">bottom</a> oder <img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#right">right</a> tun.</p>

<p>Wenn Sie also beispielsweise <code>position:absolute; top:30px</code> angeben, dann legen Sie fr das betreffende Element fest, dass es 30 Pixel unterhalb des Randes seines nchsten von <code>static</code> abweichend positionierten  Vorfahrenelements beginnt.<br>
Wenn Sie <code>position:relative; top:5px</code> notieren, dann legen Sie fr das Element fest, dass sein oberer Rand 5 Pixel tiefer liegt, als es normalerweise der Fall wre.</p>

<h3 class="inf">Beachten Sie:</h3>

<p>Die Angabe <code>fixed</code> wird vom Internet Explorer fr Windows bis Version 6 gar nicht und von Version 7 nur im <img src="../../src/dok.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="../formate/box_modell.htm#standardkonform">standardkonformen Modus</a> untersttzt, Netscape untersttzt sie seit Version 6.1.<br>
Der Internet Explorer 6 bercksichtigt ferner nur <em>einen</em> Eckpunkt, sodass es diesem Browser nicht mglich ist, einem Element bei Angabe mehrerer Eckpunkte unter Verzicht auf <code>width/height</code> eine zu berechnende Breite und/oder Hhe zuzuweisen, wie dies im Beispiel auf das Element a7 zutrifft. Der Internet Explorer 7 berechnet bei Angaben zu <code>top</code> und <code>bottom</code> die Hhe nicht.</p>



<p class="doc"><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></p>



<h2><img src="../../src/css20.gif" width="30" height="30" alt="CSS 2.0" title="CSS 2.0"><img src="../../src/netsc4.gif" width="30" height="30" alt="Netscape 4.0" title="Netscape 4.0"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0">&nbsp;<a class="an" name="postop">top (Startposition von oben)</a></h2>

<p>Diese Angabe ist sinnvoll in Verbindung mit einer vom Wert <code>static</code> abweichenden Angabe zu <img src="../../src/up.gif" width="14" height="10" alt="nach oben">&nbsp;<a href="#position">position</a>. Sie knnen bestimmen, wo ein absolut oder relativ positioniertes Element von oben beginnt.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/top.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;html&gt;&lt;head&gt;&lt;title&gt;top&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;

&lt;div style="position:absolute; top:180px"&gt;
&lt;img src="hund.gif" width="208" height="181" alt="Hund"&gt;
&lt;/div&gt;

&lt;div style="position:absolute; top:136px; width:208px; background-color:#FFFFE0;
border:1px solid #804000; padding:10px"&gt;Dies ist ein absolut positionierter Text
&amp;uuml;ber einer absolut positionierten Grafik.&lt;/div&gt;

&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Mit <code>top:</code> knnen Sie die Startposition von oben bestimmen. Erlaubt sind <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="../formate/wertzuweisung.htm#numerische">numerische Angaben</a> und der Wert <code>auto</code> fr eine automatische Positionierung.</p>



<p class="doc"><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></p>



<h2><img src="../../src/css20.gif" width="30" height="30" alt="CSS 2.0" title="CSS 2.0"><img src="../../src/netsc4.gif" width="30" height="30" alt="Netscape 4.0" title="Netscape 4.0"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0">&nbsp;<a class="an" name="left">left (Startposition von links)</a></h2>

<p>Diese Angabe ist sinnvoll in Verbindung mit einer vom Wert <code>static</code> abweichenden Angabe zu <img src="../../src/up.gif" width="14" height="10" alt="nach oben">&nbsp;<a href="#position">position</a>. Sie knnen bestimmen, wo ein absolut oder relativ positioniertes Element von links beginnt.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/left.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;html&gt;&lt;head&gt;&lt;title&gt;left&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;

&lt;div style="position:absolute; top:100px; left:100px;"&gt;
&lt;img src="hund.gif" width="208" height="181" alt="Hund"&gt;&lt;/div&gt;

&lt;div style="position:absolute; top:140px; left:350px; width:200px;
background-color:#FFFFE0; border:1px solid #804000; padding:10px"&gt;
Dies ist ein absolut positionierter Text neben einer absolut positionierten Grafik.&lt;/div&gt;

&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Mit <code>left:</code> knnen Sie die Startposition von links bestimmen. Erlaubt ist eine <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="../formate/wertzuweisung.htm#numerische">numerische Angabe</a> oder der Wert <code>auto</code> fr eine automatische Positionierung.</p>



<p class="doc"><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></p>



<h2><img src="../../src/css20.gif" width="30" height="30" alt="CSS 2.0" title="CSS 2.0"><img src="../../src/netsc6.gif" width="30" height="30" alt="Netscape 6.0" title="Netscape 6.0"><img src="../../src/msie5.gif" width="30" height="30" alt="MS IE 5.0" title="MS IE 5.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0">&nbsp;<a class="an" name="posbottom">bottom (Startposition von unten)</a></h2>

<p>Diese Angabe ist sinnvoll in Verbindung mit einer vom Wert <code>static</code> abweichenden Angabe zu <img src="../../src/up.gif" width="14" height="10" alt="nach oben">&nbsp;<a href="#position">position</a>. Sie knnen bestimmen, wo ein absolut oder relativ positioniertes Element von unten beginnt.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/bottom.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;html&gt;&lt;head&gt;&lt;title&gt;bottom&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;

&lt;div style="position:absolute; bottom:0px; left:100px;"&gt;Dies ist ein untenbndiger Hund:&lt;br&gt;
&lt;img src="hund.gif" width="208" height="181" alt="Hund"&gt;&lt;/div&gt;

&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Mit <code>bottom:</code> knnen Sie die Startposition von unten bestimmen. Erlaubt ist eine <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="../formate/wertzuweisung.htm#numerische">numerische Angabe</a> oder der Wert <code>auto</code> fr eine automatische Positionierung.</p>

<h3 class="inf">Beachten Sie:</h3>

<p>Die Browser der 4er-Generation interpretieren diese Eigenschaft noch nicht, Opera bis Version 6 bentigt zustzlich die Angabe von <img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#height">height</a>.</p>



<p class="doc"><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></p>



<h2><img src="../../src/css20.gif" width="30" height="30" alt="CSS 2.0" title="CSS 2.0"><img src="../../src/netsc6.gif" width="30" height="30" alt="Netscape 6.0" title="Netscape 6.0"><img src="../../src/msie5.gif" width="30" height="30" alt="MS IE 5.0" title="MS IE 5.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0">&nbsp;<a class="an" name="right">right (Startposition von rechts)</a></h2>

<p>Diese Angabe ist sinnvoll in Verbindung mit einer vom Wert <code>static</code> abweichenden Angabe zu <img src="../../src/up.gif" width="14" height="10" alt="nach oben">&nbsp;<a href="#position">position</a>. Sie knnen bestimmen, wo ein absolut oder relativ positioniertes Element von rechts beginnt.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/right.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;html&gt;&lt;head&gt;&lt;title&gt;right&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;

&lt;div style="position:absolute; top:100px; right:0px;"&gt;Rechtsb&amp;uuml;ndiger Hund:&lt;br&gt;
&lt;img src="hund.gif" width="208" height="181" alt="Hund"&gt;&lt;/div&gt;

&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Mit <code>right:</code> knnen Sie die Startposition von rechts bestimmen. Erlaubt ist eine <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="../formate/wertzuweisung.htm#numerische">numerische Angabe</a> oder der Wert <code>auto</code> fr eine automatische Positionierung.</p>

<h3 class="inf">Beachten Sie:</h3>

<p>Die Browser der 4er-Generation interpretieren diese Eigenschaft noch nicht, Opera bis Version 6 bentigt zustzlich die Angabe von <img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#width">width</a>.</p>



<p class="doc"><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></p>



<h2><img src="../../src/css10.gif" width="30" height="30" alt="CSS 2.0" title="CSS 2.0"><img src="../../src/netsc4.gif" width="30" height="30" alt="Netscape 4.0" title="Netscape 4.0"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0">&nbsp;<a class="an" name="width">width (Breite)</a></h2>

<p>Sie knnen bestimmen, wie breit ein Element oder Bereich sein soll. Um zu bestimmen, was mit dem Inhalt passieren soll, wenn er mehr Breite einnimmt als die hier angegebene Breite, knnen Sie zustzlich die Eigenschaft <img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#overflow">overflow</a> verwenden.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/width.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;html&gt;&lt;head&gt;&lt;title&gt;width&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;

&lt;p&gt;&lt;code&gt;width&lt;/code&gt; mit &lt;code&gt;overflow:hidden&lt;/code&gt;&lt;/p&gt;

&lt;h1 style="width:200px; border:10px solid red; padding:10px; font-size:3em; overflow:hidden;"&gt;
Eine &Uuml;berschrift, die m&ouml;glicherweise breiter ist als erlaubt&lt;/h1&gt;

&lt;p&gt;&lt;code&gt;width&lt;/code&gt; ohne &lt;code&gt;overflow&lt;/code&gt;&lt;/p&gt;

&lt;h1 style="width:200px; border:10px solid red; padding:10px; font-size:3em;"&gt;
Eine &Uuml;berschrift, die m&ouml;glicherweise breiter ist als erlaubt&lt;/h1&gt;

&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Mit <code>width:</code> knnen Sie die Breite bestimmen. Erlaubt ist eine <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="../formate/wertzuweisung.htm#numerische">numerische Angabe</a> oder der Wert <code>auto</code> fr automatische Breite.</p>

<h3 class="xpl">Beachten Sie:</h3>

<p>Dass im obigen Beispiel wo ntig in der Breite Text abgeschnitten wird, liegt nicht an der Eigenschaft <code>width</code>, sondern an der Angabe <code>overflow:hidden</code>. Die Browser der 4er-Generation interpretieren diese Angabe jedoch noch nicht. Wird fr <code>overflow</code> kein von <code>visible</code> abweichender Wert notiert, vergrert der Internet Explorer bis zur Version 6 das Element so weit, bis der Inhalt vollstndig sichtbar ist.</p>



<p class="doc"><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></p>



<h2><img src="../../src/css20.gif" width="30" height="30" alt="CSS 2.0" title="CSS 2.0"><img src="../../src/netsc6.gif" width="30" height="30" alt="Netscape 6.0" title="Netscape 6.0"><img src="../../src/msie7.gif" width="30" height="30" alt="MS IE 7.0" title="MS IE 7.0"><img src="../../src/op7.gif" width="30" height="30" alt="Opera 7" title="Opera 7"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0">&nbsp;<a class="an" name="min_width">min-width (Mindestbreite)</a></h2>

<p>Sie knnen bestimmen, wie breit ein Element oder Bereich mindestens sein soll, auch wenn der Inhalt weniger Breite in Anspruch nimmt.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/min_width.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;html&gt;&lt;head&gt;&lt;title&gt;min-width&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;

&lt;div style="position:absolute; top:100px; left:100px; min-width:400px; border:solid 1px blue;
padding:10px"&gt;Fasse dich kurz!&lt;/div&gt;

&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Mit <code>min-width:</code> knnen Sie die Mindestbreite bestimmen. Erlaubt ist eine <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="../formate/wertzuweisung.htm#numerische">numerische Angabe</a>.</p>

<h3 class="xpl">Beachten Sie:</h3>

<p>Der Internet Explorer 6 interpretiert diese Angabe noch nicht. Safari interpretiert sie bei <img src="../../src/up.gif" width="14" height="10" alt="nach oben">&nbsp;<a href="#position">positionierten</a> Elementen ab Version 2.0.2.</p>



<p class="doc"><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></p>



<h2><img src="../../src/css20.gif" width="30" height="30" alt="CSS 2.0" title="CSS 2.0"><img src="../../src/netsc6.gif" width="30" height="30" alt="Netscape 6.0" title="Netscape 6.0"><img src="../../src/msie7.gif" width="30" height="30" alt="MS IE 7.0" title="MS IE 7.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0">&nbsp;<a class="an" name="max_width">max-width (Maximalbreite)</a></h2>

<p>Sie knnen bestimmen, wie breit ein Element oder Bereich maximal sein soll. Um zu bestimmen, was mit dem Inhalt passieren soll, wenn er mehr horizontalen Raum einnimmt als die hier angegebene Breite, knnen Sie zustzlich die Eigenschaft <img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#overflow">overflow</a> verwenden.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/max_width.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;html&gt;&lt;head&gt;&lt;title&gt;max-width&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;

&lt;h1 style="max-width:250px; overflow:hidden; border:solid 1px green; font-size:48px; padding:10px"&gt;
Eine &amp;Uuml;berschrift, bei der das Wort 'm&amp;ouml;glicherweise' m&amp;ouml;glicherweise zu breit
f&amp;uuml;r 250px ist&lt;/h1&gt;

&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Mit <code>max-width:</code> knnen Sie die Maximalbreite bestimmen. Erlaubt ist eine <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="../formate/wertzuweisung.htm#numerische">numerische Angabe</a>.</p>

<h3 class="xpl">Beachten Sie:</h3>

<p>Der Internet Explorer 6 interpretiert diese Angabe noch nicht. Safari interpretiert sie bei <img src="../../src/up.gif" width="14" height="10" alt="nach oben">&nbsp;<a href="#position">positionierten</a> Elementen ab Version 2.0.2.</p>



<p class="doc"><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></p>



<h2><img src="../../src/css10.gif" width="30" height="30" alt="CSS 2.0" title="CSS 2.0"><img src="../../src/netsc4.gif" width="30" height="30" alt="Netscape 4.0" title="Netscape 4.0"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0">&nbsp;<a class="an" name="height">height (Hhe)</a></h2>

<p>Sie knnen bestimmen, wie hoch ein Element oder Bereich sein soll. Um zu bestimmen, was mit dem Inhalt passieren soll, wenn er mehr vertikalen Raum einnimmt als die hier angegebene Hhe, knnen Sie zustzlich die Eigenschaft <img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#overflow">overflow</a> verwenden.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/height.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;html&gt;&lt;head&gt;&lt;title&gt;height&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;

&lt;p&gt;&lt;code&gt;height&lt;/code&gt; mit &lt;code&gt;overflow:hidden&lt;/code&gt;&lt;/p&gt;

&lt;h1 style="height:240px; width:300px; border:10px solid red; padding:10px; font-size:3em; overflow:hidden;"&gt;
Eine &Uuml;berschrift, die m&ouml;glicherweise h&ouml;her ist als erlaubt&lt;/h1&gt;

&lt;p&gt;&lt;code&gt;height&lt;/code&gt; ohne &lt;code&gt;overflow&lt;/code&gt;&lt;/p&gt;

&lt;h1 style="height:240px; width:300px; border:10px solid red; padding:10px; font-size:3em;"&gt;
Eine &Uuml;berschrift, die m&ouml;glicherweise h&ouml;her ist als erlaubt&lt;/h1&gt;

&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Mit <code>height:</code> knnen Sie die Hhe bestimmen. Erlaubt ist eine <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="../formate/wertzuweisung.htm#numerische">numerische Angabe</a> oder der Wert <code>auto</code> fr automatische Hhe.</p>

<h3 class="xpl">Beachten Sie:</h3>

<p>Dass im obigen Beispiel wo ntig in der Hhe Text abgeschnitten wird, liegt nicht an der Eigenschaft <code>height</code>, sondern an der Angabe <code>overflow:hidden</code>. Die Browser der 4er-Generation interpretieren diese Angabe jedoch noch nicht. Wird fr <code>overflow</code> kein von <code>visible</code> abweichender Wert notiert, vergrert der Internet Explorer bis Version 6 das Element so weit, bis der Inhalt vollstndig sichtbar ist.</p>



<p class="doc"><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></p>



<h2><img src="../../src/css20.gif" width="30" height="30" alt="CSS 2.0" title="CSS 2.0"><img src="../../src/netsc6.gif" width="30" height="30" alt="Netscape 6.0" title="Netscape 6.0"><img src="../../src/msie7.gif" width="30" height="30" alt="MS IE 7.0" title="MS IE 7.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf13.gif" width="30" height="30" alt="Safari 1.3" title="Safari 1.3">&nbsp;<a class="an" name="min_height">min-height (Mindesthhe)</a></h2>

<p>Sie knnen bestimmen, wie hoch ein Element oder Bereich mindestens sein soll.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/min_height.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;html&gt;&lt;head&gt;&lt;title&gt;min-height&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;

&lt;div style="position:absolute; top:100px; left:100px; min-height:200px; border:solid 1px blue;
padding:10px"&gt; Fasse dich kurz!&lt;/div&gt;

&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Mit <code>min-height:</code> knnen Sie die Mindesthhe bestimmen. Erlaubt ist eine <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="../formate/wertzuweisung.htm#numerische">numerische Angabe</a>.</p>

<h3 class="xpl">Beachten Sie:</h3>

<p>Der Internet Explorer 6 interpretiert diese Angabe noch nicht. Konqueror 3.1 interpretiert diese Angabe noch nicht bei absolut positionierten Elementen, ab Konqueror 3.3 stellt er auch solche absolut positionierte Elemente korrekt dar. Safari interpretiert <code>min-height</code> bei <img src="../../src/up.gif" width="14" height="10" alt="nach oben">&nbsp;<a href="#position">positionierten</a> Elementen ab Version 2.0.2.</p>



<p class="doc"><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></p>



<h2><img src="../../src/css20.gif" width="30" height="30" alt="CSS 2.0" title="CSS 2.0"><img src="../../src/netsc6.gif" width="30" height="30" alt="Netscape 6.0" title="Netscape 6.0"><img src="../../src/msie7.gif" width="30" height="30" alt="MS IE 7.0" title="MS IE 7.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf13.gif" width="30" height="30" alt="Safari 1.3" title="Safari 1.3">&nbsp;<a class="an" name="max_height">max-height (Maximalhhe)</a></h2>

<p>Sie knnen bestimmen, wie hoch ein Element oder Bereich maximal sein soll. Um zu bestimmen, was mit dem Inhalt passieren soll, wenn er mehr vertikalen Raum einnimmt als die hier angegebene Hhe, knnen Sie zustzlich die Eigenschaft <img src="../../src/down.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#overflow">overflow</a> verwenden.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/max_height.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;html&gt;&lt;head&gt;&lt;title&gt;max-height&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;

&lt;h1 style="max-width:300px; max-height:300px; overflow:hidden; border:solid 1px green;
font-size:48px; padding:10px"&gt;Eine &amp;Uuml;berschrift, die m&amp;ouml;glicherweise zu hoch
ist f&amp;uuml;r eine Box von 300 mal 300 Pixel&lt;/h1&gt;

&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Mit <code>max-height:</code> knnen Sie die Maximalhhe bestimmen. Erlaubt ist eine <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="../formate/wertzuweisung.htm#numerische">numerische Angabe</a>.</p>

<h3 class="xpl">Beachten Sie:</h3>

<p>Der Internet Explorer 6 interpretiert diese Angabe noch nicht. Safari interpretiert sie bei <img src="../../src/up.gif" width="14" height="10" alt="nach oben">&nbsp;<a href="#position">positionierten</a> Elementen ab Version 2.0.2.</p>



<p class="doc"><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></p>



<h2><img src="../../src/css20.gif" width="30" height="30" alt="CSS 2.0" title="CSS 2.0"><img src="../../src/netsc6.gif" width="30" height="30" alt="Netscape 6.0" title="Netscape 6.0"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op7.gif" width="30" height="30" alt="Opera 7" title="Opera 7"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq34.gif" width="30" height="30" alt="Konqueror 3.4" title="Konqueror 3.4"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0">&nbsp;<a class="an" name="overflow">overflow (Elementbereich mit bergroem Inhalt)</a></h2>

<p>Diese Angabe kann von Bedeutung sein, wenn Sie fr ein Element oder einen Bereich eine feste oder maximale gewnschte Breite oder Hhe definieren. Angenommen, Sie definieren einen Bereich mit <code>&lt;div&gt;</code>...<code>&lt;/div&gt;</code>, fr den Sie mit Hilfe der Eigenschaft <code>width</code> eine Breite von effektiv 202 Pixel (da der Rahmen addiert wird) erzwingen. Wenn Sie innerhalb dieses Bereichs eine Grafikreferenz (<code>&lt;img&gt;</code>) notieren, bei der das Bild eine Breite von mehr als 200 Pixel aufweist, knnen Sie mit der hier beschriebenen Angabe regulieren, wie der Browser diesen Konflikt lsen soll.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/overflow.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;html&gt;&lt;head&gt;&lt;title&gt;overflow&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;

&lt;div style="width:200px; height:150px; overflow:auto; border:1px solid #840; margin:1em;"&gt;
  beliebiger Hund: &lt;code&gt;auto&lt;/code&gt;&lt;br&gt;
  &lt;img src="hund.gif" width="208" height="181" alt="Hund"&gt;
&lt;/div&gt;

&lt;div style="width:200px; height:150px; overflow:hidden; border:1px solid #840; margin:1em;"&gt;
  abgeschnittener Hund: &lt;code&gt;hidden&lt;/code&gt;&lt;br&gt;
  &lt;img src="hund.gif" width="208" height="181" alt="Hund"&gt;
&lt;/div&gt;

&lt;div style="width:200px; height:150px; overflow:scroll; border:1px solid #840; margin:1em;"&gt;
  scrollender Hund: &lt;code&gt;scroll&lt;/code&gt;&lt;br&gt;
  &lt;img src="hund.gif" width="208" height="181" alt="Hund"&gt;
&lt;/div&gt;

&lt;div style="width:200px; height:150px; overflow:visible; border:1px solid #840; margin:1em;"&gt;
  sichtbarer Hund: &lt;code&gt;visible&lt;/code&gt;&lt;br&gt;
  &lt;img src="hund.gif" width="208" height="181" alt="Hund"&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Mit <code>overflow:</code> knnen Sie bestimmen, wie bergroe innere Elemente behandelt werden. Folgende Angaben sind mglich:</p>

<p>
<code>visible</code> = Inhalt ragt aus dem Element so weit heraus, dass sein Inhalt auf jeden Fall komplett sichtbar ist.<br>
<code>hidden</code> = Inhalt wird abgeschnitten, wenn er die Grenzen des Elements berschreitet.<br>
<code>scroll</code> = Inhalt wird abgeschnitten, wenn er die Grenzen des Elements berschreitet. Der WWW-Browser sollte jedoch Scroll-Leisten anbieten, hnlich wie bei einem eingebetteten Frame-Fenster.<br>
<code>auto</code> = Der Web-Browser soll entscheiden, wie das Element im Konfliktfall angezeigt wird. Auch das Anbieten von Scroll-Leisten soll dabei erlaubt sein.<br>
</p>

<h3 class="inf">Beachten Sie:</h3>

<p>Netscape 4.x beherrscht nur <code>overflow:hidden</code> korrekt. Der Internet Explorer bis Version 6 vergrert bei <code>visible</code> das Element so weit, bis der Inhalt vollstndig sichtbar ist. Opera bis Version 6 stellt <code>auto</code> wie <code>visible</code> und <code>scroll</code> wie <code>hidden</code> dar. Konqueror beherrscht die verschiedenen Angaben erst ab Version 3.4 korrekt.</p>



<p class="doc"><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></p>



<h2><img src="../../src/css20.gif" width="30" height="30" alt="CSS 2.0" title="CSS 2.0"><img src="../../src/netsc6.gif" width="30" height="30" alt="Netscape 6.0" title="Netscape 6.0"><img src="../../src/msie5.gif" width="30" height="30" alt="MS IE 5.0" title="MS IE 5.0"><img src="../../src/op72.gif" width="30" height="30" alt="Opera 7.20" title="Opera 7.20"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0">&nbsp;<a class="an" name="direction">direction (Richtung)</a></h2>

<p>Mit dieser Angabe knnen Sie die Schreibrichtung bei Elementen erzwingen, und abhngig davon auch, in welche Richtung beispielsweise Breitenangaben berechnet werden, oder an welcher Seite berbreite Inhalte mit <img src="../../src/up.gif" width="14" height="10" alt="nach oben">&nbsp;<a href="#overflow">overflow</a> abgeschnitten werden. Die Schreibrichtung ist vor allem fr die Darstellung von Schriftkulturen wie der arabischen gedacht, wo von rechts nach links geschrieben wird.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/direction.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;html&gt;&lt;head&gt;&lt;title&gt;direction&lt;/title&gt;
&lt;/head&gt;&lt;body style="direction:rtl"&gt;

&lt;h1&gt;Hi Junkie!&lt;/h1&gt;
&lt;p&gt;Hier k&amp;ouml;nnte m&amp;ouml;glicherweise alles anders aussehen als normal ...&lt;/p&gt;

&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Mit <code>direction:</code> knnen Sie die Schreibrichtung bestimmen. Folgende Angaben sind mglich:</p>

<p>
<code>ltr</code> = von links nach rechts.<br>
<code>rtl</code> = von rechts nach links.<br>
</p>

<h3 class="inf">Beachten Sie:</h3>

<p>Die Browser der 4er-Generation interpretieren diese Angabe noch nicht.</p>



<p class="doc"><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></p>



<h2><img src="../../src/css10.gif" width="30" height="30" alt="CSS 2.0" title="CSS 2.0"><img src="../../src/netsc4.gif" width="30" height="30" alt="Netscape 4.0" title="Netscape 4.0"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0">&nbsp;<a class="an" name="float">float (Textumfluss)</a></h2>

<p>Sie knnen fr einen Bereich oder ein Element bestimmen, dass nachfolgende Elemente diesen Bereich bzw. dieses Element umflieen.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/float.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;html&gt;&lt;head&gt;&lt;title&gt;float&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;

&lt;h1 style="width:400px; float:left; color:red"&gt;&amp;Uuml;berschrift mal anders&lt;/h1&gt;
&lt;p style="font-size:120%"&gt;Eine &amp;Uuml;berschrift
muss nicht immer einen langweiligen, &amp;uuml;ber die ganze
Breite des Anzeigefensters gehenden Block erzeugen. Sie kann auch mal
seitlich vom Text stehen, und der Text flie&amp;szlig;t um die
&amp;Uuml;berschrift. Auch so kann man lange Texte mal anders gestalten als
sonst &amp;uuml;blich.&lt;/p&gt;

&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Mit <code>float:</code> knnen Sie bestimmen, dass nachfolgende Elemente das aktuelle Element bzw. den aktuellen Bereich umflieen. Folgende Angaben sind mglich:</p>

<p>
<code>left</code> = Element steht links und wird rechts davon von nachfolgenden Elementen umflossen.<br>
<code>right</code> = Element steht rechts und wird links davon von nachfolgenden Elementen umflossen.<br>
<code>none</code> = Kein Umfluss (Normaleinstellung).
</p>

<h3 class="inf">Beachten Sie:</h3>

<p>Wenn Sie fr ein Element eine Angabe zu <code>float</code> notieren, mussten Sie gem CSS2 auch eine Angabe zu <img src="../../src/up.gif" width="14" height="10" alt="nach oben">&nbsp;<a href="#width">width</a> definieren. Gem CSS 2.1 (und der tatschlichen Umsetzung durch die Browser) ist dies nicht mehr erforderlich; die Breite richtet sich in diesem Fall nach dem Inhalt.</p>



<p class="doc"><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></p>



<h2><img src="../../src/css10.gif" width="30" height="30" alt="CSS 2.0" title="CSS 2.0"><img src="../../src/netsc4.gif" width="30" height="30" alt="Netscape 4.0" title="Netscape 4.0"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0">&nbsp;<a class="an" name="clear">clear (Fortsetzung bei Textumfluss)</a></h2>

<p>Wenn Sie mit <img src="../../src/up.gif" width="14" height="10" alt="nach oben">&nbsp;<a href="#float">float</a> einen Textumfluss definieren, mchten Sie vielleicht nur zwei oder drei Zeilen kommentierenden Text neben einem umflossenen Element haben und den folgenden Text dann unterhalb des umflossenen Elements fortsetzen. Dazu dient die hier beschriebene Angabe.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/clear.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;html&gt;&lt;head&gt;&lt;title&gt;clear&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;

&lt;div style="float:left; margin-right:20px; margin-bottom:20px;
border:solid 1px red; text-align:center"&gt;
Kapitel&lt;br&gt;
&lt;span style="font-family:Algerian,serif; font-size:96px; color:red"&gt;
&amp;nbsp;1&amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;p style="font-size:120%"&gt;In diesem Kapitel geht es um Einf&amp;uuml;hrendes.&lt;/p&gt;
&lt;p style="clear:left"&gt;Dann kommen wir mal zur Sache: ...&lt;/p&gt;

&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Mit <code>clear:</code> knnen Sie einen Umfluss abbrechen und die Fortsetzung unterhalb des umflossenen Elements oder Bereichs erzwingen. Folgende Angaben sind mglich:</p>

<p>
<code>left</code> = Erzwingt bei <code>float:left</code> die Fortsetzung unterhalb.<br>
<code>right</code> = Erzwingt bei <code>float:right</code> die Fortsetzung unterhalb.<br>
<code>both</code> = Erzwingt in jedem Fall die Fortsetzung unterhalb.<br>
<code>none</code> = Erzwingt keine Fortsetzung unterhalb. (Normaleinstellung).
</p>

<p>Im obigen Beispiel werden die Eigenschaften <code>float</code> und <code>clear</code> dazu genutzt, eine seitliche, groe Kapitelnummer zu notieren, neben der Kapitelnummer einen kleinen Text, worum es in dem Kapitel geht, und unterhalb dieser beiden Elemente dann den normalen Text des Kapitels.</p>



<p class="doc"><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></p>



<h2><img src="../../src/css20.gif" width="30" height="30" alt="CSS 2.0" title="CSS 2.0"><img src="../../src/netsc4.gif" width="30" height="30" alt="Netscape 4.0" title="Netscape 4.0"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0">&nbsp;<a class="an" name="z_index">z-index (Schichtposition bei berlappung)</a></h2>

<p>Diese Eigenschaft wirkt nur in Verbindung mit einer Angabe zu <img src="../../src/up.gif" width="14" height="10" alt="nach oben">&nbsp;<a href="#position">position</a>. Wenn Sie mehrere Elemente positionieren, deren Anzeigebereiche sich berlappen, werden die Elemente normalerweise in der Reihenfolge bereinander angezeigt, in der sie definiert werden. Im Quelltext spter notierte Elemente berdecken vorhergehende. Sie knnen die Reihenfolge ndern, indem Sie fr die einzelnen Elemente Werte vergeben. Elemente mit hherem Wert berdecken Elemente mit niedrigerem.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/z_index.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;html&gt;&lt;head&gt;&lt;title&gt;z-index&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;

&lt;div style="position:absolute; top:100px; left:100px; z-index:2; border:1px solid #888; background:#f88;"&gt;
  &lt;b&gt;A:2&lt;/b&gt;&lt;img src="hund.gif" width="208" height="181" alt="Hund"&gt;
&lt;/div&gt;

&lt;div style="position:absolute; top:130px; left:130px; z-index:1; border:1px solid #888; background:#88f;"&gt;
  &lt;b&gt;B:1&lt;/b&gt;&lt;img src="hund.gif" width="208" height="181" alt="Hund"&gt;
&lt;/div&gt;

&lt;div style="position:absolute; top:190px; left:270px; width:280px; height:280px; z-index:3;
            border:1px solid #888; background:#eee;"&gt;
  &lt;b&gt;C:3&lt;/b&gt;

  &lt;div style="position:absolute; top:30px; left:-30px; z-index:2; border:1px solid #888; background:#8f8;"&gt;
    &lt;b&gt;D:2&lt;/b&gt;&lt;img src="hund.gif" width="208" height="181" alt="Hund"&gt;
  &lt;/div&gt;

  &lt;div style="position:absolute; top:-30px; left:40px; z-index:3; border:1px solid #888; background:#ff8;"&gt;
    &lt;b&gt;E:3&lt;/b&gt;&lt;img src="hund.gif" width="208" height="181" alt="Hund"&gt;
  &lt;/div&gt;

  &lt;div style="position:absolute; top:60px; left:-60px; z-index:-1; border:1px solid #888; background:#8ff;"&gt;
    &lt;b&gt;F:-1&lt;/b&gt;&lt;img src="hund.gif" width="208" height="181" alt="Hund"&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Mit <code>z-index:</code> knnen Sie die Reihenfolge von berlappenden Elementen bestimmen. Notieren Sie fr jedes Element, fr das Sie eine eindeutige Schichtposition festlegen wollen, eine Zahl. Je hher die Zahl, desto weiter vorne liegt das Element, je niedriger, desto weiter hinten liegt das Element vom Betrachter aus gesehen. Die Schichtposition orientiert sich darber hinaus an der des Elternelements. Per <code>z-index</code> positionierte Elemente erzeugen fr sich und ihre Nachfahren einen <strong>eigenen Stapel-Kontext</strong>. So werden im Beispiel die Boxen D, E und F als Nachfahren der Box C gesondert sortiert: Box F (<code>z-index:-1</code>) berdeckt trotz niedrigerem Wert Box B (<code>z-index:1</code>), da sie als Nachfahre von Box C (diese liegt mit <code>z-index:3</code> ber Box B) lediglich innerhalb dieser sortiert wird. Auerhalb des neuen Kontexts liegende Elemente (A und B) knnen nicht zwischen diesen gestapelt werden.</p>

<h3 class="inf">Beachten Sie:</h3>

<p>Mozilla Firefox sortiert aufgrund des negativen Wertes Box F (<code>z-index:-1</code>) hinter deren Elternelement (Box C, deren Stapelposition <strong>innerhalb</strong> des neu erzeugten Kontexts mit 0 angenommen wird) und weicht damit von Opera und Internet Explorer ab, die Nachfahren nicht hinter dem kontexterzeugenden Element selbst darstellen. Diese Vorgangsweise entspricht CSS2, whrend die beiden letztgenannten Browser in diesem Zusammenhang bereits die Spezifikation gem CSS 2.1 umsetzen.</p>



<p class="doc"><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></p>



<h2><img src="../../src/css10.gif" width="30" height="30" alt="CSS 2.0" title="CSS 2.0"><img src="../../src/netsc4.gif" width="30" height="30" alt="Netscape 4.0" title="Netscape 4.0"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0">&nbsp;<a class="an" name="display">display (Anzeigeart bzw. Nichtanzeige ohne Platzhalter)</a></h2>

<p>Sie knnen bestimmen, ob ein Element zunchst angezeigt werden soll oder nicht. "Ohne Platzhalter" bedeutet, dass bei Nichtanzeige des Elements auch kein Raum fr das Element reserviert wird. In diesem Fall deutet bei der Anzeige also zunchst nichts darauf hin, dass das Element berhaupt existiert. Mit Hilfe von <img src="../../src/kap.gif" width="15" height="13" alt="Kapitel">&nbsp;<a href="../../dhtml/index.htm">Dynamischem HTML</a> knnen Sie so ein Element nachtrglich anzeigen oder wieder verstecken.</p>

<p>Ferner knnen Sie mit der hier beschriebenen Angabe bestimmen, wie ein Element angezeigt werden soll. Sie knnen bestimmen, dass es einen eigenen (absatzerzeugenden) Block bilden soll, oder dass es mitten im Text (inline) angezeigt werden soll. So knnen Sie beispielsweise absatzerzeugende Elemente wie berschriften in Elemente umdefinieren, die keinen eigenen Absatz erzeugen.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/display.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;html&gt;&lt;head&gt;&lt;title&gt;display&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;

&lt;h1 style="display:inline"&gt;Ich bin ein inline-Element&lt;/h1&gt;
&lt;p style="display:inline"&gt;&amp;nbsp;Dieser Text beweist es!&lt;/p&gt;
&lt;h1 id="versteckt" style="display:none"&gt;
Ich bin ein Block-Element, werde aber nicht angezeigt&lt;/h1&gt;
&lt;p&gt;Und dieser Text tut so, als ob sonst nichts w&amp;auml;re!&lt;/p&gt;

&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Mit <code>display:</code> knnen Sie die Anzeige von Elementen unterdrcken oder die Art der Anzeige festlegen. Folgende Angaben sind mglich:</p>

<p>
<code>block</code> = Erzwingt einen Block - das Element erzeugt eine neue Zeile.<br>
<code>inline</code> = Erzwingt die Anzeige im Text  - das Element wird im laufenden Textfluss angezeigt.<br>
<code>inline-block</code> = Erzeugt uerlich einen Block, fr den Breite, Hhe und Auenabstand angegeben werden kann, belsst das Element jedoch im laufenden Textfluss - hnlich einem "inline replaced element" wie <code>img</code>. Dieser Wert wird erst mit CSS 2.1 eingefhrt.<br>
<code>list-item</code> = wie <code>block</code>, jedoch mit einem Aufzhlungszeichen (Bullet) davor.<br>
<code>run-in</code> = bewirkt, dass das Element kontext-abhngig als Block-Element oder als Inline-Element dargestellt wird.<br>
<code>none</code> = Element wird nicht angezeigt und es wird auch kein Platzhalter freigelassen.<br>
</p>

<p>
In CSS2 waren noch die folgenden Werte vorgesehen, die jedoch wegen mangelnder Browseruntersttzung in CSS 2.1 nicht bernommen werden:<br>
<code>marker</code> = sollte <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="pseudoformate.htm#before_after">automatisch generierten Inhalt</a> fr das Element deklarieren.<br>
<code>compact</code> = sollte wie <code>run-in</code> bewirken, dass ein Element kontext-abhngig als Block-Element oder als Inline-Element dargestellt wird.<br>
</p>

<p>Speziell fr die Erzeugung von Tabellen mit Nicht-Tabellen-Elementen stehen weitere Angaben zu <code>display</code> zur Verfgung. Die entsprechenden Angaben lassen sich allerdings auch auf entsprechende HTML-Tabellenelemente anwenden. Gedacht sind sie aber eher fr die tabellarische Darstellung von XML-Daten. Denn XML kennt kein Handling, um Daten als tabellarisch auszuzeichnen. Das muss die Style-Sprache bernehmen, mit deren Hilfe die XML-Daten angezeigt werden. In CSS hat man die <code>display</code>-Eigenschaft zu diesem Zweck auserkoren. Folgende Angaben sind in diesem Zusammenhang mglich:</p>

<p>
<code>table</code> = Das Element enthlt tabellarisch angeordnete Kindelemente und erzeugt eine neue Zeile. Wirkt wie das <code>table</code>-Element in HTML.<br>
<code>inline-table</code> = Das Element enthlt tabellarisch angeordnete Kindelemente und wird im laufenden Textfluss angezeigt. Wirkt wie das <code>table</code>-Element in HTML, aber inline.<br>
<code>table-row</code> = Das Element enthlt nebeneinander angeordnete Kindelemente. Wirkt wie das <code>tr</code>-Element in HTML.<br>
<code>table-cell</code> = Das Element steht fr eine Tabellenzelle. Wirkt wie die Elemente <code>th</code> und <code>td</code> in HTML.<br>
<code>table-row-group</code> = Das Element enthlt eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Wirkt wie das <code>tbody</code>-Element in HTML.<br>
<code>table-header-group</code> = Das Element enthlt eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Gedacht fr die Kopfzeile einer Tabelle. Wirkt wie das <code>thead</code>-Element in HTML.<br>
<code>table-footer-group</code> = Das Element enthlt eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Gedacht fr die Fuzeile einer Tabelle. Wirkt wie das <code>tfoot</code>-Element in HTML.<br>
<code>table-column</code> = Das Element beschreibt die Eigenschaften der Zellen in einer Spalte. Wirkt wie das <code>col</code>-Element in HTML.<br>
<code>table-column-group</code> = Das Element enthlt eine Gruppe von Elementen, die die Eigenschaft von Zellen in einer Spalte beschreiben. Wirkt wie das <code>colgroup</code>-Element in HTML.<br>
<code>table-caption</code>. Das Element steht fr eine Tabellenberschrift. Wirkt wie das <code>caption</code>-Element in HTML (auch fr <code>th</code>-Elemente).<br>
</p>

<h3 class="xmp"><a class="an" name="display2">Beispiel:</a></h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/display2.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;html&gt;&lt;head&gt;&lt;title&gt;display&lt;/title&gt;
&lt;style type="text/css"&gt;
div.table { display:table; border-collapse:collapse; }
div.tr { display:table-row; }
div.td { display:table-cell; border:thin solid red; padding:5px; }
&lt;/style&gt;
&lt;/head&gt;&lt;body&gt;

&lt;div class="table"&gt;
 &lt;div class="tr"&gt;
  &lt;div class="td"&gt;ich&lt;/div&gt;
  &lt;div class="td"&gt;bin&lt;/div&gt;
  &lt;div class="td"&gt;eine&lt;/div&gt;
  &lt;div class="td"&gt;Tabelle&lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Das Beispiel definiert Klassen fr <code>div</code>-Elemente. Die Klassennamen heien genauso wie bekannte HTML-Tabellenelemente. Das muss nicht so sein und ist hier nur zu Demonstrationszwecken so. Die jeweiligen Klassen erhalten mit Hilfe von <code>display</code> Eigenschaften, durch die sich die Elemente, denen sie zugewiesen werden, wie die entsprechenden HTML-Elemente fr Tabellen verhalten. Innerhalb des Dateikrpers wird dann im Beispiel eine waschechte Tabelle aus <code>div</code>-Elementen mit <code>class</code>-Attributen zusammengebaut.</p>

<h3 class="inf">Beachten Sie:</h3>

<p>Netscape 4.0 und der Internet Explorer 4.0 interpretieren die Angabe <code>display:none</code> korrekt. Die brigen Angaben werden von der 4er-Versionen der beiden Browser jedoch nur unvollstndig oder noch gar nicht interpretiert. Die Angaben zu den Tabelleneigenschaften werden von Netscape 6.0 interpretiert, vom Internet Explorer jedoch auch in der Version 7 noch nicht.</p>



<p class="doc"><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></p>



<h2><img src="../../src/css20.gif" width="30" height="30" alt="CSS 2.0" title="CSS 2.0"><img src="../../src/netsc4.gif" width="30" height="30" alt="Netscape 4.0" title="Netscape 4.0"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0">&nbsp;<a class="an" name="visibility">visibility (Anzeige bzw. Nichtanzeige mit Platzhalter)</a></h2>

<p>Sie knnen bestimmen, ob ein Element zunchst angezeigt werden soll oder nicht. "Mit Platzhalter" bedeutet, dass bei Nichtanzeige des Elements trotzdem Raum fr das Element reserviert wird. Mit Hilfe von <img src="../../src/kap.gif" width="15" height="13" alt="Kapitel">&nbsp;<a href="../../dhtml/index.htm">Dynamischem HTML</a> knnen Sie so ein Element nachtrglich anzeigen oder wieder verstecken.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/visibility.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;html&gt;&lt;head&gt;&lt;title&gt;visibility&lt;/title&gt;
&lt;script type="text/javascript"&gt;
function onoff () {
  if (document.getElementById)
    document.getElementById("Ueberschrift").style.visibility = "visible";
    document.getElementById("Zeile").style.visibility = "collapse";
}
&lt;/script&gt;
&lt;/head&gt;&lt;body&gt;

&lt;h1 id="Ueberschrift" style="visibility:hidden"&gt;Die berschrift zum Text&lt;/h1&gt;
&lt;p&gt;Hier der Text. Aber fehlt da nicht was?&lt;/p&gt;

&lt;table border="1"&gt;
  &lt;tr&gt;
    &lt;td&gt;A1&lt;/td&gt;
    &lt;td&gt;A2&lt;/td&gt;
    &lt;td&gt;A3&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr id="Zeile"&gt;
    &lt;td&gt;B1&lt;/td&gt;
    &lt;td&gt;B2&lt;/td&gt;
    &lt;td&gt;B3&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;C1&lt;/td&gt;
    &lt;td&gt;C2&lt;/td&gt;
    &lt;td&gt;C3&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

&lt;p&gt;&lt;a href="javascript:onoff()"&gt;berschrift anzeigen, Zeile B verstecken!&lt;/a&gt;&lt;/p&gt;

&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Mit <code>visibility:</code> knnen Sie bestimmen, ob ein Element anfangs angezeigt wird oder nicht. Folgende Angaben sind mglich:</p>

<p>
<code>visible</code> = Der Inhalt des Element wird angezeigt (Normaleinstellung).<br>
<code>hidden</code> = Der Inhalt des Element wird versteckt (nicht angezeigt).<br>
<code>collapse</code> = Spalten oder Reihen einer Tabelle werden versteckt und geben den zuvor bentigten Platz frei. Wirkt auf alle anderen Elemente wie <code>hidden</code>.<br>
</p>

<p>Im obigen Beispiel wird die berschrift zunchst nicht, die Tabelle jedoch vollstndig angezeigt. Beim Anklicken des Verweises wird dies jedoch dynamisch gendert. Auf die dazu erforderlichen JavaScript-Befehle wird an dieser Stelle nicht nher eingegangen.</p>

<h3 class="inf">Beachten Sie:</h3>

<p>Lediglich Mozilla Firefox gibt in obigem Beispiel den fr Zeile B reservierten Platz frei.</p>



<p class="doc"><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></p>



<h2><img src="../../src/css20.gif" width="30" height="30" alt="CSS 2.0" title="CSS 2.0"><img src="../../src/netsc4.gif" width="30" height="30" alt="Netscape 4.0" title="Netscape 4.0"><img src="../../src/msie4.gif" width="30" height="30" alt="MS IE 4.0" title="MS IE 4.0"><img src="../../src/op7.gif" width="30" height="30" alt="Opera 7" title="Opera 7"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0">&nbsp;<a class="an" name="clip">clip (Anzeigebereich eingrenzen)</a></h2>

<p>Sie knnen bestimmen, dass nur ein Ausschnitt eines Elements sichtbar angezeigt wird, unabhngig davon, welche Angaben sonst zur Gre des Elements gemacht wurden und unabhngig von der automatischen Gre des Elements. Wenn das Element grer ist als der so definierte Anzeigebereich, wird es an den Seiten entsprechend abgeschnitten. Derzeit knnen Sie nur ein Rechteck fr den Ausschnitt definieren. In Zukunft sollen jedoch auch Polygone, Kreise bzw. Ellipsen mglich sein.</p>

<h3 class="xmp">Beispiel:</h3>

<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="anzeige/clip.htm">Anzeigebeispiel: So sieht's aus</a></p>

<pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"&gt;
&lt;html&gt;&lt;head&gt;&lt;title&gt;clip&lt;/title&gt;
&lt;/head&gt;&lt;body&gt;

&lt;div style="position:absolute; top:100px; left:100px; clip:rect(0px, 130px, 130px, 0px);"&gt;
Etwas Hund:&lt;br&gt;
&lt;img src="hund.gif" width="208" height="181" alt="Hund"&gt;&lt;/div&gt;

&lt;/body&gt;&lt;/html&gt;
</pre>

<h3 class="xpl">Erluterung:</h3>

<p>Mit <code>clip:</code> knnen Sie einen Ausschnitt fr die sichtbare Anzeige definieren. Dahinter folgt der Bezeichner <code>rect</code> (fr rectangle, = Rechteck), und dahinter, in runde Klammern eingeschlossen, vier durch Beistriche getrennte numerische Werte oder das Schlsselwort <code>auto</code> zur Bestimmung des Ausschnitts.</p>

<p>Der erste der vier Werte bezeichnet den Wert fr "oben", gemessen an der oberen Elementgrenze<br>
Der zweite der vier Werte bezeichnet den Wert fr "rechts", gemessen an der linken Elementgrenze<br>
Der dritte der vier Werte bezeichnet den Wert fr "unten", gemessen an der oberen Elementgrenze<br>
Der vierte der vier Werte bezeichnet den Wert fr "links", gemessen an der linken Elementgrenze</p>

<p>Damit berhaupt ein Ausschnitt sichtbar ist, muss der Wert fr "unten" grer sein als der fr "oben" und der Wert fr "rechts" grer als der fr "links". Das Schlsselwort <code>auto</code> bedeutet: keine Angabe zu dem betreffenden Wert, das Element soll an der entsprechenden Seite bis zu seiner Elementgrenze angezeigt werden. Negative Werte sind gem CSS 2.1 nicht mehr erlaubt.</p>

<h3 class="inf">Beachten Sie:</h3>

<p>Die Eigenschaft <code>clip</code> wirkt nur auf absolut positionierte Elemente, deren Wert fr <img src="../../src/up.gif" width="14" height="10" alt="nach unten">&nbsp;<a href="#overflow">overflow</a> von <code>visible</code> abweicht.</p>

<p>Im Internet Explorer funktioniert <code>clip</code> im <img src="../../src/dok.gif" width="15" height="10" alt="Beispiel-Seite">&nbsp;<a href="../formate/box_modell.htm#standardkonform">standardkonformen Modus</a> nur dann, wenn bei der Wertzuweisung auf die &ndash; gem CSS 2.1 nun zwingend vorgeschriebenen &ndash; Kommata verzichtet wird. Auch Version 7 ist von diesem Fehler betroffen.</p>



<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td colspan="2" class="doc">
&nbsp;<a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a>
</td></tr>
<tr><td class="doc"><a href="printlayouts.htm"><img src="../../src/next.gif" width="10" height="10" border="0" hspace="10" alt="weiter"></a></td>
<td width="100%"><img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="printlayouts.htm">Layouts fr Printmedien</a>
</td></tr>
<tr>
<td class="doc"><a href="pseudoformate.htm"><img src="../../src/prev.gif" width="10" height="10" border="0" hspace="10" alt="zurck"></a></td>
<td><img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="pseudoformate.htm">Pseudoelemente und Pseudoklassen</a>
</td>
</tr>
<tr><td colspan="2" class="doc">&nbsp;</td>
</tr>
<tr>
<td colspan="2" class="nav"><a class="an" name="bottom"><img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"></a> <a href="../../index.htm">SELFHTML</a>/<a href="../../navigation/index.htm" target="_parent" class="navh">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von">&nbsp;<a href="../index.htm">Stylesheets (CSS)</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von">&nbsp;<a href="index.htm">CSS-Eigenschaften</a></td>
</tr>
</table>

<p>&copy; 2007 <img src="../../src/dok.gif" width="15" height="10" alt="Seite">&nbsp;<a href="../../editorial/impressum.htm">Impressum</a></p>

</body>
</html>