Zum Inhalt springen

htmlarea RTE: Bilder positionieren funktioniert nicht

Erstellt am 23. Januar 2013 · Noch keine Antworten

Tags: Bilder, HTML & CSS, Frage

jojoschmiddi ·

Ich sitze seit zwei Tagen an den leidigen Problem der Bilderpositionierung mit dem htmlarea RTE. Ich nutze lokal Typo3 4.7.7 und den aktuellen htmlarea RTE der Typo3 Version. Ich habe die DEMO Version im Erweiterungsmanager eingestellt. "Enable images in the RTE" ist aktiviert!

Meine Konfig erst einmal in der PageTS Config:

#*** RTE Classe des Interface (Ausrichtung)
RTE.classes {
	align-left {
		name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifyleft
		value = text-align: left;
	}
	align-center {
		name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifycenter
		value = text-align: center;
	}
	align-right {
		name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifyright
		value = text-align: right;
	}
}
 
#
# *** Entfernt das Bild vor den Links
RTE.classesAnchor {
	internalLink {
		class = internal-link
		type = page
		image >
	}
	externalLink {
		class = external-link
		type = url
		image >
	}
	externalLinkInNewWindow {
		class = external-link-new-window
		type = url
		image >
	}
	internalLinkInNewWindow {
		class = internal-link-new-window
		type = page
		image >
	}
	download {
		class = download
		type = file
		image >
	}
	mail {
		class = mail
		type = mail
		image >
	}
}
 
 
## RTE Konfiguration
RTE.default {
 
	# Zuweisung der CSS-Datei
	contentCSS = rte_formate.css
 
	## Markup options
	enableWordClean = 1
	removeTrailingBR = 1
	removeComments = 1
	removeTags = center, sdfield
	removeTagsAndContents = style,script
 
	# Buttons die gezeigt/versteckt werden
	showButtons = textstyle, textstylelabel, blockstyle, blockstylelabel, bold, italic, underline, left, center, right, orderedlist, unorderedlist, insertcharacter, line, link, image, removeformat, table, toggleborders, tableproperties, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columninsertbefore, columninsertafter, columndelete, columnsplit, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge, findreplace, insertcharacter, undo, redo, showhelp, about
	hideButtons = fontstyle, formatblock, fontsize, strikethrough,lefttoright, righttoleft, textcolor, bgcolor, textindicator, emoticon, user, spellcheck, chMode, inserttag, outdent, indent, justifyfull, subscript, superscript, acronym, copy, cut, paste
 
	# Hält die RTE Icons gegroupt zusammen
	keepButtonGroupTogether = 1
 
	# blendet Statusbar in htmlarea aus
	showStatusBar =  0
 
	## Add styles Left, center and right alignment of text in paragraphs and cells.
	inlineStyle.text-alignment (
		p.align-left, h1.align-left, h2.align-left, h3.align-left, h4.align-left, h5.align-left, h6.align-left, td.align-left { text-align: left; }
		p.align-center, h1.align-center, h2.align-center, h3.align-center, h4.align-center, h5.align-center, h6.align-center, td.align-center { text-align: center; }
		p.align-right, h1.align-right, h2.align-right, h3.align-right, h4.align-right, h5.align-right, h6.align-right, td.align-right { text-align: right; }
	)
 
	## Use stylesheet file rather than the above mainStyleOverride and inlineStyle properties to style the contents (htmlArea RTE only)
	ignoreMainStyleOverride = 1
 
	proc {
		# tags die erlaubt / verboten sind
		allowTags = table, tbody, tr, th, td, h1, h2, h3, h4, h5, h6, div, p, br, span, ul, ol, li, re, blockquote, strong, em, b, i, u, sub, sup, strike, a, img, nobr, hr, tt, q, cite, abbr, acronym, center
		denyTags = font
 
		# br wird nicht zu p konvertiert
		dontConvBRtoParagraph = 1
 
		# tags sind erlaubt außerhalt von p, div
		allowTagsOutside = img,hr
 
		# erlaubte attribute in p, div tags
		keepPDIVattribs = align,class,style,id 
 
		# List all class selectors that are allowed on the way to the database
		allowedClasses (
			external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail,
			align-left, align-center, align-right, author
		)	
 
		# html parser einstellungen
		HTMLparser_rte {
 
			# tags die erlaubt/verboten sind
			allowTags < RTE.default.proc.allowTags
			denyTags < RTE.default.proc.denyTags
 
			# tags die untersagt sind
			removeTags = font
 
			# entfernt html-kommentare
			removeComments = 1
 
			# tags die nicht übereinstimmen werden nicht entfernt (protect / 1 / 0)
			keepNonMatchedTags = 0
		}
 
 
		# Content to database
		entryHTMLparser_db = 1
		entryHTMLparser_db {
 
			# tags die erlaubt/verboten sind
			allowTags < RTE.default.proc.allowTags
			denyTags < RTE.default.proc.denyTags
 
			# CLEAN TAGS
			noAttrib = b, i, u, strike, sub, sup, strong, em, quote, blockquote, cite, tt, br, center
 
			rmTagIfNoAttrib = span,div,font
 
			# htmlSpecialChars = 1
 
			## align attribute werden erlaubt
			tags {
				p.fixAttrib.align.unset >
				p.allowedAttribs = class,style,align
 
				div.fixAttrib.align.unset >
 
				hr.allowedAttribs = class
 
				# b und i tags werden ersetzt (em / strong)
				b.remap = strong
				i.remap = em
 
				## img tags werden erlaubt
				img >
			}
		}
 
	}
 
	# Classes: Ausrichtung
	classesParagraph (
		align-left, align-center, align-right
	)
 
	# Classes: Eigene Stile
	classesCharacter = author
	classesImage= rte_image
 
 
	# Classes für Links (These classes should also be in the list of allowedClasses)
	classesAnchor = external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail
	classesAnchor.default {
		page = internal-link
		url = external-link-new-window
		file = download
		mail = mail
	}
 
	# zeigt alle CSS-Klassen die in formate.css vorhanden sind
	showTagFreeClasses = 1
 
	# Do not allow insertion of the following tags
	hideTags = font
 
	# Tabellen Optionen in der RTE Toolbar
	hideTableOperationsInToolbar = 0
	keepToggleBordersInToolbar = 1
 
	# Tabellen Editierungs-Optionen (cellspacing/ cellpadding / border)
	disableSpacingFieldsetInTableOperations = 1
	disableAlignmentFieldsetInTableOperations=1
	disableColorFieldsetInTableOperations=1
	disableLayoutFieldsetInTableOperations=1
	disableBordersFieldsetInTableOperations=0
}
 
