CSS Styled Content: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
 
(2 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 9: Zeile 9:
  
 
Sinn macht ein Einsatz mit der aktuellen Version von css_styled_imgtext.
 
Sinn macht ein Einsatz mit der aktuellen Version von css_styled_imgtext.
 +
 +
# css_styled_content im Extension Manager unter available Extensions installieren
 +
# 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 ==
 +
=== CSS modifizieren ===
 +
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>
 +
### CSS-cssstyledimgtext
 +
plugin.tx_cssstyledimgtext._CSS_DEFAULT_STYLE >
 +
plugin.tx_cssstyledimgtext._CSS_DEFAULT_STYLE (
 +
  ### 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>

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“