Inhalt zerschießt Template

Hallo!

Ich verzweifle gerade an einem (für mich) nicht nachvollziehbarem Problem:

Typo3 v. 4.4.6

Ich habe ein Template (root), welches soweit auch erstmal alles richtig darstellt:

# Default PAGE object:
page = PAGE

# Standard-Konformität
page.config.xhtml_cleaning = all

# JavaScript
page.headerData = COA
page.headerData.11 = TEXT
page.headerData.11.value = <script src="fileadmin/template/js/jquery.js" type="text/javascript"></script>
page.headerData.12 = TEXT
page.headerData.12.value = <script src="fileadmin/template/js/jquery.scrollTo.js" type="text/javascript"></script>
page.headerData.13 = TEXT
page.headerData.13.value = <script src="fileadmin/template/js/scroller.js" type="text/javascript"></script>

# Stylesheet
page.includeCSS.file = fileadmin/template/css/style.css
page.includeCSS.file.title = Standard
page.includeCSS.file.media = screen

# Seite

page.10 = COA
page.10.wrap = |

page.10.10 = COA
page.10.10.wrap = <div id="scroller"> | </div>

page.10.10.10 = COA
page.10.10.10.wrap = <div id="scrollbar" style="padding-left: 0;"> | </div>

page.10.10.10.10 = IMAGE
page.10.10.10.10.wrap = <a href="javascript: void(0);" title="" class="galleryitem content" rel="0" style="opacity: 1;"><div id="logo"> | </div></a>
page.10.10.10.10.file = fileadmin/template/img/kontra.png

#
#
# Um den folgenden Abschnitt geht es
# 
#

page.10.10.10.20 = CONTENT
page.10.10.10.20.stdWrap.wrap = <a href="javascript: void(0);" title="" class="galleryitem content" rel="0" style="opacity: 1;"> | </a>
page.10.10.10.20.stdWrap.required = 1
page.10.10.10.20.table = tt_content
page.10.10.10.20.select.orderBy = sorting
page.10.10.10.20.select.where = colPos = 1

page.10.10.10.30 = CONTENT
page.10.10.10.30.stdWrap.wrap = <a href="javascript: void(0);" title="" class="galleryitem content" rel="0" style="opacity: 1;"> | </a>
page.10.10.10.30.stdWrap.required = 1
page.10.10.10.30.table = tt_content
page.10.10.10.30.select.orderBy = sorting
page.10.10.10.30.select.where = colPos = 2

page.10.10.10.40 = CONTENT
page.10.10.10.40.stdWrap.wrap = <a href="javascript: void(0);" title="" class="galleryitem content" rel="0" style="opacity: 1;"> | </a>
page.10.10.10.40.stdWrap.required = 1
page.10.10.10.40.table = tt_content
page.10.10.10.40.select.orderBy = sorting
page.10.10.10.40.select.where = colPos = 3

page.10.10.10.50 = CONTENT
page.10.10.10.50.stdWrap.wrap = <a href="javascript: void(0);" title="" class="galleryitem content" rel="0" style="opacity: 1;"> | </a>
page.10.10.10.50.stdWrap.required = 1
page.10.10.10.50.table = tt_content
page.10.10.10.50.select.orderBy = sorting
page.10.10.10.50.select.where = colPos = 4

page.10.10.10.60 = CONTENT
page.10.10.10.60.stdWrap.wrap = <a href="javascript: void(0);" title="" class="galleryitem content" rel="0" style="opacity: 1;"> | </a>
page.10.10.10.60.stdWrap.required = 1
page.10.10.10.60.table = tt_content
page.10.10.10.60.select.orderBy = sorting
page.10.10.10.60.select.where = colPos = 5

page.10.10.10.70 = CONTENT
page.10.10.10.70.stdWrap.wrap = <a href="javascript: void(0);" title="" class="galleryitem content" rel="0" style="opacity: 1;"> | </a>
page.10.10.10.70.stdWrap.required = 1
page.10.10.10.70.table = tt_content
page.10.10.10.70.select.orderBy = sorting
page.10.10.10.70.select.where = colPos = 6

page.10.20 = COA
page.10.20.wrap = <div id="picfunctions"> | </div>
page.10.20.10 = COA
page.10.20.10.wrap = <div id="scrollbarnav"> | </div>
page.10.20.10.10 = COA
page.10.20.10.10.wrap = <a id="scroll-left" href="javascript: void(0);"> | </a>
page.10.20.10.10.10 = IMAGE
page.10.20.10.10.10.file = fileadmin/template/img/scroll_left.png
page.10.20.10.20 = COA
page.10.20.10.20.wrap = <a id="scroll-right" href="javascript: void(0);"> | </a>
page.10.20.10.20.10 = IMAGE
page.10.20.10.20.10.file = fileadmin/template/img/scroll_right.png

