--- title: "Inhalt zerschießt Template" url: "https://www.typo3.net/d/103472-inhalt-zerschiesst-template" source: "typo3.net" tags: ["TYPO3","TypoScript","Frage","Inhaltselemente"] created: "2011-01-26" last_reply: "2011-01-28" replies: 27 solved: false page: 1 pages: 1 lang: "de" --- # Inhalt zerschießt Template TYPO3 › TypoScript · 27 Antworten · gestartet 2011-01-26 ## Eröffnungsbeitrag **plxkillme** · 2011-01-26 · [Beitrag #1](https://www.typo3.net/d/103472-inhalt-zerschiesst-template/1) 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: ```typoscript # 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 = page.headerData.12 = TEXT page.headerData.12.value = page.headerData.13 = TEXT page.headerData.13.value = # 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 =
|
page.10.10.10 = COA page.10.10.10.wrap =
|
page.10.10.10.10 = IMAGE page.10.10.10.10.wrap = 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 = | 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 = | 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 = | 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 = | 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 = | 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 = | 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 =
|
page.10.20.10 = COA page.10.20.10.wrap =
|
page.10.20.10.10 = COA page.10.20.10.10.wrap = | 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 = | 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 = 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: ```html
[...]
``` wird folgendes generiert: ```html
[...] ``` Der Wrap | 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 ## Antworten ### [#2](https://www.typo3.net/d/103472-inhalt-zerschiesst-template/2) · Unbekannter Benutzer · 2011-01-26 Stammt dein zerschossener HTML Schnipsel aus Firebug oder HTML Source Ansicht? Kommen vielleicht in der Ausgabe des mp3 Player Plugins Pipes vor? ### [#3](https://www.typo3.net/d/103472-inhalt-zerschiesst-template/3) · plxkillme · 2011-01-27 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 und . 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 -Tags ist falsch. Also die sind ja nicht irgendwo mitten in ein anderes Element reingewrapt (
"> ) sondern die Reihenfolge ist falsch. Es sollte sein: ```html
CONTENT
``` und es ist leider (laut Firebug): ```html
Überschrift
PLAYER
``` ### [#4](https://www.typo3.net/d/103472-inhalt-zerschiesst-template/4) · etux · 2011-01-27 > **plxkillme schrieb:** > > ```html > >
> CONTENT >
> > ``` Wenn Du nicht html5 als DOCTYPE deklariert hast, ist das invalide. ### [#5](https://www.typo3.net/d/103472-inhalt-zerschiesst-template/5) · plxkillme · 2011-01-27 ```typoscript page.config.doctype = html_5 ``` und Ext. *html5meta_t3lib_pagerenderer* installiert Hat sich aber nichts geändert... ### [#6](https://www.typo3.net/d/103472-inhalt-zerschiesst-template/6) · etux · 2011-01-27 > **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? ### [#7](https://www.typo3.net/d/103472-inhalt-zerschiesst-template/7) · plxkillme · 2011-01-27 Im Quellcode steht jetzt DOCTYPE html5 und charset utf-8. An der Ausgabe im Browser ändert sich nichts... 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. ### [#8](https://www.typo3.net/d/103472-inhalt-zerschiesst-template/8) · etux · 2011-01-27 Die Floats #scroller a {     float: left; } werden nicht eingeschlossen. ### [#9](https://www.typo3.net/d/103472-inhalt-zerschiesst-template/9) · plxkillme · 2011-01-27 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! ### [#10](https://www.typo3.net/d/103472-inhalt-zerschiesst-template/10) · etux · 2011-01-27 > **plxkillme schrieb:** > > Denke ich habe da ein Verständnisproblem. So ist es. :D > **plxkillme schrieb:** > > Was meinst du mit "werden nicht umschlossen"? Oder auch ge-"clear"-t, beendet. Lesestoff (Kapitel 13-14) : 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 . ### [#11](https://www.typo3.net/d/103472-inhalt-zerschiesst-template/11) · etux · 2011-01-27 > **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 ... . ### [#12](https://www.typo3.net/d/103472-inhalt-zerschiesst-template/12) · plxkillme · 2011-01-27 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 | 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 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)... ### [#13](https://www.typo3.net/d/103472-inhalt-zerschiesst-template/13) · etux · 2011-01-27 > **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) : [Bild: \[upl-image-preview uuid=f820a005-fdcc-5ae5-9ca9-31370507e55b url=https://www.typo3.net/assets/files/typo3net/293-kontra-2life.png alt=kontra-2life.png thumbnail_url=https://www.typo3.net/assets/files/typo3net/293-kontra-2life.png\]](https://www.typo3.net/assets/files/typo3net/293-kontra-2life.png) ### [#14](https://www.typo3.net/d/103472-inhalt-zerschiesst-template/14) · plxkillme · 2011-01-27 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 -Tags umschlossen wird (die ja schon gefloatet werden). Weil jetzt wird es zwar auf den ersten Blick richtig dargestellt, aber diese verrückten -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 zum nächsten scrollen kann und die ja wie wild im Quelltext stehen. Das Typo3 zerwrapt mir da ja alles. ### [#15](https://www.typo3.net/d/103472-inhalt-zerschiesst-template/15) · etux · 2011-01-27 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 . ### [#16](https://www.typo3.net/d/103472-inhalt-zerschiesst-template/16) · plxkillme · 2011-01-27 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? ### [#17](https://www.typo3.net/d/103472-inhalt-zerschiesst-template/17) · etux · 2011-01-27 > **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: ```html
``` ### [#18](https://www.typo3.net/d/103472-inhalt-zerschiesst-template/18) · plxkillme · 2011-01-27 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 -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. | 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 Also total "willkürlich" eingeschobene ... und die Spalte wird gewrapt wie | Ich verzweilfel bald echt daran, so eine Sch**** ### [#19](https://www.typo3.net/d/103472-inhalt-zerschiesst-template/19) · etux · 2011-01-27 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? . ### [#20](https://www.typo3.net/d/103472-inhalt-zerschiesst-template/20) · Unbekannter Benutzer · 2011-01-27 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. ### [#21](https://www.typo3.net/d/103472-inhalt-zerschiesst-template/21) · plxkillme · 2011-01-27 Danke für dein Bemühen! Allen Content in eine Spalte und um jeden dann ein würde denke ich das selbe darstellen, da die Spalten ja auch nur von den s getrennt werden, und will ich auch nicht, da man schon pro Spalte mehrere Contentelemente untereinander packen können soll. Werde das mal mit den Divs probieren, vlt kann ich die s ja komplett rauspacken, aber ich glaube die sind unverzichtbar für die Scrollfunktion mit den JS-Scripts... Würd das Fenster weiter aufgehen wär der Rechner schon längst hier aus dem 5. Stock geflogen :-) erstmal eine Rauchen gehen... ### [#22](https://www.typo3.net/d/103472-inhalt-zerschiesst-template/22) · etux · 2011-01-27 > **Kitsunet schrieb:** > > 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. Dass könnte passieren, wenn schließender oder öffnender Tag eines Elements fehlen oder an der falschen Stelle stehen (falsch verschachtelt). Oder der Browser kennt das Element nicht. Ich denke, das ist hier nicht der Fall. > **Kitsunet schrieb:** > > 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. Um die CSS-Formatierung alleine geht es nicht, wenn ich das richtig verstehe. Jeder Link soll halt eine Spalte beinhalten. Ich hoffe, die Sache ist viel einfacher, als sie im Moment zu sein scheint. Ich kann gerade keine Zeile Code mehr sehen – nach rund 18 Stunden vor dem Bildschirm. 8-) Viel Erfolg . ### [#23](https://www.typo3.net/d/103472-inhalt-zerschiesst-template/23) · etux · 2011-01-27 > **plxkillme schrieb:** > > Allen Content in eine Spalte und um jeden dann ein würde denke ich das selbe darstellen, da die Spalten ja auch nur von den s getrennt werden, und will ich auch nicht, da man schon pro Spalte mehrere Contentelemente untereinander packen können soll. Es war auch nicht als Lösung Deines Problems gedacht, sondern als einfachere Handhabung. Allerdings sind mir die Argumente eingefallen, die Du beschrieben hast, glei nach dem ich den Beitrag gepostet habe. Vergiss also meine „Gedanke“. :D ### [#24](https://www.typo3.net/d/103472-inhalt-zerschiesst-template/24) · plxkillme · 2011-01-27 Lösung: Ein per eingebundenes Element darf nicht mit als Link gesetzt werden. (Danke kitsunet für den Hinweis!) Daher ist ein Wrap um ein in der Form | nicht möglich. Da aber die -Tags ja nicht als Link gedacht waren, sondern nur als (vorausgesetztes) Hilfsmittel für die Scrollfunktion, hat mit ein Wrap in Form
|
geholfen. die -Tags ermöglichen das Scrollen mit den Javascripts und die Divs halten das ganze schön nebeneinander (natürlich mit float). Danke euch beiden! Kaum macht man's richtig, schon funktioniert's! ### [#25](https://www.typo3.net/d/103472-inhalt-zerschiesst-template/25) · plxkillme · 2011-01-27 Lösung #2: Weg mit den -Tags, ersetzen durch
, *href="javascript: void"* wird zu *onlick="javascript: void"*, Die CSS-Klassen vom ins
packen Die JS-Scripts anpassen und fertig... Funktionalität wie vorher erhalten, mit Scrollen bei klick auf ganzes Element, Fade-in und Fade-out, ... ### [#26](https://www.typo3.net/d/103472-inhalt-zerschiesst-template/26) · etux · 2011-01-28 **Eine kleine Korrektur auf die Schnelle:** Kitsunet schrieb oben, dass die fehlerhafte Darstellung vermutlich am „unvermögen der Browser“ liegt. Dies hatte ich widersprochen. Zu Unrecht, wie ich gerade feststellen müsste: Bin gerade dabei Definitionslisten in Links zu setzen. Zumindest Firefox, bzw. Firebug interpretiert den Code falsch und setzt die Links vor den Definitionslisten. Und zwar unabhängig davon, ob ich die Definitionslisten in einem extra DIV oder direkt in den Links setze. In Opera und Chrome dagegen – alles bestens. Weitere Browser habe ich nicht getestet. ### [#27](https://www.typo3.net/d/103472-inhalt-zerschiesst-template/27) · lisardo · 2011-01-28 Hallo, ich würde nicht sagen, dass es am Unvermögen der Browser liegt. In HTML 4 ist nicht genau definiert, welche Elemente ein a-Tag umschließen darf, allerdings gehen alle Beispiele auf w3.org von reinen Inline-Elementen aus. Wie üblich in solchen Fällen interpretieren das die Browserhersteller dann unterschiedlich. Rein gefühlsmäßig würde ich sagen, HTML4 beschränkt den Inhalt von a auf Text und Bild. In XHTML sind innerhalb von a m. W. auch nur Inline-Elemente erlaubt, mit Ausnahme von Links (Links dürfen nicht geschachtelt werden. Das wären also wieder Text + Bilder. In HTML5 ist es dann exakt definiert: der a-Tag kann sog. phrasing-Content und ineractive-Content umschließen. [http://www.w3.org](http://www.w3.org/TR/2011/WD-html5-20110113/text-level-semantics.html#the-a-element). Das umfasst bereits eine Menge, auch embed, aber keine Listen und keine div. Also hat wohl Firefox Recht. Peter, [TYPO3 @ lisardo (Augsburg)](http://www.typo3-lisardo.de) - Nachtrag: sehe gerade, dass es in HTML4 schon definiert ist: [http://www.w3.org/](http://www.w3.org/TR/html401/struct/links.html#h-12.2): eindeutig inline-Kontext. Dann gilt das auch für XHTML. ### [#28](https://www.typo3.net/d/103472-inhalt-zerschiesst-template/28) · zeroalpha · 2011-01-28 Erstmal freut es mich, dass du eine Lösung zu deinem Problem gefunden hast. Bin technisch irgendwo im zweiten Drittel der Beiträge ausgestiegen. Was ich aber ja auch eigentlich schreiben wollte... Finde die Seite hat ein interessantes und gewagtes Design usw. Respekt für den Mut und hoffe die Seite hat den gewünschten Erfolg. --- Quelle: „Inhalt zerschießt Template“, typo3.net, https://www.typo3.net/d/103472-inhalt-zerschiesst-template Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.