help.twoday.net: Bilder mit Unterschriften

Bilder mit Unterschriften

Hallo miteinander, ein schönes Neues Jahr wünsche ich!

Allerdings hätte ich da auch mal eine Frage:

Ich versuche gerade, mit CSS ein Bild mit Bildunterschrift zu basteln. Aus dem Internet habe ich folgenden Code gefunden und eingebunden:

CSS-Code in Site.style:

dl.imgleft {
float: left;
margin-right: 12px;
margin-bottom: 5px;
}

dl.imgleft dt {
margin-bottom: 0;
}

dl.imgleft dd {
margin: 0;
}

Code im Beitrag (Spitze durch eckige Klammern ersetzt):

[dl class= "imgleft" style= "width:250px;"]
[dt][img src="xy.jpg" alt="xy.jpg" title="Bildbeschreibung"/] [/dt]
[dd]Bildunterschrift]/dd]
[/dl]

Sobald ich den Beitrag speichere, wird im beginnenden [dl] die Klassen- und style-Definition weggeparst. Was mache ich falsch?

Liebe, ratlose Grüße, Sus

Corum vor 4975 Tagen

1929

4 Kommentare Kommentar verfassen

NeonWilderness vor 4975 Tagen

Hier meine Lösung für links- und rechtsseitige Bilder im Beitrag (inkl. Rahmen):

Unter Account → Weblog verwalten → Vorlagen HTML → Stylesheet (Site.style) folgenden CSS-Code an das Ende kopieren:

.storyContent p.imgleft { float:left; margin:5px 10px 0 0; }
.storyContent p.imgright { float:right; margin:5px 0 0 10px; }
.storyContent p img { border: 1px solid #666; padding:2px; }
.storyContent p span { display:block; font-size:85%; color:#666; }
.storyContent div.clear { clear:both; }

Im Beitrag folgenden HTML-Code für ein linksseitiges Bild verwenden:

<p class="imgleft">
<img src="http://meinebildadresse.jpg" width="200" />
<span>Meine linke Bildunterschrift</span>
</p>

Für ein rechtsseitiges Bild entsprechend die Klasse "imgright" anwenden
Ein nachfolgender Text fließt dabei um die Bilder herum, wie man an diesem Beispiel sehen kann:

Meine linke Bildunterschrift

Meine rechte Bildunterschrift

Nach einem umfließenden Paragraphen sollte man diese Funktion mit diesem Code wieder neutralisieren:

Viel Spaß beim Ausprobieren!

antworten

skydance vor 4975 Tagen

Das ist eine gute Lösung.

Wenn man es nur einmal braucht und nicht immer, dann kann man es auch direkt im Artikelfeld machen:

<div style="float: left; margin: 5px; "><img src="BILDADRESSE" ><br >Bildtext</div>

antworten

Corum vor 4975 Tagen

Dank Euch Beiden,

aber beim Beispiel von NeonWilderness wird die Bildunterschrift nicht automatisch am Bildrand umgebrochen...

und das Beispiel von SkyDance habe ich so ähnlich als CSS bisher immer verwendet. Hier geht die Bildunterschrift auch über das Bild hinaus...

Ich fand die Idee halt hübsch, ein Template zu haben, bei dem die Bildunterschrift sich mehr oder weniger automatisch an die Bildbreite anpaßt.

Was mich halt gewundert hat, ist die Tatsache, daß eigentlich harmlose (und m.M.n.) korrekte Code-Schnipsel einfach so rausgeschmissen werden...

Liebe Grüße und Dank schon mal, Sus

antworten

NeonWilderness vor 4975 Tagen

Zum Umbrechen der Bildunterschrift ergänzt man einfach einen width-Parameter im span-Tag:

<span style="width:200px">Meine Bildunterschrift, die total entsetzlich lang wird und ganze Romane enthält.</span>

Wenn die Bilder immer die gleiche Breite aufweisen, könnte man die width-Angabe auch direkt in das CSS-span einbauen.

antworten