Bild mit Textumfluß realisieren

17. Okt 2012

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

Bearbeiten-Modus mit Bild- und Textelementzoom
Bearbeiten-Modus mit Bild- und Textelement

Beispiel: Bild- und Textelement in der Ausgabe

Bild mit 250px Breite, links ausgerichtet
Bild mit 250px Breite, links ausgerichtet

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.

Ähnliche Seiten

Entwicklerbereich Weblication® CMS - © Scholl Communications AG