# Use same processing as on entry to database to clean content pasted into the editor
RTE.default.enableWordClean.HTMLparser < RTE.default.proc.entryHTMLparser_db
 
# FE RTE configuration (htmlArea RTE only)
RTE.default.FE < RTE.default
RTE.default.FE.userElements >
RTE.default.FE.userLinks >
 
# Breite des RTE in Fullscreen-Ansicht
TCEFORM.tt_content.bodytex
t.RTEfullScreenWidth= 80%

Ich habe im Quelltext folgende Situation, wenn ich ein Bild über die Bildereinfügen Funktion des RTE gehe (Text mit Bild):

<div class="oneThird"><h3>Aktuelle Kurse</h3><div class="csc-textpic csc-textpic-left csc-textpic-above csc-textpic-equalheight"><figure class="csc-textpic-image" style="width:277px;"><img src="typo3temp/pics/musikalisches_workout_2012_e06c32fb4c.jpg" width="277" height="115"  alt=""><figcaption></figcaption></figure><div class="csc-textpic-text"></div></div><div class="clear20"></div></div>

Ich wollte das Bild rechts oder links positionieren, doch es klappt nichts. Es ist zum verrückt werden.

Hier mal ein Auszug der CSS Datei:

/* ###########################
** ### cssstyledcontent ######
** ###########################

/* deleted in setup and copied to here, t 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;
}
DIV.csc-textpic DIV.csc-textpic-imagecolumn {
float : left;
display : inline;
}
DIV.csc-textpic-border DIV.csc-textpic-imagewrap .csc-textpic-image IMG {
border : 1px solid black;
padding : 0 0;
}
DIV.csc-textpic-imagewrap {
padding : 0;
}
DIV.csc-textpic IMG {
max-width: 100%;
  border: 1px solid #fff;
  -webkit-box-shadow: 0 0 3px #000;
  -moz-box-shadow: 0 0 3px #000;
box-shadow: 0 0 3px #000;
float: left;
}
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;
}
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;
margin-right : 0px;
}
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;
margin-left : 0px;
}
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;
}
DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image IMG {
margin-left : 2px;
}
DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-image {
margin-bottom : 0px;
}
DIV.csc-textpic-equalheight DIV.csc-textpic-imagerow {
margin-bottom : 5px;
display : block;
}
DIV.csc-textpic DIV.csc-textpic-imagerow {
clear : both;
}
DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-firstcol {
margin-left : 0 !important ;
}
DIV.csc-textpic DIV.csc-textpic-imagewrap .csc-textpic-lastcol {
margin-right : 0 !important ;
}
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 ;
}
DIV.csc-textpic-above DIV.csc-textpic-text {
clear : both;
}
DIV.csc-textpic-center {
text-align : center;
}
DIV.csc-textpic-center DIV.csc-textpic-imagewrap {
margin : 0 0;
}
DIV.csc-textpic-center DIV.csc-textpic-imagewrap .csc-textpic-image {
text-align : left;
}
DIV.csc-textpic-center DIV.csc-textpic-text {
text-align : left;
}
DIV.csc-textpic-right DIV.csc-textpic-imagewrap {
float : right;D
}
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;
clear:both;
display:block;
}
DIV.csc-textpic-intext-right DIV.csc-textpic-imagewrap {
float : right;
clear:both;
}
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%;
}


DIV.csc-textpic csc-textpic-left csc-textpic-above csc-textpic-equalheight {float : left;
clear:both;
display:block;
}

div.csc-textpic-above div.csc-textpic-text { clear: none; }
 div.csc-textpic-right div.csc-textpic-text { clear: none; }	
 div.csc-textpic-left div.csc-textpic-text { clear: none; }

div.csc-textpic-above div.csc-textpic-imagewrap {
 overflow:visible; 
 display: table; 
 }

/* fix textpic rendering with figure */
div.csc-textpic div.csc-textpic-imagewrap .csc-textpic-image {
	float: left;
} 

.csc-textpic csc-textpic-left csc-textpic-above csc-textpic-equalheight {
	float: left;
} 

DIV.csc-textpic IMG {
	float: left;
}

Wer kann mir bitte weiterhelfen?