Sie sind hier: » ZMS home » Dokumentation » Details » How-To » Design » Bildlayout

Detail-Positionierung des Standard-Bildobjektes

Das Standard-Bildobjekt ZMSGraphic kann durch die Kombination von Text-Umfliessen und Ausrichtung der Bildlegende unterschiedliche Layout-Konstellationen bedingen, deren fall-bedingtes Styling durch die Nutzung einer CSS-Klassen-Addition möglich wird.

Screenshot des Redaktions-Interfaces für das Standard-Grafikobjekt: die Platzierung des Bildes im Layout ergibt sich durch das Zusammenwirken von [1] Bildausrichtung bzw. Umfluss, [2] Absatzausrichtung und [3] Legenden-Platzierung.

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;
}