page.10.30 = COA
page.10.30.wrap = <a href="#" id="scroll-up"> | </a>
page.10.30.10 = IMAGE
page.10.30.10.file = fileadmin/template/img/scroll_up.png

Nun möchte ich eine Extension einbinden, mit der MP3s abgespielt werden können. Ich habe dazu verschiedene Ext. ausprobiert (fe_mp3player, mintmp3player, audioplayer, 1pixelout, ... viele mehr ... , aktuell rgmediaimages), aber bei jeder das gleiche Problem (daher denke ich, dass es nicht mit der Extension ansich zu tun hat, sondern ich einen Fehler im Template habe - Aber wo und was? Weil es klappt ja im Prinzip?):

Statt wie bisher mit normalem Seiteninhalt diesen Quelltext zu generieren:

<a style="opacity: 0.5;" rel="1" class="galleryitem content" title="" href="javascript: void(0);">
<!--  CONTENT ELEMENT, uid:1/text [begin] -->
<div class="csc-default" id="c1">
[...]
</div>
</a>

wird folgendes generiert:

<a style="opacity: 0.5;" rel="3" class="galleryitem content" title="" href="javascript: void(0);">
<!--  CONTENT ELEMENT, uid:18/image [begin] -->
</a>
<div class="csc-default" id="c18">
<a style="opacity: 0.5;" rel="4" class="galleryitem content" title="" href="javascript: void(0);">
[...]
<a style="opacity: 0.5;" rel="8" class="galleryitem content" title="" href="javascript: void(0);"> </a>

Der Wrap <a ... > | </a> wird nicht mehr richtig dargestellt. Er umschließt nicht mehr den Content, sondern wird vor ihm einmal dargestellt und nach ihm und mittendrin ein paar mal...

Also total zerschossen das Ganze!

Ich habe schon alle möglichen Dinge probiert mit verschiedenen wraps, Umstellen des Templates, mit CSC und ohne, ... aber nichts brachte mich weiter (bin aber auch nicht der Pro in Typo3).

Ich hoffe jemand von euch kann mir weiterhelfen!
(Und ich hoffe ich konnte das Problem verständlich darstellen. Wenn nicht bin ich auch gerne bereit Zugriff auf meine Typo3-Installation zu geben,...)

Mit Gruß und Dank,

Florian

Stammt dein zerschossener HTML Schnipsel aus Firebug oder HTML Source Ansicht? Kommen vielleicht in der Ausgabe des mp3 Player Plugins Pipes vor?

Der stammt aus Firebug.

Hätte ja gedacht, dass der Firebug den selben Code anzeigt wie die Sourceansicht vom FF,... dem ist anscheinend nicht so: dort wird der Code so dargestellt, wie er sein sollte, also schön ordentlich der Content-div umwrappt von <a ...> und </a>.

Pipes sind in der Ausgabe des Players nicht zu finden.
Aber wenn da irgendwo eine Pipe auftauchen würde und Typo3 mit der "irgendetwas anstellen" würde, würde die im Quellcode doch auch nicht mehr erscheinen und der Quellcode wäre total zerstückelt? Aber die Elemente sind ja soweit alle "vollständig", nur die Anzahl und Position der <a>-Tags ist falsch. Also die sind ja nicht irgendwo mitten in ein anderes Element reingewrapt (<div class="abc<a href="...>"> ) sondern die Reihenfolge ist falsch.

Es sollte sein:

<a ...>
  <div class="csc-default">
  CONTENT
  </div>
</a>

und es ist leider (laut Firebug):

<a ...> </a>
<div class="csc-default">
  <a ...> </a>
  <div class="csc-header">
    <a ...>Überschrift</a>
  </div>
  <a ...> </a>
  <div class="csc-textpic">
    <div class="csc-textpic-imagewrap">
      <span class="rgmediaimages-player">PLAYER</span>
      <a ...>
      <script type="text/javascript">
      DIVERSE VARIABLEN FÜR DEN PLAYER
      </script>
      </a>
    </div>
  </div>
  <div class="csc-textpic-clear"></div>
  <a ...> </a>
</div>

plxkillme schrieb

<a ...>
  <div class="csc-default">
  CONTENT
  </div>
</a>

Wenn Du nicht html5 als DOCTYPE deklariert hast, ist das invalide.

page.config.doctype = html_5

und Ext. html5meta_t3lib_pagerenderer installiert

Hat sich aber nichts geändert...

plxkillme schrieb

Hat sich aber nichts geändert...

an den im Browser ausgegebenen Quellcode oder am Aussehen?
Kannst Du nicht einen Link posten?
Und validiert Dein html-Dokument überhaupt?

Im Quellcode steht jetzt DOCTYPE html5 und charset utf-8. An der Ausgabe im Browser ändert sich nichts...

http://kontra.2life.de

Dieser dicke schwarze Kasten, an dessen unterem Ende sich zur Zeit der Player findet sollte eigentlich ganz rechts neben dem ersten schwarzen Kasten (Lorem ipsum...) stehen.

Die Floats
#scroller a {
    float: left;
}
werden nicht eingeschlossen.

