Bild mit Textumfluß realisieren
Veröffentlichungsdatum: 17. Oktober 2012
Änderungsdatum: 25. April 2014
bild text umfluß umfluss umfliessen umfließen
Nutzen Sie die Möglichkeiten des Struktureditors, um Text-Bild-Kombinationen in Ihren Internetseiten zu realisieren.
Innerhalb einer Webseite soll ein Bild von Text umflossen werden.
Hierzu fügen Sie in die Seite über den Struktureditor das Bild-Element ein. Sollte das verlinkte Bild breiter als der Inhaltsbereich sein, geben Sie eine feste Bildbreite an, die unterhalb der Breite des Inhaltsbereiches liegt (im Beispiel 250px).
Direkt nach dem Bildelement fügen Sie über den Struktureditor ein Textelement ein, das Sie mit dem gewünschten Text befüllen.
Wenn Sie nun im Bildelement über die Bearbeitenmaske das Bild ausrichten (links oder rechts), wird der nachfolgende Text das Bild entsprechend umfliessen. Dies ist nachfolgend umgesetzt.
Beispiel: Bild- und Textelement im Datei Entwurf der Bearbeitung
Beispiel: Bild- und Textelement in der Ausgabe
Das nebenstehende Bild ist mit einer festen Breite von 250 Pixel definiert und links ausgerichtet. Dieses nachfolgende Textelement umfliesst somit dieses Bild rechts. Zur Demonstration für den Textumfluß nachfolgend ein Dummy-Text:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut commodo pretium nisl. Integer sit amet lectus. Nam suscipit magna nec nunc. Maecenas eros ipsum, malesuada at, malesuada a, ultricies dignissim, justo. Mauris gravida dui eget elit. In lacus est, bibendum vitae, malesuada quis, lacinia vel, nulla. Aenean varius mauris vitae neque. Maecenas a nibh. Curabitur pretium tortor. Integer nec dolor non ante semper tincidunt. Cras consectetuer mauris vel quam. Morbi tincidunt, urna sed varius pellentesque, ligula justo blandit quam, sed tempus purus mauris sit amet dui. In sapien mauris, eleifend id, malesuada sed, faucibus nec, elit. Quisque facilisis faucibus neque. Sed malesuada mi eget elit. Fusce mauris massa, posuere a, sodales sit amet, egestas id, elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut commodo pretium nisl. Integer sit amet lectus. Nam suscipit magna nec nunc. Maecenas eros ipsum, malesuada at, malesuada a, ultricies dignissim, justo. Mauris gravida dui eget elit. In lacus est, bibendum vitae, malesuada quis, lacinia vel, nulla. Aenean varius mauris vitae neque. Maecenas a nibh. Curabitur pretium tortor. Integer nec dolor non ante semper tincidunt. Cras consectetuer mauris vel quam. Morbi tincidunt, urna sed varius pellentesque, ligula justo blandit quam, sed tempus purus mauris sit amet dui. In sapien mauris, eleifend id, malesuada sed, faucibus nec, elit. Quisque facilisis faucibus neque. Sed malesuada mi eget elit. Fusce mauris massa, posuere a, sodales sit amet, egestas id, elit.
Hinweise
Beachten Sie bitte den Artikel unten in den weiterführenden Links zur Qualität Ihrer Webseiten. Wir empfehlen beim Vorhaben, ein Bild mit Text umfliessen zu lassen, den Einsatz o.g. Werkzeuge/Elemente.
- Wie kann ich innerhalb einer Webseite einen Textumfluss um ein Bild realisieren?
- Nutzen Sie die Möglichkeiten des Struktureditors, um Text-Bild-Kombinationen zu realisieren. Fügen Sie zunächst das **Bild-Element** hinzu und danach direkt das **Textelement** mit dem gewünschten Text.
- Welche Reihenfolge sollte ich beim Struktureditor für Bild und Text einhalten?
- Legen Sie das **Bild-Element** in der Seite über den Struktureditor an und fügen Sie **direkt nach dem Bildelement** ein **Textelement** ein, das Sie anschließend mit Ihrem Text befüllen.
- Was soll ich tun, wenn das verlinkte Bild breiter ist als der Inhaltsbereich?
- Legen Sie eine **feste Bildbreite** fest, die **unterhalb der Breite des Inhaltsbereiches** liegt (z. B. **250px**), damit der Textumfluss sauber funktioniert.
- Wie aktiviere ich den Textumfluss, damit der nachfolgende Text das Bild umfließt?
- Richten Sie das Bild im Bildelement über die **Bearbeitenmaske** aus (**links** oder **rechts**). Der **nachfolgende Text** im anschließend eingefügten Textelement umfließt das Bild dann entsprechend.
- Wie sieht ein typisches Beispiel für einen funktionierenden Textumfluss aus?
- Im Beispiel ist ein Bild mit **fester Breite (250px)** links ausgerichtet. Das nachfolgende Textelement umfließt das Bild rechts, sodass Text neben dem Bild dargestellt wird.
- Gibt es Hinweise zur Qualität, wenn ich ein Bild mit Text umfließen lassen möchte?
- Empfohlen wird der Einsatz der genannten Werkzeuge/Elemente aus dem Struktureditor. Zusätzlich wird auf weiterführende Hinweise/Artikel in den „Weiterführenden Links“ zur Qualität von Webseiten verwiesen.