VendelAdmin
– Thread Creator#1Bitte stellt ruhig im Support Fragen rund um die Formatierung von Beiträgen. Ich beobachte, dass viele News-Schreiber teils exotische und komplett unnötige Konstrukte mit Tabellen erstellen. Ich versuche auf die Fragen hier einzugehen und den Startbeitrag dahingehend zu erweitern.
Text neben eine Grafik positionieren.
Hierfür gibt es mindestens zwei einfache Möglichkeiten. Zuerst stellt man sich die Frage: Soll der Text um die Grafik fließen oder soll der Text nur neben der Grafik positioniert sein? Hier die zwei Lösungen jeweils dazu:
Zusatz:
Es gibt Situationen, in denen man sich ein Layout speichert und dabei kann es vorkommen dass man dort Text um die Grafik fließen lässt, aber der Text in manchen Fällen kürzer ist. Der nachfolgende Text der eigentlich unter der Grafik weitergehen sollte, würde jetzt erstmal weiterhin um die Grafik fließen. Um das zu verhindern, geht man in den Quelltext und fügt an gewünschter Stelle einen Unterbrecher ein. Eine Möglichkeit wäre der HTML-Code: <br clear="all">
Hier ein Beispiel
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. 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. 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
Feintuning: Wenn ihr auf das Bild klickt und per Button bearbeitet, könnt ihr die BiIdgröße optimieren. Beachtet das ihr das Verhältnis beibehaltet. In der Regel kümmert sich der Editor selbst darum, wenn ihr den Haken gesetzt habt.
Text neben eine Grafik positionieren.
Hierfür gibt es mindestens zwei einfache Möglichkeiten. Zuerst stellt man sich die Frage: Soll der Text um die Grafik fließen oder soll der Text nur neben der Grafik positioniert sein? Hier die zwei Lösungen jeweils dazu:
- Text soll um die Grafik fließen:
Dazu fügt ihr im Editor eure Grafik über den "Bild einfügen/bearbeiten"-Button hinzu und fügt euren Text direkt ohne ein Leerzeichen daneben ein. Jetzt klickt bitte wieder auf die Grafik und oben auf den markierten "Bild einfügen/bearbeiten"-Button. Dort wählt den zweiten Reiter "Erweitert" aus. In der Eingabe "Stil" könnt ihr CSS-Styles eintragen, tragt die benötigten Styles hintereinander ein:- Das Bild soll links float:left; oder rechts stehen float:right;
- Den Abstand zwischen Text und Bild kann man einzeln für jede Seite festlegen:
padding-top:10px; (Oben), padding-right:10px; (Rechts), padding-bottom:10px; (Unten), padding-left:10px; (Links)
oder in der selben Reihenfolge als ein kurzer Befehl:
padding:0 10px 5px 0; (Oben, Rechts, Unten, Links)
Wenn die beiden gegenüber liegenden Seiten identisch sind:
padding:0 10px; (Oben/Unten, Rechts/Links)
Wenn alle Seiten identisch sind:
padding:10px;
Das sieht dann so aus: float:left; padding:0 10px 10px 0;
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. 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. 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. - Text soll nicht um die Grafik fließen:
Die einfachste aber nicht Mobile taugliche Methode, ohne extra HTML-Kenntnisse zu benötigen, ist eine Tabelle mit einer Zeile und zwei Spalten. Wähle dazu oben den Button für "Tabelle" aus und dort wähle 2x1 bei "Tabelle einfügen". Jetzt füge in eine Spalte deinen Text und in die andere Spalte deine Grafik ein.
Ich füge in meinem Beispiel rechts eine Grafik hinzu. Wer dies macht, wird feststellen, dass die Grafik plötzlich fast ganz links platziert ist. Um diese an den rechten Rand zu setzen, markiere die Grafik und klicke auf den "Rechtsbündig ausrichten"-Button. Als nächstes füge ich meinen Text in die andere Spalte ein. Jetzt passiert etwas, das wir gar nicht wollen, zwischen Text und Grafik ist kein Abstand. Das lässt sich sehr leicht lösen, indem ihr eine der beiden Spalten eine "Breite" gibt. In der Regel empfehle ich hier die Spalte mit der Grafik, denn von der Grafik kennt ihr die Breite und addiert zu dieser zum Beispiel 10 Pixel als den Abstand hinzu.
Setzt den Cursor in die Spalte mit der Grafik und wählt oben im "Tabelle"-Button den Eintrag "Zelle" aus und darin den Eintrag "Zelleneigenschaften". Gleich in der ersten Eingabe tragt ihr euren Wert für die "Breite" ein und schon habt ihr einen festen Abstand zwischen dem Text und der Grafik.
Die Angabe der Breite der Zelle vererbt sich bei mehrzeiligen Tabelle auf die gesamte Spalte. Ihr könnt eine Breite natürlich für jede Zelle(Spalte) angeben.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. 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. 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.
Wenn man es Mobile tauglich umsetzen möchte, muss man leider den Quellcode bearbeiten. Dazu klickt oben im Editor auf den Button mit "<>". Eine ausführliche Beschreibung ist in einem Beitrag weiter unten auf dieser Seite vorgestellt.
Zusatz:
Es gibt Situationen, in denen man sich ein Layout speichert und dabei kann es vorkommen dass man dort Text um die Grafik fließen lässt, aber der Text in manchen Fällen kürzer ist. Der nachfolgende Text der eigentlich unter der Grafik weitergehen sollte, würde jetzt erstmal weiterhin um die Grafik fließen. Um das zu verhindern, geht man in den Quelltext und fügt an gewünschter Stelle einen Unterbrecher ein. Eine Möglichkeit wäre der HTML-Code: <br clear="all">
Hier ein Beispiel
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. 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. 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
Feintuning: Wenn ihr auf das Bild klickt und per Button bearbeitet, könnt ihr die BiIdgröße optimieren. Beachtet das ihr das Verhältnis beibehaltet. In der Regel kümmert sich der Editor selbst darum, wenn ihr den Haken gesetzt habt.
Post was last edited on 29.12.2022 03:31.