5202

ein Blog über technische Fragen zu Blogger

Bilder linksbündig am Text ausrichten

von
Bilder lassen sich in Blogger nicht linksbündig am Text ausgerichtet - ihr könnt das ausprobieren und im Vorlagen-Designer > Breite anpassen die Blogbreite verkleinern wie ihr wollt, trotzdem werdet ihr es nicht schaffen, eure Bilder links ohne Rand zu bekommen. Die Frage wurde schon wirklich sehr oft gestellt (unter anderem x mal im Blogger Hilfe-Forum) und meines Wissen noch nie ernsthaft beantwortet. Heute also mal wieder eine Premiere :=)

Das Problem

Auf Bild1 seht ihr das Problem - wenn ihr eure Blogbreite so einstellt, dass euer Bild gleich breit wie euer Text ist oder euer Bild im Editor 'linksbündig' steht, bleibt trotzdem immmer links vom Bild ein Rand.

Bild1: Bilder sind in Blogger nicht linksbündig
Padding
Dieser Rand hat zwei Ursachen, nämlich einmal ein padding (innerer Rand) von 8px um jedes Bild. Ihr seht diesen Rand als lila Balken um meine Testbild:

Padding von 8px (lila Balken)
Margin
Während das padding mit CSS gemacht ist, gibt es noch in zweiten Rand - geschrieben als Attribut im HTML - nämlich ein margin (äußerer Rand) von 1em:

Margin von 1em (gelber Strich)

Die Lösung

Den inneren Rand vom Bild (padding) bekommt ihr leicht mit CSS weg:
Padding löschen
Vorlagen Designer > eigene CSS
.separator img {
  padding: 0
}
Zum anwenden drückt hinter der letzten geschweiften Klammer } der letzten Zeile die Taste 'Eingabe' [Enter] - zum sichern der Änderung benützt ihr die Taste 'Auf Blog anwenden'.
Margin
Yeah - kommen wir jetzt zum lustigen Teil! Wenn ihr das padding gelöscht habt, bleibt trotzdem noch links ein Rand, der sich hartnäckig jeder Änderung widersetzt. Das liegt daran, dass der Blogger-Editor diesen Rand direkt als style Anweisung in das HTML schreibt und ihr das nicht mit CSS überschreiben könnt. Ihr könntet natürlich rein theoretisch alles händisch im HTML umschreiben - um dabei vermutlich die Hälfte eurer Bilder zu zerschießen und anschließend versucht ihr stundenlang eure Posts wieder zu reparieren --> fail. Wir machen das jetzt einfacher und überschreiben die Attribute mit Javascript
Dazu sucht ihr diese Stelle im HTML:
</head>
(Verwechselt das bitte unter keinen Umständen damit!)
<head>
Den </head> Tag gibt es nur einmal im Blog und direkt darüber kopiert ihr dieses Script:
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){
 $('.separator').find('img').each(function(n, image){
        var image = $(image);
        image.parent().css('margin-left',0).css('margin-right',0);
    });
});
//]]></script>
Erklärung
Das Script such das A-Element von jedem Bild und setzt die Attribute für den linken und den rechten äußeren Rand auf 0 - und das automatisch für alle mit dem Blogger-Editor hochgeladene Bilder. Falls ihr also eure Bilder mit einem anderen Editor - etwa mit dem Windows Live Writer - in den Blog ladet, wird das nicht funktionieren. Das Script ist 'unaufdringlich', d.h. ein Besucher mit Javascript kann euren Blog ganz normal sehen, nur eben mit einem kleinen 'Randfehler'

Kommentar

Ich hoffe das klappt alles - wenn was unklar ist oder nicht funktioniert, hinterlasst einen Kommentar. Wenn alles klar ist und funktioniert, könnt ihr natürlich auch einen Kommenatar hinterlassen ... :=)