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
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 - 2. Jan. 2013, 16:41 - Rubrik: HTML und CSS
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:
- Im Beitrag folgenden HTML-Code für ein linksseitiges Bild verwenden:
- 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:
- Nach einem umfließenden Paragraphen sollte man diese Funktion mit diesem Code wieder neutralisieren:
Viel Spaß beim Ausprobieren!.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; }
<p class="imgleft">
<img src="https://meinebildadresse.jpg" width="200" />
<span>Meine linke Bildunterschrift</span>
</p>
Meine linke Bildunterschrift
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Meine rechte Bildunterschrift
<div class="clear"></div>
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>