Habe das #scroller a rausgenommen und das float: left in #scroller #scrollbar a reingeschoben, wo es hingehört. Aber das ändert nichts. Wenn ich float: left ganz raus lasse, werden die einzelnen Content-divs zwar richtig, aber fäschlicherweise untereinander angezeigt (logisch ohne float!).

Denke ich habe da ein Verständnisproblem. Was meinst du mit "werden nicht umschlossen"?

Änderungen am CSS wirken sich ja auf die Darstellung aus, aber an der Struktur des Codes ändert es doch nichts? Und wo ich das gerade schreibe kommt mir die Frage in den Sinn, warum der Code in der Quelltextanzeige vom FF richtig dargestellt wird, im Firebug aber nicht? Oder stellt der Firebug den Code falsch dar, weil im CSS was falsch ist?

Ich glaub' ich seh den Wald vor lauter Bäumen nicht...

Aber schonmal Danke für deine Hilfsbereitschaft!

plxkillme schrieb

Denke ich habe da ein Verständnisproblem.

So ist es. 😃

plxkillme schrieb

Was meinst du mit "werden nicht umschlossen"?

Oder auch ge-"clear"-t, beendet.
Lesestoff (Kapitel 13-14) :
http://little-boxes.de/little-boxes-teil1-online.html

Ich weiß nicht welche Darstellung Du erreichen willst, aber zwei mögliche Wege:

- dem unmittelbar nach dem letzten Link stehenden Element „clear: left;“ geben

- alle Elementen floaten (Geschwister der Links) und das umschließende Element auch (das Eltern-Element)

Die „id“ der Elementen kann ich Dir nicht mehr nennen, da Du die mit einer Tabelle ausgetauscht hast o.O

.

plxkillme schrieb

Änderungen am CSS wirken sich ja auf die Darstellung aus, aber an der Struktur des Codes ändert es doch nichts? Und wo ich das gerade schreibe kommt mir die Frage in den Sinn, warum der Code in der Quelltextanzeige vom FF richtig dargestellt wird, im Firebug aber nicht? Oder stellt der Firebug den Code falsch dar, weil im CSS was falsch ist?

Vorhin habe ich schnell ein Paar Änderungen der CSS gemacht (Firebug). Kann mir gut vorstellen, dass Du es so ähnlich haben willst. Alles neben einander weit nach rechts reichend.
Aber da der Quellcode geändert wurde ...

.

Ja das mit der Tabelle war ne Verzweiflungstat, hat aber auch nicht den gewünschten Effekt gebracht :-)

Ja ich will, dass alle Spalten von Typo3 (bei mir 1-6) nebeneinander dargestellt werden und jeweils von einem <a ...> | </a> umwrappt werden. Mit den pfeiltasten und den beiden Pfeilgrafiken kann man dann zwischen den einzelnen Spalten quasi umherswitchen...

Wenn ich normalen Inhalt habe klappt das ja auch und wird richtig dargestellt (daher kann das CSS ja nicht sooo falsch sein).

Erst wenn ich da das Plugin einbinde (in meinem Fall jetzt zwar nur das normale Bild-Inhaltselement, aber dieser ist ja mit der Ext. rgmediaimage modifiziert, und zuvor verschiedene Mediaplayer-Extensions), werden die Wraps falsch gesetzt (also die <a...> </a> die da an den unmöglichsten Stellen auftauchen).

Ich vermute den Fehler daher eher im Typoscript irgendwo. Aber ich habe dort auch schon alles mögliche versucht mit den wraps zum Beispiel, oder anderes verschachteln. Irgendwie funkt mir der Player dazwischen (und ich glaube CSC)...

plxkillme schrieb

Ich vermute den Fehler daher eher im Typoscript irgendwo.

Wie gesagt, wenn ich alles floate, schaut es für mich so aus, wie Du es Dir wünschst.

P.S.: vorhin hatte ich zwei Beiträge nach einander geschrieben. Hast Du alle Beide gelesen?

EDIT 2: Ein Screenshot (verkleinert) :

