CSS Styled Content: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
 
Zeile 19: Zeile 19:
 
=== CSS modifizieren ===
 
=== CSS modifizieren ===
 
Die einfachste Methode die Ausgabe zu beeinflussen ist das CSS der Extension anzupassen. Das kann man im TypoScript folgendermaßen machen.
 
Die einfachste Methode die Ausgabe zu beeinflussen ist das CSS der Extension anzupassen. Das kann man im TypoScript folgendermaßen machen.
 +
 +
Leicht mit 2 Konstanten angepasstes CSS für Typo3 V4:
 +
 +
Constants
  
 +
<pre>
 +
padding_textpic-right=20
 +
padding_textpic-left=20
 +
</pre>
 +
 +
Setup
 +
<pre>
 +
# cssstyledcontent
 +
plugin.tx_cssstyledcontent._CSS_DEFAULT_STYLE >
 +
plugin.tx_cssstyledcontent._CSS_DEFAULT_STYLE (
 +
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; }
 +
 +
DIV.csc-textpic DIV.csc-textpic-imagecolumn { float: left; display: inline; }
 +
 +
{$styles.content.imgtext.borderSelector} {
 +
border: {$styles.content.imgtext.borderThick}px solid {$styles.content.imgtext.borderColor};
 +
padding: {$styles.content.imgtext.borderSpace}px {$styles.content.imgtext.borderSpace}px;
 +
}
 +
 +
DIV.csc-textpic-imagewrap { padding: 0; }
 +
 +
DIV.csc-textpic IMG { border: none; }
 +
 +
DIV.csc-textpic DIV.csc-textpic-imagewrap DIV.csc-textpic-image { float: left; }
 +
 +
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; }
 +
 +
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image { float: left; }
 +
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DT { float: none; }
 +
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DD { float: none; }
 +
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DD IMG { border: none; } /* 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; }
 +
 +
DIV.csc-textpic-clear { clear: both; }
 +
 +
 +
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: {$styles.content.imgtext.colSpace}px;
 +
padding-left:  {$padding_textpic-right}px;
 +
}
 +
 +
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: {$styles.content.imgtext.colSpace}px;
 +
padding-right: {$padding_textpic-right}px;
 +
}
 +
 +
DIV.csc-textpic-center DIV.csc-textpic-imagewrap .csc-textpic-image {
 +
display: inline; /* IE fix for double-margin bug */
 +
margin-left: {$styles.content.imgtext.colSpace}px;
 +
}
 +
DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image .csc-textpic-caption { margin: 0; }
 +
DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image IMG { margin: 0; }
 +
 +
DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image { margin-bottom: {$styles.content.imgtext.rowSpace}px; }
 +
DIV.csc-textpic-equalheight DIV.csc-textpic-imagerow { margin-bottom: {$styles.content.imgtext.rowSpace}px; display: block; }
 +
DIV.csc-textpic DIV.csc-textpic-imagerow { clear: both; }
 +
 +
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; }
 +
 +
DIV.csc-textpic-intext-left DIV.csc-textpic-imagewrap,
 +
DIV.csc-textpic-intext-left-nowrap DIV.csc-textpic-imagewrap {
 +
margin-right: {$styles.content.imgtext.textMargin}px !important;
 +
}
 +
DIV.csc-textpic-intext-right DIV.csc-textpic-imagewrap,
 +
DIV.csc-textpic-intext-right-nowrap DIV.csc-textpic-imagewrap {
 +
margin-left: {$styles.content.imgtext.textMargin}px !important;
 +
}
 +
 +
 +
DIV.csc-textpic-above DIV.csc-textpic-text { clear: both; }
 +
 +
DIV.csc-textpic-center { text-align: center; /* IE-hack */ }
 +
DIV.csc-textpic-center DIV.csc-textpic-imagewrap { margin: 0 auto; }
 +
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 */ }
 +
 +
DIV.csc-textpic-right DIV.csc-textpic-imagewrap { float: right; }
 +
DIV.csc-textpic-right DIV.csc-textpic-text { clear: right; }
 +
 +
DIV.csc-textpic-left DIV.csc-textpic-imagewrap { float: left; }
 +
DIV.csc-textpic-left DIV.csc-textpic-text { clear: left; }
 +
 +
DIV.csc-textpic-intext-left DIV.csc-textpic-imagewrap { float: left; }
 +
 +
DIV.csc-textpic-intext-right DIV.csc-textpic-imagewrap { float: right; }
 +
 +
DIV.csc-textpic-intext-right-nowrap DIV.csc-textpic-imagewrap { float: right; clear: both; }
 +
