2.12.6 Grafik und Text

1 Workshops

a) Möglichkeiten, ein Bild zu beschriften

• Bachmann: Grafik und Text

b) Grafik fliessend in den Text einbinden (float)

⇒ Siehe auch "Textumfluss (float)"

1) Bild ohne Rahmen, rechts vom Text

• W3Schools: Beispiel: A simple use of the float property

2) Bild mit punktiertem Rahmen, rechts vom Text

• W3Schools:
  Beispiel: An image with border and margins that floats to the right in a paragraph

3) Bild mit Rahmen, rechts vom Text und eingefügter Bildlegende (caption)

• W3Schools: Beispiel: An image with a caption that floats to the right

4) Das Bild ist im Text und vertikal ausgerichtet

• W3Schools: Beispiel: Vertical align an image

5) Der erste Buchstabe "schwimmt" links oben vom Abschnitt

• W3Schools: Beispiel: Let the first letter of a paragraph float to the left

c) Grafik mit Text in Tabellen

• Bachmann: Grafik mit Text in Tabellen

2 Grundlagen

a Grafik zum umgebenden Text ausrichten

• SELFHTML: Grafik zum umgebenden Text ausrichten
  SELFHTML: Beispiel: Woran der Denker denkt

b) Text um Grafik fliessen lassen

• SELFHTML: Text um Grafik fliessen lassen
  SELFHTML: Beispiel: Ein Text

3 Grafik hinter oder vor dem Text

1) Grafik hinter dem Text (Z-index ist -1, also niedriger und dadurch ist die Grafik hinten):

• W3Schools:
  Beispiel: Z-index -1 used to place an element "behind" another element

2) Grafik vor dem Text (Z-index ist 1, also höher und dadurch im Vordergrund):

• W3Schools: Beispiel: Z-index 1 with higher priority

↑