Hallo,
ich habe mit großer Sorgfalt mein neues Template aufgesetzt und habe zur Vorsicht die verschiedenen Inhaltselemente mit und ohne typo3 durchgetestet.
Jetzt habe ich folgendes Phänomen:
Ich habe ein 3-spaltiges Design und wenn ich in der rechten Spalte mehr Inhalt als in der Hauptspalte habe, dann rutschen Folgeelemente einfach unten. Ursache ist das Element csc-default, welches in der Hauptspalte einfach dazwischen hängt.
wer mag kann sich das hier ja mal anschauen: http://labor.familie-passmann.de/lebensart/ausfluege/flora.html
Wie kann man das wieder hinbiegen?
Gruß Jörg
Hallo Jörg,
Ursache ist nicht diese Klasse sondern die über css_styled_content eingesetzten CSS-Eigenschaften:
clear:left;
clear:right;
clear:both
In einem nicht floatenden Container, wie es deine Hauptspalte vermutlich ist, wirken diese clear-Befehle global, das heisst, sie clearen über alle drei Spalten und verschieben so die folgenden Inhalte unter die Randspalte. Das betrifft durchaus auch die linke Spalte ... Ein gängiges Problem, wenn man z. B. Yaml unter TYPO3 einsetzt - oder einen Spaltenaufbau analog zu Yaml.
Abhilfe wäre 1:
Du änderst die css-Datei von css_styled_content, indem du alle clear-Befehle rausnimmst und statt dessen die Container der Inhaltselement mit Hilfe von
overflow:hidden
clearst und die css-Datei von css_styled_content entsprechend anpasst, oder 2:
du fügst in deine Hauptspalte einen Hilfscontainer ein, der floatet, also z. B. so:
<div id="main">
<div class="inner">
--- Inhalte ---
</div>
</div>
.inner {float:left;}
Ich verwende je nach Bedarf beide Möglichkeiten.
Peter, TYPO3 @ lisardo (Augsburg)
lisardo's Beitrag beschreibt schon das Problem und nennt Lösungen dazu. Daher NUR als Ergänzung:
Mit YAML habe ich mich nur ein mal kurz vor ein Paar Jahren beschäftigt. Glaube mich aber zu erinnern, dass so ein ähnliches Layout-Aufbau für gleich hohe Spalten sorgte und gleichzeitig für eine in der Breite flexible (flüssige) Mittlerespalte.
Da hier im Layout von Jpassmann offensichtlich beides nicht gewollt ist (Layout hat feste Breite und es fehlt das notwendige clearende Element am Ende der Content-Spalte), würde ich alle drei Spalten floaten (auf das zusätzliche Element um die drei Spalten kann dann verzichtet werden).
Wie lisardo schon sagte, etabliert die mittlere Spalte keinen „BFC“ (Block Formatting Context). Daher wird die Wirkung von Float und Clear nicht auf die Spalte begrenzt (s. lisardo).
„overflow: hidden;“ lässt die mittlere Spalte einen BFC erzeugen (die Wirkung von Float und Clear wird auf das Element begrenzt), persönlich rate ich aber immer davon ab, bei Elementen mit so viel Inhalt, „overflow: hidden;“ zu verwenden. Es kann unproblematisch gehen, es kann aber auch zu späteren Problemen führen. Vor allem bei den alten IEs. Hängt eben von der restlichen (späteren) CSS-Formatierung ab. Im Prinzip alles lösbar, macht aber mehr Arbeit.
Auch andere Eigenschaften lassen bei Elementen BFC etablieren. Eine davon ist Float.
Die drei Spalten zu floaten finde ich daher als Lösung wesentlich unproblematischer. Außerdem kann dann die Reihenfolge der Spalten im Quelltext beliebig gewählt werden.
Die Reihenfolge der Spalten müsste nur dann beibehalten werden (plus ein zusätzliches Element um die Content-Spalte, nicht um alle drei), wenn man alle drei Spalten floaten will und die Content-Spalte eine „flüssige“ Breite haben sollte.
Hallo lisardo,
tausend Dank für den Hinweis und die ausführliche Beschreibung. Ich hätte mich noch zum "Schänzchen" gesucht. Ich werde mich wohl in den nächsten Wochen nochmal intensiv mit dem Thema auseinandersetzen müssen.
Auch an Dich vielen Dank etux. Wie Ihr merkt experimentiere ich noch recht viel mit den Layouts herum, weil ich möglichst flexibel bleiben möchte. YAML habe ich mir auch schon angeschaut aber in Kombination mit typo3 ist es mir noch zu komplex.
Also nochmals vielen Dank an lisardo und etux und einen schönen Restsonntag!