* html DIV.csc-textpic-intext-right-nowrap .csc-textpic-text { height: 1%; }
 +
 +
DIV.csc-textpic-intext-left-nowrap DIV.csc-textpic-imagewrap { float: left; clear: both; }
 +
* html DIV.csc-textpic-intext-left-nowrap .csc-textpic-text { height: 1%; }
 +
)
 +
</pre>
 +
 +
Prinzipielles Vorgehen für Typo 3.8:
 
<pre>
 
<pre>
 
### CSS-cssstyledimgtext
 
### CSS-cssstyledimgtext
Zeile 25: Zeile 136:
 
plugin.tx_cssstyledimgtext._CSS_DEFAULT_STYLE (
 
plugin.tx_cssstyledimgtext._CSS_DEFAULT_STYLE (
 
   ### Inhalt des Stylesheets ###
 
   ### Inhalt des Stylesheets ###
 +
)
 +
</pre>
 +
 +
Hier die Original Definition aus einer Typo3 V.4 Installation:
 +
 +
<pre>
 +
plugin.tx_cssstyledcontent._CSS_DEFAULT_STYLE (
 +
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; }
 +
 +
DIV.csc-textpic DIV.csc-textpic-imagecolumn { float: left; display: inline; }
 +
 +
{$styles.content.imgtext.borderSelector} {
 +
border: {$styles.content.imgtext.borderThick}px solid {$styles.content.imgtext.borderColor};
 +
padding: {$styles.content.imgtext.borderSpace}px {$styles.content.imgtext.borderSpace}px;
 +
}
 +
 +
DIV.csc-textpic-imagewrap { padding: 0; }
 +
 +
DIV.csc-textpic IMG { border: none; }
 +
 +
DIV.csc-textpic DIV.csc-textpic-imagewrap DIV.csc-textpic-image { float: left; }
 +
 +
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; }
 +
 +
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image { float: left; }
 +
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DT { float: none; }
 +
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DD { float: none; }
 +
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DD IMG { border: none; } /* 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; }
 +
 +
DIV.csc-textpic-clear { clear: both; }
 +
 +
 +
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: {$styles.content.imgtext.colSpace}px;
 +
}
 +
 +
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: {$styles.content.imgtext.colSpace}px;
 +
}
 +
 +
DIV.csc-textpic-center DIV.csc-textpic-imagewrap .csc-textpic-image {
 +
display: inline; /* IE fix for double-margin bug */
 +
margin-left: {$styles.content.imgtext.colSpace}px;
 +
}
 +
DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image .csc-textpic-caption { margin: 0; }
 +
DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image IMG { margin: 0; }
 +
 +
DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image { margin-bottom: {$styles.content.imgtext.rowSpace}px; }
 +
DIV.csc-textpic-equalheight DIV.csc-textpic-imagerow { margin-bottom: {$styles.content.imgtext.rowSpace}px; display: block; }
 +
DIV.csc-textpic DIV.csc-textpic-imagerow { clear: both; }
 +
 +
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; }
 +
 +
DIV.csc-textpic-intext-left DIV.csc-textpic-imagewrap,
 +
DIV.csc-textpic-intext-left-nowrap DIV.csc-textpic-imagewrap {
 +
margin-right: {$styles.content.imgtext.textMargin}px !important;
 +
}
 +
DIV.csc-textpic-intext-right DIV.csc-textpic-imagewrap,
 +
DIV.csc-textpic-intext-right-nowrap DIV.csc-textpic-imagewrap {
 +
margin-left: {$styles.content.imgtext.textMargin}px !important;
 +
}
 +
 +
 +
DIV.csc-textpic-above DIV.csc-textpic-text { clear: both; }
 +
 +
DIV.csc-textpic-center { text-align: center; /* IE-hack */ }
 +
DIV.csc-textpic-center DIV.csc-textpic-imagewrap { margin: 0 auto; }
 +
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 */ }
 +
 +
DIV.csc-textpic-right DIV.csc-textpic-imagewrap { float: right; }
 +
DIV.csc-textpic-right DIV.csc-textpic-text { clear: right; }
 +
 +
DIV.csc-textpic-left DIV.csc-textpic-imagewrap { float: left; }
 +
DIV.csc-textpic-left DIV.csc-textpic-text { clear: left; }
 +
 +
DIV.csc-textpic-intext-left DIV.csc-textpic-imagewrap { float: left; }
 +
 +
DIV.csc-textpic-intext-right DIV.csc-textpic-imagewrap { float: right; }
 +
 +
