{"id":2651,"date":"2023-04-18T18:13:32","date_gmt":"2023-04-18T16:13:32","guid":{"rendered":"https:\/\/eleworks.de\/?p=2651"},"modified":"2023-11-26T14:55:40","modified_gmt":"2023-11-26T13:55:40","slug":"test-fuer-text-neben-einem-bild-darstellung-im-browser-und-handy","status":"publish","type":"post","link":"https:\/\/eleworks.de\/?p=2651","title":{"rendered":"Test: Text um Bilder flie\u00dfen lassen -Darstellung im Browser, Handy"},"content":{"rendered":"\n

Experimentieren Sie mit diesen Angaben, wenn <br clear=all> nicht den gew\u00fcnschten Effekt bringt.<\/h2>\n\n\n\n
\"\"<\/figure>
\n

Das klassische Einsatzgebiet f\u00fcr float ist die Positionierung von Grafiken in einem Flie\u00dftext. Um zu zeigen, wie float funktioniert, binden Sie auf der Startseite eine Grafik ein und lassen den Text auf der Seite drum herum flie\u00dfen.<\/p>\n<\/div><\/div>\n\n\n\n

Die Grafik einbinden<\/h3>\n\n\n\n

Als Beispielfoto bietet sich ein schwebender Luftballon an. Sie k\u00f6nnen f\u00fcr das folgende Beispiel eine beliebige eigene Grafik benutzen oder die Beispieldatei ballon.jpg<\/em> von der Buch-CD nehmen.<\/p>\n\n\n\n

\n
ToDo: Eine Grafik auf der Startseite einbinden<\/h5>\n\n\n\n
    \n
  1. Kopieren Sie die Grafik ballon.jpg<\/em> in den \u00dcbungsordner, in dem auch die Startseite index.html<\/em> liegt.<\/li>\n\n\n\n
  2. \u00d6ffnen Sie die Startseite index.html<\/em> und f\u00fcgen Sie die Grafik an den Anfang des ersten Flie\u00dftextabsatzes ein:<div id=”textbereich”>
    <h2>Startseite<\/h2>
    <p><img src=”ballon.jpg” alt=”Roter Luftballon” width=”78″
    height=”100″ \/><\/strong>Webseiten bestehen aus <strong>rechteckigen
    K\u00e4sten<\/strong>, <!– Rest des Absatzes –><\/p><\/li>\n\n\n\n
  3. Speichern Sie die Webseite und betrachten Sie sie im Browser.<\/li>\n<\/ol>\n<\/blockquote>\n\n\n\n

    Das Bild ist drin, aber so besonders h\u00fcbsch sieht es nicht aus:<\/p>\n\n\n\n

    \n
    \"\"
    Der Ballon ist drin, schwebt aber noch nicht<\/figcaption><\/figure>\n<\/figure>\n\n\n\n

    <\/a><\/p>\n\n\n\n

    Die Grafik floaten<\/h3>\n\n\n\n

    Die Eigenschaft float kann die Werte left oder right bekommen, um das Element nach links (float: left) oder nach rechts (float: right) schweben zu lassen. Nur der Vollst\u00e4ndigkeit halber: In die Mitte schweben lassen geht nicht, es gibt kein float: center<\/em>. Versuchen Sie es gar nicht erst.<\/p>\n\n\n\n

    Um den Ballon nach rechts schweben zu lassen, k\u00f6nnen Sie die Deklaration float:right mit dem Attribut style direkt in das img-Element schreiben:<\/p>\n\n\n\n

    \n
    ToDo: Die eingebundene Grafik auf der Startseite nach rechts floaten<\/h5>\n\n\n\n
      \n
    1. \u00d6ffnen Sie die Startseite index.html und \u00e4ndern Sie den Quelltext wie folgt:<h2>Startseite<\/h2>
      <p><img src=”ballon.jpg” alt=”Roter Luftballon” width=”78″
      height=”100″ style=”float:right;”<\/strong> \/>Webseiten bestehen aus …<\/li>\n\n\n\n
    2. Speichern Sie die Webseite und betrachten Sie sie im Browser.<\/li>\n<\/ol>\n<\/blockquote>\n\n\n\n
      \n
      \"\"
      Der Ballon schwebt nach rechts<\/figcaption><\/figure>\n<\/figure>\n\n\n\n

      Noch nicht besonders h\u00fcbsch, aber der Text flie\u00dft um die Grafik herum. Die Grafik macht zun\u00e4chst die drei typischen Float-Bewegungen:<\/p>\n\n\n\n