5202

ein Blog über technische Fragen zu Blogger

Blogger: Bilder mit HTML nebeneinander stellen

von

Update

Bitte beachten: Ich habe in der Zwischenzeit eine Lösung gefunden, die das Problem mehrere-Bilder-in-einer-Reihe nur mit dem Blogger-Editor hinbekommt.

Vor einiger Zeit habe ich darüber geschrieben, wie sich das klassische Blogger Problem "drei-Bilder-nebeneinander" mithilfe einer Tabelle lösen läst. Das funktioniert schnell und gut. Okay, Tabellen klingen irgendwie nach letztem Jahrhundert und sind aus der Mode gekommen und man sollte sie nicht verwenden - aber es löst das Problem, oder?

Man kann das auch mit a bisserl CSS hinbekommen, ist nicht schwierig. Eine kurze Beschreibung dazu: Ausgangspunkt sind die Bilder aus dem vorigen Beispiel - die Aufgabe soll sein, diese drei Bilder nebeneinander anzuordnen. Im HTML-Modus des Editors habe ich sie nach diesem Muster in den Post gestellt:
<a href="Link1"><img class="bild" src="Bild1"/></a>
<a href="Link2"><img class="bild" src="Bild2"/></a>
<a href="Link3"><img class="bild" src="Bild3"/></a>
Statt Link1 kommt der Link hinein, worauf das Bild verlinken soll, statt Bild1 die Quelle von dem Bild, simpel, oder? Größe der Bilder ist erst mal egal, dass wird später korrigiert. Bitte beachtet, dass jedem Bildern eine class="bild" zugeordnet ist, das ist wichtig für die CSS später. So oder so ähnlich ist das Ergebnis davon:



Anschließend entfernt ihr die Zeilenumbrüche zwischen dem schließenden </a> und öffnenden <a> Tag.  Dort darf kein Leerzeichen sein, sonst ordnen sich Bilder nicht horizontal aus!
<a href="Link1"><img class="bild" src="Bild1"/></a><a href="Link2">
<img class="bild"  src="Bild2"/></a><a href="Link3"><img class="bild" src="Bild3"/></a>
Im HTML ist das alles, den Rest macht ihr mit CSS. Dazu geht ihr über Dashboard > Design > Vorlagen-Designer > Erweitert > CSS hinzufügen zur Box Benutzer-spezifisches CSS hinzufügen und kopiert hinein: 
.bild {
   display:blocked; 
   height:295px;
   width:214px;
   padding:10px
}
Die Werte von height und width solange anpassen, bis die drei Bilder in die Postbreite passen. Wenn drei Bilder nebeneinander Platz haben, richten sie sich automatisch horizontal aus.

Fertig!

--> Achtung: Nachdem ihr das gemacht habt, dürft ihr die Bilder auf keinen Fall mehr mit dem Post-Editor bearbeiten, weil der den Bildern eine eigene CSS-Klasse zuordnet und euch damit das Layout zerstört. Am besten testest ihr das mal in einem Probe-Post und schaut was passiert, wenn man nachträglich versucht ein Bild mit dem Editor zu bearbeiten ... nicht verzweifeln :=).