Steemit Textformatierung: Grafik rechtbündig und Text linksbündig ausrichten

in #deutsch6 years ago (edited)

Viele der Neulinge, so wie ich auch, die auf Steemit beginnen Artikel zu schreiben stehen früher oder später vor der Frage wie man ein Bild im Artikel rechtsbündig ausrichten kann.

Nicht jeder verfügt über die Kenntnisse mit Befehlen und Sonderzeichen umzugehen und aus diesem Grund möchte ich meine Erfahrungen zu diesem Thema mit euch teilen. Ich hoffe es ist einigermaßen verständlich geschrieben und kann dem einen oder anderen Einsteiger weiter helfen.


Dieses Bild der Weinbergschnecke ist jetzt rechtsbündig ausgerichtet. Der Text wurde linksbündig ausgerichtet. Dafür wird der < div class="pull-right"> Befehl verwendet um das Bild auf die rechte Seite zu schieben.

DSC_0017_17.JPG

Um den Code im Text darstellen zu können habe ich nach der ersten dreieckigen Klammer ein Leerzeichen eingefügt. Dieses beim kopieren und einfügen einfach entfernen. Damit der Text linksbündig neben dem Bild und nicht auf voller Seitenbreite beginnt, brauchen wir nochmals den < div class="pull-left"> Befehl. Es wird nur das -right gegen ein -left ausgetauscht. Dabei habe ich den Befehl nur auf die ersten zwei Sätze angewendet und mit < /div> beendet. Somit läuft der Text linksbündig neben dem Bild weiter und wird auf die ganze Seite ausgebreitet sobald er am Bild vorbei ist. Möchte man den Text komplett auf der linken Seite haben kann man den Befehl < div class="pull-left"> auf den ganzen Text anwenden.

Auf flogendem Screenshot seht ihr den bisherigen Code ab dem Bild mit dem Text.

Textformatierung Steemit.jpg
Alternativ kann der Code auch hier abgerufen werden.


Hierbei sollte darauf geachtet werden den < div class="pull-right"> Befehl für das Bild allein in eine Zeile zu setzen und eine Zeile Abstand zum Link des Bildes zu lassen. Sonst sieht das Ergebnis so aus:

Fehlerhafte Darstellung.jpg

Es kommt über und unter dem Bild zu einer fehlerhaften Darstellung.


Das abschließen des Befehls mit < /div> sollte ebenfalls in eine eigene Zeile. Wird es direkt an den Bildlink gehängt, hat das zur Folge das der Text rechts unter dem Bild weiter verläuft und sich nicht auf die ganze Seite ausbreitet. Wie es auf folgendem Screenshot zu sehen ist:

Textverlauf.jpg


So das wars auch schon, viel Spaß beim ausprobieren und Danke auch an @Schlees mit seiner Taube der mir bei der Fehlersuche geholfen hat 😉

schlees.jpg


Schöne Grüße
Martin


Ubuntuhof Logo 100x100_Steemit.png

Ich bin weil wir sind und wir sind weil ich bin

Sort:  

Ein sehr guter und informativer Artikel. Vielen Dank.

Comming and Upvoted you :) !
:
“If we had to earn our age by thinking for ourselves at least once a year, only a handful of people would reach adulthood.” ====> Mokokoma Mokhonoana

Ein sehr guter und informativer Artikel. Vielen Dank.

Coin Marketplace

STEEM 0.35
TRX 0.12
JST 0.040
BTC 70455.47
ETH 3561.82
USDT 1.00
SBD 4.71