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 - und 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 JavascriptDazu 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>
Keine Kommentare:
Kommentar veröffentlichen