DIV.csc-textpic-intext-right-nowrap DIV.csc-textpic-imagewrap { float: right; clear: both; }
 +
* html DIV.csc-textpic-intext-right-nowrap .csc-textpic-text { height: 1%; }
 +
 +
DIV.csc-textpic-intext-left-nowrap DIV.csc-textpic-imagewrap { float: left; clear: both; }
 +
* html DIV.csc-textpic-intext-left-nowrap .csc-textpic-text { height: 1%; }
 
)
 
)
 
</pre>
 
</pre>

Aktuelle Version vom 4. Oktober 2006, 15:14 Uhr

Die Extension CSS Styled Content (css_styled_content) ist ein wichtiger Schritt in richtung CSS basiertes und barrierefreies Design. Weitere allgemeine Infos zu dieser Entwicklung und den anderen Static Templates gibt es unter Typo3 - Static Templates.

Hier einige Infos zum Einsatz von CSS Styled Content.


Installation:[Bearbeiten]

Zur Zeit (18.1.2006) nicht im TER sondern nur in der Typo3 V.3.8 als installierbare Extension vorhanden.

Sinn macht ein Einsatz mit der aktuellen Version von css_styled_imgtext.

  1. css_styled_content im Extension Manager unter available Extensions installieren
  2. evt. css_styled_imgtext über das Online-Repository dazu installieren (ist ab Typo3 V.4 integriert)

Ab Version 4 ist die Extension css_styled_content standardmäßig in Typo3 vorhanden und die Extension css_styled_imgtext darin integriert.


Modifizieren der Ausgabe von css_styled_imgtext[Bearbeiten]

CSS modifizieren[Bearbeiten]

Die einfachste Methode die Ausgabe zu beeinflussen ist das CSS der Extension anzupassen. Das kann man im TypoScript folgendermaßen machen.

Leicht mit 2 Konstanten angepasstes CSS für Typo3 V4:

Constants 

padding_textpic-right=20
padding_textpic-left=20

Setup 

# cssstyledcontent
plugin.tx_cssstyledcontent._CSS_DEFAULT_STYLE >
plugin.tx_cssstyledcontent._CSS_DEFAULT_STYLE (
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; }

DIV.csc-textpic DIV.csc-textpic-imagecolumn { float: left; display: inline; }

{$styles.content.imgtext.borderSelector} {
border: {$styles.content.imgtext.borderThick}px solid {$styles.content.imgtext.borderColor};
padding: {$styles.content.imgtext.borderSpace}px {$styles.content.imgtext.borderSpace}px;
}

DIV.csc-textpic-imagewrap { padding: 0; }

DIV.csc-textpic IMG { border: none; }

DIV.csc-textpic DIV.csc-textpic-imagewrap DIV.csc-textpic-image { float: left; }

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

DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image { float: left; }
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DT { float: none; }
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DD { float: none; }
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DD IMG { border: none; } /* 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; }

DIV.csc-textpic-clear { clear: both; }


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: {$styles.content.imgtext.colSpace}px;
padding-left:  {$padding_textpic-right}px;
}

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: {$styles.content.imgtext.colSpace}px;
padding-right: {$padding_textpic-right}px;
}

DIV.csc-textpic-center DIV.csc-textpic-imagewrap .csc-textpic-image {
display: inline; /* IE fix for double-margin bug */
margin-left: {$styles.content.imgtext.colSpace}px;
}
DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image .csc-textpic-caption { margin: 0; }
DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image IMG { margin: 0; }

DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image { margin-bottom: {$styles.content.imgtext.rowSpace}px; }
DIV.csc-textpic-equalheight DIV.csc-textpic-imagerow { margin-bottom: {$styles.content.imgtext.rowSpace}px; display: block; }
DIV.csc-textpic DIV.csc-textpic-imagerow { clear: both; }

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

DIV.csc-textpic-intext-left DIV.csc-textpic-imagewrap,
DIV.csc-textpic-intext-left-nowrap DIV.csc-textpic-imagewrap {
margin-right: {$styles.content.imgtext.textMargin}px !important;
}
DIV.csc-textpic-intext-right DIV.csc-textpic-imagewrap,
DIV.csc-textpic-intext-right-nowrap DIV.csc-textpic-imagewrap {
margin-left: {$styles.content.imgtext.textMargin}px !important;
}


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

DIV.csc-textpic-center { text-align: center; /* IE-hack */ }
DIV.csc-textpic-center DIV.csc-textpic-imagewrap { margin: 0 auto; }
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 */ }

DIV.csc-textpic-right DIV.csc-textpic-imagewrap { float: right; }
DIV.csc-textpic-right DIV.csc-textpic-text { clear: right; }

