Zum Inhalt springen

Inhalt zerschießt Template

Erstellt am 26. Januar 2011 · 27 Antworten · letzte Antwort am 28. Januar 2011 · Seite 1 von 2

Tags: Inhaltselemente, Frage

etux ·
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?

plxkillme ·

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.

plxkillme ·

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!

etux ·
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

.

etux ·
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 ...

.

plxkillme ·

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)...

etux ·
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) :

kontra-2life.png

plxkillme ·

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.

etux ·

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

.

plxkillme ·

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?

etux ·
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>
plxkillme ·

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****

etux ·

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?

.

Unbekannter Benutzer ·

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.

plxkillme ·

Danke für dein Bemühen!

Allen Content in eine Spalte und um jeden dann ein <a> würde denke ich das selbe darstellen, da die Spalten ja auch nur von den <a>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 <a>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...

etux ·
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

.

etux ·
plxkillme schrieb

Allen Content in eine Spalte und um jeden dann ein <a> würde denke ich das selbe darstellen, da die Spalten ja auch nur von den <a>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“. 😃

plxkillme ·

Lösung:

Ein per <embed> eingebundenes Element darf nicht mit <a> </a> als Link gesetzt werden. (Danke kitsunet für den Hinweis!)

Daher ist ein Wrap um ein <embed> in der Form <a> | </a> nicht möglich.

Da aber die <a>-Tags ja nicht als Link gedacht waren, sondern nur als (vorausgesetztes) Hilfsmittel für die Scrollfunktion, hat mit ein Wrap in Form <div><a> </a> | </div> geholfen.

die <a>-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!