Zum Inhalt springen

Bilder rechts neben text ohne css

Erstellt am 24. Oktober 2012 · 2 Antworten · letzte Antwort am 24. Oktober 2012

Tags: Inhaltselemente, Direct Mail, Frage

Hoge ·

Hallo, ich habe Inhaltselemente vom Typ Text mit Bild. Dort die Bilder rechts neben dem Text ausgerichtet. Um das Ganze "Newsletterkompatibel" zu bekommen verwende ich fogendes TS:

plugin.tx_directmail_pi1.siteUrl = http://www.…
config.notification_email_urlmode = all
config.prefixLocalAnchors = 1
config.baseURL = http://www.…
config.index_enable = 0
config.spamProtectEmailAddresses >
config.removeDefaultJS = 1


tx_directmail_pi1.10.template.file = fileadmin/templates/newsletter/newsletter-textversion.tmpl
tx_directmail_pi1.10.marks {
   HEADERTEXT = TEXT
   HEADERTEXT.data = field:title
   CONTENT < styles.content.get
   CONTENT.renderObj = < plugin.tx_directmail_pi1 
   FOOTER < styles.content.getBorder
   FOOTER.select.pidInList = 33
   FOOTER.renderObj = < plugin.tx_directmail_pi1
   FOOTER.wrap = ------------------------------------ |
}
page >
page = PAGE
page {
  headerData.10= TEXT
  headerData.10.value (
     <style type="text/css">
      <!--
      @charset "utf-8";
      * { margin:0px; padding:0px; }
      img, a img {border:0;}
       .csc-textpic-imagewrap {	margin-top: 20px; margin-right: 10px; margin-left:30px}
       .tex {font-family: Tahoma, Arial, Helvetica, sans-serif; color: #333333; font-size:12px; line-height:18px; margin:10px; padding-right:10px; padding-left: 20px; text-align: justify;}
       .pic {font-family: Tahoma, Arial, Helvetica, sans-serif; color: #003399; font-size:10px; line-height:18px; margin:10px; padding: 10px; padding-top:30px; valign:top}
	/*geht nicht in outlook2013*/
       .csc-textpic-intext-right-nowrap img{float:right; display:block;clear:both;margin-right:20px}
       .caption{float:right; display:block;clear:both;margin-top: 10px; font-size:11px; color: #039;margin-right:20px}
      -->
      </style>
   )
   bodyTag = <body marginheight="0" topmargin="0" marginwidth="0"  bgcolor="#7494d4" leftmargin="0" style="margin: 0px; padding:0px; background-color: #7494d4; font-family:Tahoma, Verdana, Arial, sans-serif; font-size:13px; line-height:19px; color:#333333;">
   10 = TEMPLATE
   10.template = FILE
   10.template.file = fileadmin/templates/newsletter/directmail.html
   10.marks {
      HEADERLINK = TEXT
      HEADERLINK {
      value=  klicken Sie hier 
         typolink.parameter.data = page:uid
         typolink.ATagParams = style="color:#ffffff;"
         typolink.extTarget = _blank
         typolink.target = _blank
         wrap = <p style="font-size: 11px; line-height: 15px; font-family: Tahoma, Arial, Helvetica, sans_serif; color: #cccccc; margin: 0px;">Probleme bei der Darstellung des Newsletters? Dann  |  für die Webansicht</p>
      }
         
      LOGO = IMAGE
      LOGO.file = fileadmin/newsletter/gfx/logo.gif
      
     
         
      HEADERTEXT = TEXT
      HEADERTEXT.data = field:subtitle //field:title
      HEADERTEXT.wrap =<h1 style="font-size: 14px; line-height:34px;font-family: Tahoma, Arial, Helvetica, sans_serif; color: #cccccc; margin: 0px;padding-right:20px;font-weight: bold;">|</h1>
 
      CONTENT < styles.content.get
          ## footer in border to be able to define different tags per column
      FOOTER < styles.content.getBorder
      FOOTER.select.pidInList = 33
   }
} 


## output headers
lib.stdheader.stdWrap.dataWrap = |
lib.stdheader.10 {
   1.dataWrap = <h1 style="padding:0; padding-left: 20px; padding-right: 20px; margin:20px 10px 10px 10px; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size:20px; font-weight:bold; line-height:28px; color: #003399;">|</h1>
   2.dataWrap = <h2 style="padding:0; margin:0px 10px 10px 10px; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size:16px; font-weight:normal; line-height:24px;  color: #003399;">|</h2>
   3.dataWrap = <h3 style="padding:0; margin:10px; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold; line-height:17px; color:#4E4E4E;">|</h3>
   4.dataWrap = <h4 style="padding:0; margin:10px; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold; line-height:17px; color:#333333;">|</h4>
     ## extra h2 version
   5.dataWrap = <h2 style="padding:0; margin:10px; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size:18px; font-weight:normal; line-height:24px; color:#990000"">|</h2>
} 
## style for a tag
lib.parseFunc_RTE.tags.link.typolink.ATagParams = style="color:#003399; font-weight:bold; text-decoration:none; border:0px;" 
## no class for p tag
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class >
 
## p tag for all columns
lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.style = font-family: Tahoma, Arial, Helvetica, sans-serif; color: #333333; font-size:13px; line-height:18px; margin:10px; padding: 0px;;
## p tag according to column
temp.tt_content.ptext< tt_content.text.20
tt_content.text.20 >
tt_content.text.20 = CASE
tt_content.text.20 {
  key.field=colPos
   ## column for content
   0 < temp.tt_content.ptext
   0.parseFunc.nonTypoTagStdWrap.encapsLines.addAttributes.P.style= font-family: Tahoma, Arial, Helvetica, sans-serif; color: #333333; font-size:13px; line-height:19px; margin:10px; padding-left: 20px; padding-right: 140px;text-align: justify;
 
   ## column for footer
   3 < temp.tt_content.ptext
   3.parseFunc.nonTypoTagStdWrap.encapsLines.addAttributes.P.style= font-family: Tahoma, Arial, Helvetica, sans-serif; color: #333333; font-size:8px; line-height:15px; margin:0px; padding: 0px;vertical-align: middle;
 
   default < temp.tt_content.ptext
   default.parseFunc.nonTypoTagStdWrap.encapsLines.addAttributes.P.style= font-family: Tahoma, Arial, Helvetica, sans-serif; color: #333333; font-size:13px; line-height:18px; margin:10px; padding: 0px;
}
######## css styled content ##########
## no wrap around header
tt_content.textpic.20.0.text.10.10.stdWrap.dataWrap = |
tt_content.textpic.20.text.10.10.stdWrap.dataWrap = |
tt_content.textpic.20.default.text.10.10.stdWrap.dataWrap = |
tt_content.textpic.20.text.wrap >



tt_content.image.20.renderMethod = simple
tt_content.image.20.rendering.simple.imageStdWrapNoWidth.wrap = |
tt_content.image.20.rendering.simple.imageStdWrap.dataWrap = <td>|</td>
tt_content.image.20.rendering.simple.caption.wrap = |
tt_content.image.20.layout {
default.value = <table><tr><td>###TEXT###</td><td>###IMAGES###</td></tr></table>
26.value = <table><tr><td></td><td>###IMAGES###</td></tr></table>
26.value.insertData = 1
}


## default frame
#tt_content.stdWrap.innerWrap.cObject.0 = TEXT
#tt_content.stdWrap.innerWrap.cObject.0.value = <tr><td valign="top">|</td></tr>


## frame for highlighted content
tt_content.stdWrap.innerWrap.cObject.30 = TEXT
tt_content.stdWrap.innerWrap.cObject.30.value = <tr><td valign="top"><table width="600" border="0" cellspacing="0" cellpadding="0" style="border-left:10px solid #990000;"><tr><td valign="top">|</td></tr></table></td></tr><tr><td> </td></tr>
 
## left column box
tt_content.stdWrap.innerWrap.cObject.40 = TEXT
tt_content.stdWrap.innerWrap.cObject.40.value = <tr><td valign="top"><table width="600" cellspacing="10" cellpadding="0" border="0"><tr><td valign="top" style="background: #F6F6F6;border-top: 2px solid #C9C9C9;border-bottom: 2px solid #C9C9C9;width: 50%;">|</td>
 
##right column box
tt_content.stdWrap.innerWrap.cObject.45 = TEXT
tt_content.stdWrap.innerWrap.cObject.45.value = <td valign="top" style="background: #F6F6F6;border-top: 2px solid #C9C9C9;border-bottom: 2px solid #C9C9C9; width: 50%;">|</td></tr></table></td></tr><tr><td> </td></tr>

ich kann das Bild zwar mit der verbliebenen css-class

.csc-textpic-intext-right-nowrap img{float:right; display:block;clear:both;margin-right:20px}

nach rechts bugsieren, aber Outlook 2013 z.B. lässt das links liegen ;-(
Kann mir jemand einen Tipp geben wie man die Bilder rechts neben dem Text (evtl. Tabellenzellen?) ausrichtet??

DANKE
hoge

Norman2k ·

Ich verwende bei Newslettern anstatt "css_styled_content" immer nur das alte "content (default)", das rendert alles schön in Tabellen ;-)
Musst allerdings die System-Ext. "statictemplates" installieren um content (default) einbinden zu können.

Hoge ·

OK, danke. Habe jetzt allerdings

tt_content.image.20.renderMethod = simple

durch

tt_content.image.20.renderMethod = table

ersetzt.

Das tut auch für mich.

Bin jetzt noch damit beschäftigt das mit den margins und paddings so zu stylen, dass es in allen clients gleich (oder zumindest fast gleich) aussieht. Puh!

Hoge