Textfluss um Bilder verbessern mit HTML & Co

1. Oktober 2011 , Geschrieben von Cebulon Veröffentlicht in #HTML & Co - Tipps zur Blogvgestaltung

In den letzten beiden Beiträgen habe ich versucht die Grundlagen zur Formatierung mit der Style-Anweisung zu erklären. Auf die Idee dazu bin ich gekommen, weil ich über etwas gestol- pert bin was mir nicht so gut gefiel, und was man mit den normalen Mitteln nicht verbessern kann. Den Textfluss um Bilder herum.

Ich selbst setze meine Bilder ja meistens in voller Breite ein. Aber, sie zu verkleinern und vom Text umfließen zu lassen, wie Overblog es beim Einfügen der Bilder anbietet hat durchaus auch seinen Reiz.

Ein Beispiel mit Beispieltext, der hier aber nur als Füllmaterial dient:

DSCI0032a

Bevor ich das Thema ad Acta lege, möchte ich denjenigen die es ausprobieren möchte noch ein paar Ratschläge ans Herz legen. Zuerst noch mal der Vorgang, wie ihn Herr Schilling in seinem Buch beschrieben hat: Man nimmt einen, nicht zu großen, Bissen in den Mund. Man hält ihn eine Weile im Mund ohne zu kauen, evtl. nagt man ihn ganz leicht an und bewegt ihn mit der Zunge im Mund herum. Das soll den Speichelfluss anregen. Hat sich genug Speichel angesammelt, zerkaut man den Bissen bis er keine festen Bestandteile mehr enthält, sich gründlich mit mit dem Speichel vermischt hat und alles zusammen nun breiig bis flüssig ist.

Hier ist mir der Text zu nahe am Bild, ich hätte da lieber einen kleinen Abstand. Keine Problem für die Style-Anweisung. Nur, wohin damit. Ich muß im HTML-Code das Bild, das hier aber nur als Link enthalten ist finden.

Den Namen des Bildes kenne ich ja. Und ich weiß das der HTML-Tag zum Einfügen von Bildern mit <img beginnt. Ich klicke also auf den HTML-Button in der Icon-Leiste und suche nun einen <img>-Tag der den entsprechenden Bildnamen, hier enthält. Der Tag den ich finde sieht so aus:

<img src="http://img.over-blog.com/275x154/2/31/08/76/Regenwetterfahrt/DSCI0032a.jpg" class="GcheTexte" alt="DSCI0032a" height="154" width="275" />

Das <img>-Tag enthält schon einige Informationen zum Bild, unter anderem den Namen, die Breite und die Höhe des Bildes. Hier muss nun irgendwo die Style-Anweisung rein. Eigentlich kann man sie überall einfügen wo ein Leerzeichen steht, aber ich füge sie der Ordnung halber vor height ein.

<img src="http://img.over-blog.com/275x154/2/31/08/76/Regenwetterfahrt/DSCI0032a.jpg" class="GcheTexte" alt="DSCI0032a" style="margin-right: 10px; margin-bottom: 10px;" height="154" width="275" />

DSCI0032a

Damit habe ich dem Bild rechts und unten einen Rand von jeweils 10 Pixeln hinzugefügt. Bei Rändern über oder unter dem Bild ist es nur so, das der Rand zwar vorhanden ist, da aber keine Textzeile mehr passt, beginnt der Text später und der Rand sieht dadurch höher aus als er ist.

Deshalb füge ich jetzt noch oben einen Rand hinzu. Vielleicht sieht das ja etwas besser aus:

DSCI0032a

Naja, Geschmackssache. Mir gefällt es jedenfalls mit Rand besser. Und wer da meiner Meinung ist kann es ja genau so machen. Zum Schluß noch mal die Formatierungs-Befehle für den Textumfluss bei Bildern:

margin-left	Rand links
margin-right	Rand rechts
margin-top	Rand oben
margin-bottom	Rand unten

Diesen Post teilen

Repost0

Den Blog stylen mit HTML & Co

Cebulon treibts spaltenweise

Zurück zur Home

Kommentiere diesen Post

Mike

04/18/2012 22:31

Hallo, wie sind denn die Werte für class="GcheTexte" ? Suche schon die ganze Zeit nach diesem Problem - möchte endlich es genauso hinbekommen wie in deinen Beispielen. :)

Antworten

Cebulon

04/19/2012 08:16

Dafür kann ich dir leider keine Werte nennen. Die entsprechenden Werte stehen ja in der CSS-Datei zum Blog und können je nach Blog-Design unterschiedlich sein. Aber was immer auch darin steht wird ja von der Style-Anweisung überschrieben, darauf kommt es ja an. Eigentlich kannst du class ignorieren (tue ich ja auch!). Man könnte natürlich, wenn man wollte die Werte aus der Style-Anweisung in die class-Anweisung der CSS-Datei übernehmen, oder eigene class-Anweisungen schreiben, dann hätte man es bequemer. Aber ich weiß jetzt gar nicht ob ich Zugriff auf die CSS-Datei meines Blogs habe, dafür habe ich mich noch nicht interessiert. Aber, wie gesagt, in meinen Beispielen kommt es nur auf die Style-Anweisung an, die ich in das vorhandene img-Tag des Bildes eingetragen habe, alles andere habe ich nicht verändert. Ich weiß nicht ob du die beiden Beiträge vor diesem gelesen hast, da erkläre ich mehr zur Style-Anweisung und gebe auch einen Link zu einer CSS-Website an. Falls nicht, schau mal rechts unter HTML & Co......., da kannst du alle drei per Klick aufrufen.