Donnerstag, 23. März 2006
Bilder - nebeneinander - und Text
Moin alle zusammen,

ich weiß, hier werden Sie geholfen ;-)). Deshalb nach langem, vergeblichen Suchen (wahrscheinlich habe ich lediglich das falsche Suchwort eingegeben) hier eine, bzw. zwei Fragen:

1. Wie kann ich Bilder nebeneinander in den Blog stellen - also in den mittleren Teil...?

2. Was muß ich tun,wenn ich ein Bild mit Text DANEBEN haben möchte?

Leider bin ich der meisten HTML-Befehle nicht mächtig, eben ein echter Dummie *schäm*, aber auch im Blog-Buch habe ich nichts Passendes darüber gefunden.

Wäre toll, wenn mir jemand helfen könnte...
Liebe Grüße
Suse

Bilder nebeneinander zu setzen (so wie hier) ist ganz leicht: Einfach nur die Bildmakros nacheinander in den Text schreiben, ohne Zeilenumbruch dazwischen, aber vielleicht mit Leerzeichen. Also z.B.:

<% image name="xxxx" %> <% image name="yyyy" %> <% image name="zzzz" %>

Für umflossene Bilder (so wie hier) brauchts ein wenig CSS. In dem Beispiel wurden die Bilder mit ein paar Attributen eingefügt, und zwar so:

<% image name="zzz" align="left" style="margin:20px;" %>Hier kommt dann der Text hin hier kommt dann der Text hin hier kommt dann der Text hin hier kommt dann der Text hin hier kommt dann der Text hin hier kommt dann der Text hin

align="left" bedeutet linksbündig, die margin-Angabe regelt die Breite der Ränder zwischen Bild und umlaufendem Text. Hier müssen Sie ggf. etwas mit der Zahl experimentieren, bis es für Ihr Blog passt.

Rechtsbündig geht das natürlich auch (so wie hier). Dafür ersetzen Sie nur "left" durch "right". Der Code sieht dann so aus:

<% image name="zzz" align="right" style="margin:20px;" %>Hier kommt dann der Text hin hier kommt dann der Text hin hier kommt dann der Text hin hier kommt dann der Text hin hier kommt dann der Text hin hier kommt dann der Text hin
ichichich, 23. Mär 2006, 15:54  | link
 
Ich definiere den Abstand um das Bild mit hspace=5 oder vspace=5. Was ist da jetzt genau der Unterschied zu style="margin:20px;" ?
yetused, 23. Mär 2006, 21:42  | link
 
15 Pixel. :-)

hspace + vspace sind veraltet (werden aber wohl noch von allen Browsern verstanden)
blue sky, 23. Mär 2006, 21:54  | link
 
Nee, stimmt ja gar nicht. Da das margin-Teil wahrscheinlich einen einheitlichen Rand außenrum definiert und man mit hspace und vspace oben/unten und rechts/links definieren kann. So denk ich mir da jetzt mal.
yetused, 23. Mär 2006, 23:49  | link
 
Ja, gut. Ganz genau genommen, könnte man das mit Margin aber auch, sogar unterschiedlich für alle vier Richtungen: margin: 20px 5px 10px 5px; (oben, rechts, unten, links)
blue sky, 23. Mär 2006, 23:54  | link
 
Danke!
Auf diesem Wege noch einmal vielen herzlichen Dank für Eure schnelle Hilfe. Es klappt wunderbar - ich habe mir jetzt einfach für alle Fälle mal eine Datei mit diesen ganzen Tricks und Tipps angelegt. Ohne Euch wäre ich so manches Mal ganz schön aufgeschmissen gewesen... *seufz*.

Liebe Grüße
Suse
suse meyer, 31. Mär 2006, 22:28  | link
 
Ich habe eben versucht, Bilder nebeneinanderzusetzen, indem ich einfach die Bildmakros nebeneinander gesetzt habe. Wie oben beschrieben. Leider habe ich zwischen den Bildern nun jeweils einen riesigen Abstand. Wie kann ich den denn reduzieren?
bluetenstaub, 05. Apr 2007, 00:19  | link
 
Sie haben die Inhalte der Stories im Stylesheet auf "Justify" gestellt. Deshalb "treiben" die Bilder nach links und rechts aus. Für Beiträge mit solchen Bildfolgen müßte man dann in der betreffenden Story den Justify-Befehl erst einmal ausschalten. Wie man das am elegantesten macht, wissen Herr BlueSky oder Herr ichichich aber besser.
kid37, 05. Apr 2007, 00:27  | link
 
Ach, stimmt, das hab' ich ja mit meinem Blocksatz selbst verbockt. :)

Dann warte ich mal, ob die beiden Herren sich noch zu Wort melden.
bluetenstaub, 05. Apr 2007, 00:51  | link
 
Wenn ich das genau wie beschrieben eingebe, verschiebt sich leider auch die Zeile comment, bearbeiten etc. nach oben einfach unter den Text. Zudem schiebt sich der Beitrag halb über den vorigen auf der Startseite.
Was ist falsch, bitte?
flying turtle, 19. Jul 2010, 16:28  | link