Antworten zu häufig gestellten Homepage-Fragen
 Alle Anleitungen
Einige Anleitungen
Intern
Kostenl. Partnerlinks
[,__,] Druckversion

Die Website Homepage-FAQs.de befindet sich im Archivmodus.
FAQS zu HP&Co.
Texte umfliessen Bilder - Bild links, rechts oder in der Mitte (CSS)

Hinweis:
Beispiele mit P-Tag (400 Pixel breit) zur besseren Verdeutlichung.

A) Bild rechts, Text umfliesst das Bild links und Text im Blocksatz

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores Foto: Biene auf Blumeet ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Code (gekürzt):

<p  style="width: 400px; text-align: justify;">
Texte...........
<img  style="margin: 0.2cm; width: 100px; height: 75px; float: right;"
 alt="Foto: Biene auf Blume" src="mini-hummel-auf-blume2.jpg">
............Texte.
</p>

B) Bild rechts, Text umfliesst das Bild links und Text rechtsbündig

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores Foto: Biene auf Blumeet ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Code (gekürzt):

<p  style="width: 400px; text-align: right;">
Texte........... 
<img  style="margin: 0.2cm; width: 100px; height: 75px; float: right;"
 alt="Foto: Biene auf Blume" src="mini-hummel-auf-blume2.jpg">
............Texte.
</p>

C) Bild links, Text umfliesst das Bild rechts und Text linksbündig

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores Foto: Biene auf Blumeet ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Code (gekürzt):

<p  style="width: 400px;">
Texte...........
<img style="margin: 0.2cm; width: 100px; height: 75px; float: left;"
alt="Foto: Biene auf Blume" src="mini-hummel-auf-blume2.jpg">
............Texte.
</p>

D) Bilder links und rechts, Text umfliesst Bilder und ist im Blocksatz

Foto: Biene auf BlumeLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores Foto: Biene auf Blumeet ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.Foto: Biene auf Blume Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Code (gekürzt):

<p style="width: 400px; text-align: justify;">
<img style="margin: 0.2cm; width: 100px; height: 75px; float: right;"
 alt="Foto: Biene auf Blume" src="mini-hummel-auf-blume2.jpg">

Texte......
<img style="margin: 0.2cm; width: 100px; height: 75px; float: left;"
 alt="Foto: Biene auf Blume" src="mini-hummel-auf-blume2.jpg">
..........Texte..........
<img style="margin: 0.2cm; width: 100px; height: 75px; float: right;"
 alt="Foto: Biene auf Blume" src="mini-hummel-auf-blume2.jpg">
Texte.......
<p>

E) Bilder links und rechts oben, Text im Blocksatz umfliesst Bilder

Foto: Rote Blume Foto: Biene auf BlumeLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Code (gekürzt):

<p style="width: 400px; text-align: justify;">
<img style="margin: 0.2cm; width: 171px; height: 75px; float: left;"
 alt="Foto: Biene auf Blume" src="rote-blume.jpg">
<img style="margin: 0.2cm; width: 100px; height: 75px; float: right;"
 alt="Foto: Biene auf Blume" src="mini-hummel-auf-blume2.jpg">
Texte.......
<p>

F) Text 2-spaltig, Bild in der Mitte, Text umfliesst Bild links und rechts

Screenshot von www.ohne-css.gehts-gar.net

Code und Anleitung > http://www.ohne-css.gehts-gar.net/0062.php


Anleitung (C) 2010 Daniel Wurst - http://www.homepage-faqs.de