Ich weiß, das ist ein liediges thema und ich habe aber dazu nicht wirklich hier im Forum Hilfe gefunden.
Die schöne Sache, Bilder in ca. 4 Spalten im BE einzufügen ist echt klasse. Allerdings nur im FF.
Der IE, egal welche Version, macht immer Probleme mit vielen Dingen, obwohl schon diverse bugfixes im ursprünglichen, schon vorhandenen CSS Code eingearbeitet worden sind.
Hier auch bei den Bilderpositionierungen. Im BE habe ich mehrere Bilder in 4 Spalten als Seiteninhalt "Nur Bilder" eingefügt. Im FF ist es so, wie es sein sollte. Aber im IE leider nicht. Dort werden die Bilder untereinander dargestellt.
Hier erst einmal der gesamte Code, der für die Bilderoptionen zuständig ist:
/* ###########################
** ### cssstyledcontent ######
** ###########################
*/
/* deleted in setup and copied to here, to make it easier to edit */
/* default styles for extension "tx_cssstyledcontent" */
/* Captions */
DIV.csc-textpic-caption-c .csc-textpic-caption {text-align:center;}
DIV.csc-textpic-caption-r .csc-textpic-caption {text-align:right;}
DIV.csc-textpic-caption-l .csc-textpic-caption {text-align:left;}
/* Needed for noRows setting */
DIV.csc-textpic DIV.csc-textpic-imagecolumn {float:left; display:inline;}
/* Border just around the image */
DIV.csc-textpic-border DIV.csc-textpic-imagewrap .csc-textpic-image IMG {border:0px solid #000; padding:0px 0px;margin; 0;}
DIV.csc-textpic-imagewrap {padding:0;}
DIV.csc-textpic IMG {border: 0px solid #000;}
/* DIV: This will place the images side by side */
DIV.csc-textpic DIV.csc-textpic-imagewrap DIV.csc-textpic-image {float:left;}
/* UL: This will place the images side by side */
DIV.csc-textpic DIV.csc-textpic-imagewrap UL {list-style:none; margin:0; padding:0;}
DIV.csc-textpic DIV.csc-textpic-imagewrap UL LI {float:left; margin:0; padding:0;}
/* DL: This will place the images side by side */
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image {float:left; display:inline;}
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DT {float:none; display:inline;}
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DD {float:none; display:inline;}
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DD IMG {border:0px solid #000;} /* FE-Editing Icons */
DL.csc-textpic-image {margin:0;}
DL.csc-textpic-image DT {margin:0; display:inline;}
DL.csc-textpic-image DD {margin: 0; display:inline;}
/* Clearer */
DIV.csc-textpic-clear {clear:both; display:inline;}
/* Margins around images: */
/* Pictures on left, add margin on right */
DIV.csc-textpic-left DIV.csc-textpic-imagewrap .csc-textpic-image,
DIV.csc-textpic-intext-left-nowrap DIV.csc-textpic-imagewrap .csc-textpic-image,
DIV.csc-textpic-intext-left DIV.csc-textpic-imagewrap .csc-textpic-image {
display:inline; /* IE fix for double-margin bug */
margin-right:10px;
}
/* Pictures on right, add margin on left */
DIV.csc-textpic-right DIV.csc-textpic-imagewrap .csc-textpic-image,
DIV.csc-textpic-intext-right-nowrap DIV.csc-textpic-imagewrap .csc-textpic-image,
DIV.csc-textpic-intext-right DIV.csc-textpic-imagewrap .csc-textpic-image {
display:inline; /* IE fix for double-margin bug */
margin-left:10px;
}
/* Pictures centered, add margin on left */
DIV.csc-textpic-center DIV.csc-textpic-imagewrap .csc-textpic-image {
display:inline; /* IE fix for double-margin bug */
margin-left:10px;
}
DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image .csc-textpic-caption {margin:0px;}
DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image IMG {margin:0px;}
/* Space below each image (also in-between rows) */
DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image {margin-bottom:5px;}
DIV.csc-textpic-equalheight DIV.csc-textpic-imagerow {margin-bottom:5px; display:block;}
DIV.csc-textpic DIV.csc-textpic-imagerow {clear: both;}
/* No margins around the whole image-block */
DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-firstcol {margin-left:0px !important;}
DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-lastcol {margin-right:0px !important;}
/* Add margin from image-block to text (in case of "Text w/ images") */
DIV.csc-textpic-intext-left DIV.csc-textpic-imagewrap,
DIV.csc-textpic-intext-left-nowrap DIV.csc-textpic-imagewrap {
margin-right:10px !important;
}
DIV.csc-textpic-intext-right DIV.csc-textpic-imagewrap,
DIV.csc-textpic-intext-right-nowrap DIV.csc-textpic-imagewrap {
margin-left:10px !important;
}
/* Positioning of images: */
/* Above */
DIV.csc-textpic-above DIV.csc-textpic-text {clear:both;}
/* Center (above or below) */
DIV.csc-textpic-center {text-align:center; /* IE-hack */}
DIV.csc-textpic-center DIV.csc-textpic-imagewrap {margin: 0 0 0 0}
DIV.csc-textpic-center DIV.csc-textpic-imagewrap .csc-textpic-image {text-align:left; /* Remove IE-hack */}
DIV.csc-textpic-center DIV.csc-textpic-text {text-align:left; /* Remove IE-hack */}
/* Right (above or below) */
DIV.csc-textpic-right DIV.csc-textpic-imagewrap {float:right;}
DIV.csc-textpic-right DIV.csc-textpic-text {clear:right;}
/* Left (above or below) */
DIV.csc-textpic-left DIV.csc-textpic-imagewrap {float:left;}
DIV.csc-textpic-left DIV.csc-textpic-text {clear:left;}
/* Left (in text) */
DIV.csc-textpic-intext-left DIV.csc-textpic-imagewrap {float:left;}
/* Right (in text) */
DIV.csc-textpic-intext-right DIV.csc-textpic-imagewrap {float:right;}
/* Right (in text, no wrap around) */
DIV.csc-textpic-intext-right-nowrap DIV.csc-textpic-imagewrap {float:right; clear:both;}
/* Hide from IE5-mac. Only IE-win sees this. \*/
* html DIV.csc-textpic-intext-right-nowrap .csc-textpic-text {height:1%;}
/* End hide from IE5/mac */
/* Left (in text, no wrap around) */
DIV.csc-textpic-intext-left-nowrap DIV.csc-textpic-imagewrap {float:left; clear:both;}
/* Hide from IE5-mac. Only IE-win sees this. \*/
* html DIV.csc-textpic-intext-left-nowrap .csc-textpic-text {height:1%;}
/* End hide from IE5/mac */
#col1DIV.csc-textpic-border DIV.csc-textpic-imagewrap .csc-textpic-image IMG {border:0px solid #fff; padding:0px 0px;}
#col1DIV.csc-textpic-imagewrap {padding:0;}
#col1DIV.csc-textpic IMG {border: 3px solid #fff;}
}
Im Quelltext steht am Anfang dazu folgendes:
<div class="csc-textpic csc-textpic-left csc-textpic-above csc-textpic-caption-c csc-textpic-equalheight"><div class="csc-textpic-imagewrap" style="width:583px;">........
Hat das was mit der Breite zu tun? Wenn ja, wo ändere ich das ab?
Habe schon damit gespielt, die linke Spalte schmaler zu machen, damit die rechte Spalte etwas mehr Raum hat. Das hat aber nix genützt.
Wenn jemand einen direkten Link benötigt, so kann er diesen gerne per PM haben.
Hoffe auf Hilfe![/img]