Herzlich Willkommen!

Auf der Muster-Website von

E. Korostensky PC-Informatik

Ihre IP: 3.147.104.248

(zurück zur Übersichtsseite ...)

Positionierung von Text und Bilder

Wenn Texte in Kombination mit Bildern dargestellt werden, hängt die Position des Textes vom Alignment des Bildes ab (ausser man trennt Text und Bild via Tab- oder Div-Elemente). Die folgenden Darstellungen zeigen, wie sich ein Text vor oder nach einem Bild, abhängig vom Bild-Alignment (links, rechts, unten, mitte, baseline, etc.) verhält.

Ausrichtungsvarianten: Text nach Grafik / Text vorher / <br> nach Grafik

ohne: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.	Text vorherohne: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.	ohne: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
Links: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.	Text vorher Links: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt. Morbi augue urna, mattis non accumsan ac, aliquam.	Links: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
abs. Unten: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.	Text vorherabs. Unten: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.	abs. Unten: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
abs. Mitte: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.	Text vorherabs. Mitte: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.	abs. Mitte: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
Baseline: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.	Text vorherBaseline: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.	Baseline: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
Unten: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.	Text vorherUnten: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.	Unten: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
Mitte: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.	Text vorherMitte: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.	Mitte: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
Rechts: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.	Text vorher Rechts: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt. Morbi augue urna, mattis non accumsan ac aliquam.	Rechts: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
Text oben: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.	Text vorherText oben: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.	Text oben: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.
Oben: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.	Text vorherOben: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.	Oben: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.

Bild-Positionierungen in langen Texten

via align left/right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis, turpis at volutpat fringilla, lectus eros vulputate quam, a viverra elit turpis id leo. Integer ac tortor eros, in luctus tortor. Vivamus euismod purus a mi rhoncus rutrum. Aenean et ipsum at magna facilisis blandit. Donec cursus quam nec urna dapibus quis auctor nulla auctor. Pellentesque elementum tortor in mi dictum facilisis. Morbi lectus ipsum, aliquam ut interdum quis, faucibus sed urna. Suspendisse vitae lectus ipsum, eget cursus magna. Vivamusd egestas sem. Etiam molestie convallis nibh eu rutrum. Curabitur sed libero inisl. Morbi augue urna, mattis non accumsan ac, aliquam vel est. Vivamus posuere, urna id cursus egestas, mauris nibh porttitor augue, eget malesuada est nisi vel nisi. Pellentesque libero felis, faucibus vitae commodo non, tempus non nunc. Nam quis purus id nulla facilisis euismod in in purus. Phasellus adipiscing massa vel nulla consectetur blandit laoreet velit tempor. Cras consectetur, eros et euismod fringilla, mauris sapien viverra quam, nec laoreet velit eros ut odio. In at neque a dui rutrum euismod ac a lorem. Donec id dolor mi. Nullam quis risus mi. Morbi laoreet dictum pulvinar.

via Float left/right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis, turpis at volutpat fringilla, lectus eros vulputate quam, a viverra elit turpis id leo. Integer ac tortor eros, in luctus tortor. Vivamus euismod purus a mi rhoncus rutrum. Aenean et ipsum at magna facilisis blandit. Donec cursus quam nec urna dapibus quis auctor nulla auctor. Pellentesque elementum tortor in mi dictum facilisis. Morbi lectus ipsum, aliquam ut interdum quis, faucibus sed urna. Suspendisse vitae lectus ipsum, eget cursus magna. Vivamusd egestas sem. Etiam molestie convallis nibh eu rutrum. Curabitur sed libero inisl. Morbi augue urna, mattis non accumsan ac, aliquam vel est. Vivamus posuere, urna id cursus egestas, mauris nibh porttitor augue, eget malesuada est nisi vel nisi. Pellentesque libero felis, faucibus vitae commodo non, tempus non nunc. Nam quis purus id nulla facilisis euismod in in purus. Phasellus adipiscing massa vel nulla consectetur blandit laoreet velit tempor. Cras consectetur, eros et euismod fringilla, mauris sapien viverra quam, nec laoreet velit eros ut odio. In at neque a dui rutrum euismod ac a lorem. Donec id dolor mi. Nullam quis risus mi. Morbi laoreet dictum pulvinar.