Wenn ich #csc-default floate wird es schön rechts neben den anderen Elementen eingeordnet. Aber: das will ich ja gar nicht müssen müssen... Ich will ja, dass dieser Div #csc-default von den <a>-Tags umschlossen wird (die ja schon gefloatet werden).
Weil jetzt wird es zwar auf den ersten Blick richtig dargestellt, aber diese verrückten <a>-Tags die da falsch eingesetzt werden sind ja immernoch da (und weil es ja auch einige zu viele sind ist natürlich auch meine schöne Navigation per Pfeiltasten/-grafiken etwas durcheinander, weil ich ja von einem <a> zum nächsten scrollen kann und die ja wie wild im Quelltext stehen. Das Typo3 zerwrapt mir da ja alles.

O.K. Jetzt verstehe ich Dich.
Den Fehler muss Du bei der Quellcode Generierung suchen.

So auf die Schnelle den TS-Code überflogen – warum schließt Du die Hauptinhaltspalte aus?
where = colPos = 0

.

Ich will die Benennung der Spalten nachvollziebar halten.
Ich habe ja in dem Sinne nicht die typischen Spalten LINKS MITTE RECHTS RAND, sondern nur 6 Spalten nebeneinander die auch einfach so heissen 1 2 3 4 5 6 und auch so angesprochen werden im TS. Also das ist nur der Umbenennung geschuldet, da ich nicht dann Spalte 2 im TS mit colPos = 0 anspreche, etc...
Aber das sollte doch keine negativen Auswirkungen haben... oder doch?

plxkillme schrieb

Aber das sollte doch keine negativen Auswirkungen haben... oder doch?

Ich denke doch.

EDIT: Habe gerade Dein TS kurz auf einer Tests-Installation getestet – funktioniert. Mit oder ohne die Hauptinhaltsspalte.

EDIT 2: Dieser Quellcode wird im body ausgegeben:

<body>

<div id="scroller">
	<div id="scrollbar" style="padding-left: 0;">
		<a href="javascript: void(0);" title="" class="galleryitem content" rel="0" style="opacity: 1;">
			<h1>Hauptinhalt</h1>
			<p>Lorem ipsum dolor sit amet ...</p>
		</a>
		<a href="javascript: void(0);" title="" class="galleryitem content" rel="0" style="opacity: 1;">
			<h1>Spalte rechts</h1>
			<p>Lorem ipsum dolor sit amet ...</p>
		</a>
	</div>
</div>
<div id="picfunctions">
	<div id="scrollbarnav">
		<a id="scroll-left" href="javascript: void(0);"></a>
		<a id="scroll-right" href="javascript: void(0);"></a>
	</div>
</div>
<a href="#" id="scroll-up"></a>

</body>

Danke, dass du dir die Mühe machst!

Diese Ausgabe habe ich auch, wenn ich nur den normalen Inhalt benutze. Aber sobald ich das Plugin nutze (bzw. überhaupt irgendwas "exotisches", habe da ja verschiedenste Variationen ausprobiert) werden diese <a>-Tags davor, dahinter und dazwischen gepackt. Deshalb meinte ich ja, dass am CSS es nicht liegen dürfte - da es ja im Prinzip funktioniert. Erst der Player (egal ob fe_mp3player, audioplayer, 1pixelout, etc...) bringt da Unruhe rein.

<a ...> | </a> soll um den gesamten Spalteninhalt gewrapt werden. Und das wird es ja auch, wenn in der Spalte nur Standardinhalt steht.

Steht das Plugin drin wird so gewrapt

<a ...> </a>
<div csc-content>
<a ...><div csc-header> </div></a>
<div csc-imagetext> </div>
<a ...> </a>
</div>
<a ...> <a>

Also total "willkürlich" eingeschobene <a ...> </a> ... und die Spalte wird gewrapt wie

<a ...> </a> | <a ...> </a>

Ich verzweilfel bald echt daran, so eine Sch****

Schade. Offensichtlich kann ich Dir nicht weiter helfen. 😢

Aber mal eine Gedanke dazu. Eine einzige Inhaltsspalte (Normal) verwenden und um jeden Content-Element Deine Links setzen. Kommt auf das Gleiche raus. Oder?

.

Ich vermute da liegt das Problem eher am unvermögen der Browser -> ein a Tag umschließt etwas was der Browser nicht von a umschlossen haben will -> Fehlerkorrektur setzt ein und beendet das a Tag vor dem Bösen Element und öffnet es dahinter wieder. Ergebnis ist das von dir beschriebene. HTML5 war zwar eine gute Idee, das laut Spezifikation auch funktionieren sollte, aber das heißt ja nicht, dass auch die Browser das so halten... Ich vermute da wird ja ein object oder embed generiert und da mag dann offensichtlich FF kein a drum. Ich würde dir empfehlen um das a noch ein div zu wrappen und darin die Styles zu setzen. Dann ist es ja im Grunde egal ob der Browser die a Tags auseinander nimmt.