DIV.csc-textpic-left DIV.csc-textpic-imagewrap { float: left; }
DIV.csc-textpic-left DIV.csc-textpic-text { clear: left; }

DIV.csc-textpic-intext-left DIV.csc-textpic-imagewrap { float: left; }

DIV.csc-textpic-intext-right DIV.csc-textpic-imagewrap { float: right; }

DIV.csc-textpic-intext-right-nowrap DIV.csc-textpic-imagewrap { float: right; clear: both; }
* html DIV.csc-textpic-intext-right-nowrap .csc-textpic-text { height: 1%; }

DIV.csc-textpic-intext-left-nowrap DIV.csc-textpic-imagewrap { float: left; clear: both; }
* html DIV.csc-textpic-intext-left-nowrap .csc-textpic-text { height: 1%; }
)

Prinzipielles Vorgehen für Typo 3.8: 

### CSS-cssstyledimgtext
plugin.tx_cssstyledimgtext._CSS_DEFAULT_STYLE >
plugin.tx_cssstyledimgtext._CSS_DEFAULT_STYLE (
   ### Inhalt des Stylesheets ###
)

Hier die Original Definition aus einer Typo3 V.4 Installation: 

plugin.tx_cssstyledcontent._CSS_DEFAULT_STYLE (
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; }

DIV.csc-textpic DIV.csc-textpic-imagecolumn { float: left; display: inline; }

{$styles.content.imgtext.borderSelector} {
border: {$styles.content.imgtext.borderThick}px solid {$styles.content.imgtext.borderColor};
padding: {$styles.content.imgtext.borderSpace}px {$styles.content.imgtext.borderSpace}px;
}

DIV.csc-textpic-imagewrap { padding: 0; }

DIV.csc-textpic IMG { border: none; }

DIV.csc-textpic DIV.csc-textpic-imagewrap DIV.csc-textpic-image { float: left; }

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

DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image { float: left; }
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DT { float: none; }
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DD { float: none; }
DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image DD IMG { border: none; } /* 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; }

DIV.csc-textpic-clear { clear: both; }


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: {$styles.content.imgtext.colSpace}px;
}

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: {$styles.content.imgtext.colSpace}px;
}

DIV.csc-textpic-center DIV.csc-textpic-imagewrap .csc-textpic-image {
display: inline; /* IE fix for double-margin bug */
margin-left: {$styles.content.imgtext.colSpace}px;
}
DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image .csc-textpic-caption { margin: 0; }
DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image IMG { margin: 0; }

DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image { margin-bottom: {$styles.content.imgtext.rowSpace}px; }
DIV.csc-textpic-equalheight DIV.csc-textpic-imagerow { margin-bottom: {$styles.content.imgtext.rowSpace}px; display: block; }
DIV.csc-textpic DIV.csc-textpic-imagerow { clear: both; }

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

DIV.csc-textpic-intext-left DIV.csc-textpic-imagewrap,
DIV.csc-textpic-intext-left-nowrap DIV.csc-textpic-imagewrap {
margin-right: {$styles.content.imgtext.textMargin}px !important;
}
DIV.csc-textpic-intext-right DIV.csc-textpic-imagewrap,
DIV.csc-textpic-intext-right-nowrap DIV.csc-textpic-imagewrap {
margin-left: {$styles.content.imgtext.textMargin}px !important;
}


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

DIV.csc-textpic-center { text-align: center; /* IE-hack */ }
DIV.csc-textpic-center DIV.csc-textpic-imagewrap { margin: 0 auto; }
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 */ }

DIV.csc-textpic-right DIV.csc-textpic-imagewrap { float: right; }
DIV.csc-textpic-right DIV.csc-textpic-text { clear: right; }

DIV.csc-textpic-left DIV.csc-textpic-imagewrap { float: left; }
DIV.csc-textpic-left DIV.csc-textpic-text { clear: left; }

DIV.csc-textpic-intext-left DIV.csc-textpic-imagewrap { float: left; }

DIV.csc-textpic-intext-right DIV.csc-textpic-imagewrap { float: right; }

DIV.csc-textpic-intext-right-nowrap DIV.csc-textpic-imagewrap { float: right; clear: both; }
* html DIV.csc-textpic-intext-right-nowrap .csc-textpic-text { height: 1%; }

DIV.csc-textpic-intext-left-nowrap DIV.csc-textpic-imagewrap { float: left; clear: both; }
* html DIV.csc-textpic-intext-left-nowrap .csc-textpic-text { height: 1%; }
)
Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=CSS_Styled_Content&oldid=18425“