[mensch]

Moin,
folgendes Ziel verfolge ich: Innerhalb eines Contents egal ob links, rechts, mittig etc. mehrere Bilder (gleicher Höhe und Breite) genau nebeneinander ohne Abstand zu positionieren.
Folgendes Problem habe ich: Je nach Art der Positionierung und sowieso werden in dem erzeugten HTML-Code trotz expliziter Breitenangabe unterschiedliche Breiten im Style-Parameter der jeweiligen Klasse ausgegeben. Somit habe ich KEINE Steuerungsmöglichkeit über meine CSS, die ich aber brauche.

Bei folgenden Beispielen habe ich drei Bilder (haben alle drei die gleichen Maße) explizit mit einer Breitenangabe von 50 angegeben und einer Borderangabe (Borderdicke übrigens 1px anstelle 2px im Default-CSS-Style). Bei der Bildbreite berücksichtig er anscheinend den Rahmen mit der Defaultdicke und somit erhalte ich bei der image-Class 54px anstelle 52px, habe somit einen unwillkürlichen Abstand von 2px, aber damit noch nicht genug, denn folgende weiteren Breitenangaben erhalte ich bei:

Bild oben links + Bild unten links +
Bild im Text links + 2-spaltig Bild links
1. Bild: imagecolumn-Class 64px, firstcol-Class 54 px, img 50
2. Bild: imagecolumn-Class 64px, image-Class 54 px, img 50
3. Bild: imagecolumn-Class 54px, lastcol-Class 54 px, img 50

Bild oben mittig + Bild unten mittig +
Bild oben rechts + Bild unten rechts +
Bild im Text rechts + 2-spaltig Bild rechts
1. Bild: imagecolumn-Class 54px, firstcol-Class 54 px, img 50
2. Bild: imagecolumn-Class 64px, image-Class 54 px, img 50
3. Bild: imagecolumn-Class 64px, lastcol-Class 54 px, img 50

mit folgendem Beispiel-HTML-Code:

<div class="textebilder"> <div class="csc-textpic csc-textpic-left csc-textpic-above csc-textpic-border"><br /> <div class="csc-textpic-imagewrap"><br /> <div class="csc-textpic-imagecolumn" style="width:64px;"><br /> <dl class="csc-textpic-image csc-textpic-firstcol" style="width:54px;"><br /> <dt><img src="bild1.jpg" width="50" height="71" alt="" /></dt><br /> </dl><br /> </div><br /> <div class="csc-textpic-imagecolumn" style="width:64px;"><br /> <dl class="csc-textpic-image" style="width:54px;"> <dt><img src="bild2.jpg" width="50" height="71" alt="" /></dt> </dl> </div> <div class="csc-textpic-imagecolumn" style="width:54px;"> <dl class="csc-textpic-image csc-textpic-lastcol" style="width:54px;"> <dt><img src="bild3.jpg" width="50" height="71" alt="" /></dt> </dl> </div> </div> <div class="csc-textpic-text"><p>Bild oben links</p></div> </div> <div class="csc-textpic-clear"><!-- --></div> </div>

Habe zwar versucht dies zu recherchieren, habe einiges gefunden, aber die Lösung nicht.
Kann mir jemand helfen, gibt es irgendeine Möglichkeit, dies zu steuern?

Gruss Mensch

[mensch]

Durch Modifizierung kann erreicht werden, dass man für Bilder eigene Klassen definiert. Eintrag im TyposcriptTemplate der Rootseite:

Typoscript-Code:

1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44: 45: 46: 47: 48: 49: 50: 51: 52: 53: 54: 55: 56: 57: 58: 59:

