Bilder nebeneinander per DIV-Entfernen (Eingabe)

Worauf sich diese Anleitung bezieht

Die hiesige Anleitung bezieht sich ausschließlich auf Blogs, in denen im Editor unter Post-Einstellungen > Optionen > "Drücken Sie Eingabe für Zeilenumbrüche" aktiviert ist. Eine Anleitung für den Fall, dass man die Einstellung "<br>-Tag verwenden " in seinem Blog eingestellt hat, findet man dort: http://sg.utez.de/2013/06/bilder-nebeneinander-per-div-entfernen-br.html

---

Diese Einstellung im Blog sollte man nicht (unkontrolliert) wechseln; denn bei jedem Öffnen des Editors gilt die letzte Einstellung. Bei Posts, die man mit der jeweils anderen Voreinstellung erstellt hatte, würden deren Codes sofort geändert, wenn man sie mal im Editor öffnet und dieser zuletzt auf die jeweils andere Zeilenumbruch-Einstellung aktiviert war. Die Codeänderung geschieht dabei leider nicht korrekt, weshalb dann Verschiebungen entstehen können.

Ich habe deshalb übrigens in zwei verschiedenen Blogs mit jeweils unterschiedlichen Einstellungen die Tests für die unterschiedlichen Anleitungen gemacht.

Die Anleitung bezieht sich außerdem nur auf Bilder ohne Bildunterschrift; denn Bilder mit Bildunterschrift stehen in einem völlig anderen Code. Unterschied siehe dort: http://sg.utez.de/2013/06/codes-von-bildern-mit-und-ohne-bildunterschrift.html

Weshalb das Bildmenü allein nichts nützt

Normalerweise werden mehrere Bilder, die man hochlädt, automatisch mittig und einzeln untereinander gestellt und können per Klicken und Bildmenü auch nur einzeln ausgerichtet werden. Das liegt daran, dass um jedes einzelne Bild beim Hochladen ein DIV-Container gestellt wird, der das Bild ausrichtet und festlegt, an welcher Seite nächste Elemente neben das Bild rutschen dürfen. Bei mittig stehenden Bildern können keine Elemente daneben rutschen, bei links stehenden Bildern können nur rechts Elemente daneben rutschen, bei rechts stehenden Bildern können nur links Elemente daneben rutschen. Weil jedes Bild ein solches Ausschlusskommando hat, kann man die Bilder mithilfe des Bildmenüs nicht korrekt nebeneinander bringen.

Eine der Möglichkeiten, Bilder ohne Bildunterschrift nebeneinander zu stellen

Es gibt einige Möglichkeiten die Situation so zu ändern, dass die Bilder nebeneinander stehen können. Hier wird eine davon vorgestellt, nämlich das Nebeneinanderstellen von Bildern, indem man im HTML-Modus des Editors die DIV-Container um die Bild-Links entfernt und die Bild-Links (a) direkt hintereinander stellt.

Anleitung

So sieht es im Web aus, wenn man zwei Bilder hochlädt:

So sieht das im HTML-Modus des Editors aus:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTp_kM0gblK7ubduNz0KUdZklspsr66_ijxIYEUvjvQJIwf254YpLCKvmv6d71VNqg03eLK2YUwqUEyV5M7Ef0kWHWiwt35WfNOErok-bH2iSs0x1HKJ2YBd111tpQnST_3T1_mIg8VC2X/s1600/schweifkugel_14.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTp_kM0gblK7ubduNz0KUdZklspsr66_ijxIYEUvjvQJIwf254YpLCKvmv6d71VNqg03eLK2YUwqUEyV5M7Ef0kWHWiwt35WfNOErok-bH2iSs0x1HKJ2YBd111tpQnST_3T1_mIg8VC2X/s1600/schweifkugel_14.jpg" /></a></div>

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlkNM2TnA9wPvXUhmIa8YwaG87f1gkJZ_MI7TTesefMfUVOzlufwABLMdmteQWz1tbBCzDo5q7smZlUeAw3ql6em5jiOJ2uwy-7q7whlM_aWxXzBa9eKiugJeAVeZxV381LjEDK85GSM3G/s1600/schweifkugel_3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlkNM2TnA9wPvXUhmIa8YwaG87f1gkJZ_MI7TTesefMfUVOzlufwABLMdmteQWz1tbBCzDo5q7smZlUeAw3ql6em5jiOJ2uwy-7q7whlM_aWxXzBa9eKiugJeAVeZxV381LjEDK85GSM3G/s1600/schweifkugel_3.jpg" /></a></div>



(Rot = DIV-Container, Blau = Bild-Link, Schwarz = Bild,
zwischen den Bildern befinden sich 2 Zeilenumbrüche; denn 1 Leerzeile wird durch 2 Zeilenumbrüche erzeugt)

Wenn man im HTML-Modus des Post-Editors die DIV-Container um die Bilder entfernt und alle Zeilenumbrüche entfernt, indem man die Bilder mit ihren Links direkt aneinander stellt (</a><a ...), dann stellen sich die Bilder automatisch dicht hintereinander (seitlich nur entfernt durch Abstandskommandos in den Bild-Links) statt untereinander und sie rutschen erst dann in die nächste Zeile, wenn die Postbreite nicht mehr ausreicht.



Um die Abstände zwischen den Bildern zur jeweils nächsten Zeile sowie zu den Seiten hin aneinander anzupassen, müssen die seitlichen Abstandskommandos die in den Bild-Links kommandiert sind, berücksichtigt werden. Die bewirken so viel seitlichen Abstand zwischen den Bildern wie zwei Zeilenumbrüche unter einer Bilderzeile. Das ist wichtig zu wissen, da Abstandskommandos nach oben und unten in Bildgruppen nichts nützen. So kann man zwei Zeilenumbrüche jeweils hinter den Link des Bildes setzen, das das letzte einer Zeile sein soll. Im Folgenden habe ich zwei Zeilenumbrüche hinter den Link des dritten Bildes gesetzt.





Will man die Bilder-Gruppe nun anders ausrichten als links, dann kann man sie markieren (erstes Bild anklicken und dann die Hochstelltaste gedrückt halten und auf die Pfeil-nach-rechts-Taste tippen bis alle Bilder markiert sind) und per Ausrichtungs-Button in der Editorleiste die Bilder gemeinsam mittig oder rechts ausrichten. (Blockausrichtung sieht bei Bildern nicht anders aus als Linksausrichtung, weshalb nur Mittigausrichtung oder Rechtsausrichtung alternative Wahlmöglichkeiten zum links ausgerichteten Standard sind.) Folgend habe ich die Bilder-Gruppe mittig ausgerichtet.

Bei der Ausrichtung wird übrigens automatisch ein neuer DIV-Container um jede Zeile gesetzt. Will man die Bilder irgendwann neu ausrichten, muss man erst die bestehenden DIV-Container entfernen.

Man kann die Bilder aus der Situation des Gemeinsam-Mittig-Ausgerichtet-Seins heraus auch wie folgt ausrichten:

Dazu muss man auf das linke Bild einer Zeile klicken und im Bild-Menü auf "Links" klicken und auf das rechte Bild einer Zeile klicken und im Bild-Menü auf "Rechts" klicken.

Ute Ziemes, sg.utez.de, 05.06.2013