Hallo liebe Typo3 Gemeinde,
ich bin noch recht neu auf dem Typo3 Gebiet. Bei der Erstellung eines Layout für eine Homepage hab ich das Problem, das zwischen Bild und der dazugehörigen Bildunterschrift ein paar Pixel Platz sind. Ich habe schon im Internet gestöbert und das <br> Problem gefunden. Leider haben diese Lösungen nicht gebracht, da ich aber auch im Quelltext kein <br> finde, bin ich auch nicht wirklich davon ausgegangen...
<!-- Image block: [begin] -->
<div class="csc-textpic csc-textpic-center csc-textpic-above">
<div class="csc-textpic-imagewrap" style="width:168px;">
<dl class="csc-textpic-image csc-textpic-lastcol" style="width:168px;">
<dt>
<a href="index.php?id=61">
<img src="uploads/pics/001199_02.jpg" width="168" height="173" alt="" /></a>
</dt>
<dd class="csc-textpic-caption">Programmfolge</dd>
</dl>
</div>
</div>
<div class="csc-textpic-clear"><!-- -->
</div>
<!-- Image block: [end] -->
Es wäre super, wenn ihr mir ein wenig helfen könntet...
Danke
Schon mal was von CSS gehört?
Du hast recht, hab mein Problem noch nicht genau beschrieben...
Ich arbeite mit CSS finde nur Hebel für mein Problem nicht. Hier einfach mal die CSS Anweisungen für das Image+Caption. Weiter muss ich sagen, ich arbeite unter MacOS und da hab ich das Problem mit dem Safari und Firefox, eben habe ich aber mal unter Windows mit dem IE probiert und siehe da, da sieht alles richtig aus, also kein Abstand zwischen Bild und Caption.
/* ###########################
** ### 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:2px solid black; padding: 0px;}
DIV.csc-textpic-imagewrap {padding:0;}
DIV.csc-textpic IMG {border:none;padding: 0;margin: 0;}
/* 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;padding: 0;
border: 7px solid #fff;
margin-bottom: 7px;
}
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DT {float:none; margin: 0px;padding: 0px;}
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DD {float:none; margin: 0px;padding: 0;}
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DD IMG {border:none; margin: 0px;padding: 0;} /* FE-Editing Icons */
DL.csc-textpic-image {margin:0;padding: 0;}
DL.csc-textpic-image DT {margin:0px; display:inline;}
DL.csc-textpic-image DD {margin: 0px;padding: 0;}
/* Clearer */
DIV.csc-textpic-clear {clear:both;}
/* 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:0px;
}
/* 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:0px;
}
/* Pictures centered, add margin on left */
DIV.csc-textpic-center DIV.csc-textpic-imagewrap .csc-textpic-image {
display:inline;
margin-left: 0px;
}
DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image .csc-textpic-caption {margin:0;
padding-left: 5px;
padding-top: 3px;
}
dd.csc-textpic-caption { background-color:#E0E7F5; padding:0; height: 20px;}
DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image IMG {margin:0;padding: 0;}
/* Space below each image (also in-between rows) */
DIV.csc-textpic-equalheight DIV.csc-textpic-imagerow {margin-bottom:0px; 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;}
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 */
Normal sucht man ja wegen eines Bugs im IE, diesmal andersherum. Vielleicht kann mir ja jemand einen Tipp geben.
Hol Dir Firebug oder für IE die Webdeveloper Toolbar. Damit findest Du schnell die richtig Stelle in Deinem CSS.
Gruß
Michael