tt_content.image.20 = USER tt_content.image.20 { imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap" style="width:{register:totalwidth}px;"> | </div> imageStdWrapNoWidth.wrap = <div class="csc-textpic-imagewrap"> | </div> imageColumnStdWrap.dataWrap = <div class="csc-textpic-imagecolumn" style="width:{register:columnwidth}px;"> | </div> layout = CASE layout { key.field = imageorient default = TEXT default.value = <div class="csc-textpic csc-textpic-center csc-textpic-above###CLASSES###">###IMAGES######TEXT###</div><div class="csc-textpic-clear"><!-- --></div> 1 = TEXT 1.value = <div class="csc-textpic csc-textpic-right csc-textpic-above###CLASSES###">###IMAGES######TEXT###</div><div class="csc-textpic-clear"><!-- --></div> 2 = TEXT 2.value = <div class="csc-textpic csc-textpic-left csc-textpic-above###CLASSES###">###IMAGES######TEXT###</div><div class="csc-textpic-clear"><!-- --></div> 8 = TEXT 8.value = <div class="csc-textpic csc-textpic-center csc-textpic-below###CLASSES###">###TEXT######IMAGES###</div><div class="csc-textpic-clear"><!-- --></div> 9 = TEXT 9.value = <div class="csc-textpic csc-textpic-right csc-textpic-below###CLASSES###">###TEXT######IMAGES###</div><div class="csc-textpic-clear"><!-- --></div> 10 = TEXT 10.value = <div class="csc-textpic csc-textpic-left csc-textpic-below###CLASSES###">###TEXT######IMAGES###</div><div class="csc-textpic-clear"><!-- --></div> 17 = TEXT 17.value = <div class="csc-textpic csc-textpic-intext-right###CLASSES###">###IMAGES######TEXT###</div> 18 = TEXT 18.value = <div class="csc-textpic csc-textpic-intext-left###CLASSES###">###IMAGES######TEXT###</div> 25 = TEXT 25.value = <div class="csc-textpic csc-textpic-intext-right-nowrap###CLASSES###">###IMAGES###<div style="margin-right:{register:rowWidthPlusTextMargin}px;">###TEXT###</div></div><div class="csc-textpic-clear"><!-- --></div> 25.insertData = 1 26 = TEXT 26.value = <div class="csc-textpic csc-textpic-intext-left-nowrap###CLASSES###">###IMAGES###<div style="margin-left:{register:rowWidthPlusTextMargin}px;">###TEXT###</div></div><div class="csc-textpic-clear"><!-- --></div> 26.insertData = 1 } rendering { dl { imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow" style="width:{register:rowwidth}px;"> | </div> noRowsStdWrap.wrap = oneImageStdWrap.dataWrap = <dl class="csc-textpic-image###CLASSES###" style="width:{register:imagespace}px;"> | </dl> imgTagStdWrap.wrap = <dt> | </dt> editIconsStdWrap.wrap = <dd> | </dd> caption.wrap = <dd class="csc-textpic-caption"> | </dd> } ul { imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow" style="width:{register:rowwidth}px;"><ul> | </ul></div> noRowsStdWrap.wrap = <ul> | </ul> oneImageStdWrap.dataWrap = <li class="csc-textpic-image###CLASSES###" style="width:{register:imagespace}px;"> | </li> imgTagStdWrap.wrap = editIconsStdWrap.wrap = <div> | </div> caption.wrap = <div class="csc-textpic-caption"> | </div> } div { imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow" style="width:{register:rowwidth}px;"> | </div> noRowsStdWrap.wrap = oneImageStdWrap.dataWrap = <div class="csc-textpic-image###CLASSES###" style="width:{register:imagespace}px;"> | </div> imgTagStdWrap.wrap = <div> | </div> editIconsStdWrap.wrap = <div> | </div> caption.wrap = <div class="csc-textpic-caption"> | </div> } } renderMethod = dl }

Anbei die passenden CSS-Klassen:

.align-right { text-align:right; }
.align-left { text-align:left; }
.align-center { text-align:center; }

.csc-textpic-clear { clear:both; }
.csc-textpic-imagewrap { padding:0px; }

dl.csc-textpic-image { margin:0px; }
dl.csc-textpic-image dd { margin:0px; }
dl.csc-textpic-image dt { display:inline; margin:0px; }

.csc-textpic img { border:medium none; }

html .csc-textpic-intext-left-nowrap .csc-textpic-text { height:1%; }
html .csc-textpic-intext-right-nowrap .csc-textpic-text { height:1%; }

.csc-textpic .csc-textpic-imagecolumn { display:inline; float:left; }
.csc-textpic .csc-textpic-imagerow { clear:both; }

.csc-textpic .csc-textpic-imagewrap .csc-textpic-firstcol { margin-left:0px! important; }
.csc-textpic .csc-textpic-imagewrap .csc-textpic-lastcol { margin-right:0px! important; }

.csc-textpic .csc-textpic-imagewrap .csc-textpic-image { float:left; margin-bottom:5px; }
.csc-textpic .csc-textpic-imagewrap .csc-textpic-image .csc-textpic-caption { margin:0px; }
.csc-textpic .csc-textpic-imagewrap .csc-textpic-image img { margin:0px; }

.csc-textpic .csc-textpic-imagewrap dl.csc-textpic-image { float:left; }
.csc-textpic .csc-textpic-imagewrap dl.csc-textpic-image dd { float:none; }
.csc-textpic .csc-textpic-imagewrap dl.csc-textpic-image dd img { border:medium none; }
.csc-textpic .csc-textpic-imagewrap dl.csc-textpic-image dt { float:none; }

.csc-textpic .csc-textpic-imagewrap ul { padding:0px; margin:0px; list-style-type:none; }
.csc-textpic .csc-textpic-imagewrap ul li { padding:0px; float:left; margin:0px; }

.csc-textpic-above .csc-textpic-text { clear:both; }

.csc-textpic-border .csc-textpic-imagewrap .csc-textpic-image img { border:black 2px solid; padding:0px;  }

.csc-textpic-caption-c .csc-textpic-caption { text-align:center; }
.csc-textpic-caption-l .csc-textpic-caption { text-align:left; }
.csc-textpic-caption-r .csc-textpic-caption { text-align:right; }

.csc-textpic-center { text-align:center; }
.csc-textpic-center .csc-textpic-imagewrap { margin:0px auto; }
.csc-textpic-center .csc-textpic-imagewrap .csc-textpic-image { display:inline; margin-left:10px; text-align:left; }
.csc-textpic-center .csc-textpic-text { text-align:left; }

.csc-textpic-equalheight .csc-textpic-imagerow { display:block; margin-bottom:5px; }

.csc-textpic-intext-left .csc-textpic-imagewrap { float:left; margin-right:10px! important; }
.csc-textpic-intext-left .csc-textpic-imagewrap .csc-textpic-image { display:inline; margin-right:10px; }
.csc-textpic-intext-left-nowrap .csc-textpic-imagewrap .csc-textpic-image { display:inline; margin-right:10px; }
.csc-textpic-intext-left-nowrap .csc-textpic-imagewrap { clear:both; float:left; margin-right:10px! important; }

.csc-textpic-intext-right .csc-textpic-imagewrap { float:right; margin-left:10px! important; }
.csc-textpic-intext-right .csc-textpic-imagewrap .csc-textpic-image { display:inline; margin-left:10px; }
.csc-textpic-intext-right-nowrap .csc-textpic-imagewrap .csc-textpic-image { display:inline; margin-left:10px; }
.csc-textpic-intext-right-nowrap .csc-textpic-imagewrap { clear:both; float:right; margin-left:10px! important; }

.csc-textpic-left .csc-textpic-imagewrap { float:left; }
.csc-textpic-left .csc-textpic-imagewrap .csc-textpic-image { display:inline; margin-right:10px; }
.csc-textpic-left .csc-textpic-text { clear:left; }

.csc-textpic-right .csc-textpic-imagewrap { float:right; }
.csc-textpic-right .csc-textpic-imagewrap .csc-textpic-image { display:inline; margin-left:10px; }
.csc-textpic-right .csc-textpic-text { clear:right; }

Wenn es eine bessere Möglichkeit gibt, würde ich mich über Rückmeldung freuen.
Gruss Mensch