Suche
Teilen
startseite » forum

Komisches Verhalten von der class="csc-default"

  • JPassmann JPassmann
    Padawan
    0 x
    53 Beiträge
    0 Hilfreiche Beiträge
    26. 11. 2010, 20:30

    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

  • 1
  • lisardo lisardo
    Jedi-Meister
    0 x
    306 Beiträge
    0 Hilfreiche Beiträge
    27. 11. 2010, 23:19

    Hallo Jörg,

    Ursache ist nicht diese Klasse sondern die über css_styled_content eingesetzten CSS-Eigenschaften: 

    1. clear:left; 
    2. clear:right; 
    3. 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 

    1. 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: 

    1. <div id="main">
    2.   <div class="inner">
    3.      --- Inhalte --- 
    4.   </div>
    5. </div>

    1. .inner {float:left;}

    Ich verwende je nach Bedarf beide Möglichkeiten.

    Peter, [url=http://www.typo3-lisardo.de]TYPO3 @ lisardo (Augsburg)[/url]

  • etux etux
    Jedi-Meister
    0 x
    360 Beiträge
    13 Hilfreiche Beiträge
    28. 11. 2010, 15:55

    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.

  • JPassmann JPassmann
    Padawan
    0 x
    53 Beiträge
    0 Hilfreiche Beiträge
    28. 11. 2010, 17:43

    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!

  • 1
Präsentiert von