Detail-Positionierung des Standard-Bildobjektes

Das Rendering des Bildobjektes erzeugt (seit ZMS 2.9.4) im Falle von Textumfluss sowie in Abhängigkeit von der Bildausrichtung eine Klassen-Erweiterung für ZMSGraphic-DIV bzw. graphic-DIV. Es handelt sich um eine Style-Addition mit deren Hilfe man fallweise die Abstände zum umfliessenden Text bzw. zum entgegengesetzten Seitenrand regeln kann. Für die Klassen-Erweiterung wird dem ZMSGraphic ein logisches floatleft bzw. floatright angehängt. Z.B. sorgt das Styling floatleft per default, dass das Bild rechts fliesst, also links von der Textumgebung umflossen wird. Analog besitzt der innere, das img-Element umschliessende Container div.graphic eine zusätzlliche alignright-Klasse, damit der Absatz zum rechtsumfliessenden Text definiert werden kann - während der Abstand zum linken Rand üblicherweise auf Null gesetzt wird (siehe CSS-Beispiel weiter unten).

• class="ZMSGraphic floatleft" bzw.
  class="ZMSGraphic floatright"
• class="graphic alignleft" bzw.
  class="graphic alignright"

<div class="ZMSGraphic floatleft" id_fix="e4711">
	<div class="graphic alignright" 
		style="float:left;text-align:right;width:70px;">
		<img src="http://www.myzms.de/e4711/Koch70px.jpg" 
			style="width:70px;height:95px;display:block;"
			longdesc="e4711?longdesc=attr_dc_description&lang=ger"
			class="img" 
			title="Robert Koch" 
			alt="Portrait" />
	</div>
	<div style="text-align:left;" class="text">
		<p class="caption">Robert Koch, 1843-1910</p>
</div>
	<div class="clearfloating" style="clear:both"> </div>
</div>

Beispiel für eine simple Abstandregelung:

/*************************/
/* ZMSGraphic */
/*************************/

div.ZMSGraphic div.alignleft,
div.ZMSGraphic.floatleft {
 margin-right: 1em;
}

div.ZMSGraphic div.alignright,
div.ZMSGraphic.floatright {
 margin-left: 1em;
}