CSC textpic + UL-Menu
| Autor | Nachricht |
|---|---|
|
Verfasst am: 02. 06. 2006 [16:02]
|
|
|
Commodore
Themenersteller
Dabei seit: 04.07.2003
Beiträge: 185
|
Hallo Leute, ich habe im Zusammenhang mit css_styled_content 0.3.1, Typo3 V4 (und dem YAML-Layout) einen interessanten "Bug", der im Firefox 1.5 und Safari und Explorer sichtbar ist: Unter http://web65.s119.typo3server.com/8.html könnt ihr ein zweispaltiges Layout sehen, links ein Menü aufgebaut aus einer unsortierten Liste und mit CSS dummy-haft bearbeitet. Links eine reine Content-Spalte. Wenn ich in die Content-Spalte zu Beginn ein Typo3-Element Bild lege und danach weitere Bild-Elemente oder auch nur Texte folgen lasse, werden genau die nachfolgenden Elemente ERST auf Höhe des letzten LI-Tags der linken Navigation angezeigt!!! Im IE verschwinden zudem die Bilder, sind aber beim Laden der Seite kurz sichtbar! Ich habe verschiedene Tests durcvhgeführt, um zu Ergründen was zu diesem Verhalten führt, bsp. die CSS der Navigation komplett entfernt oder die Typo3-Bilder als HTML-Elemente in einer Seite abgelegt, um die css_styled_content Klassen zu überprüfen - leider noch mit keinem durchschlagendem Erfolg! Meine Vermutungen legen nahe, dass es ein Clearing in der Content-Spalte in Verbindung mit dem Listenmenü zu diesem Effekt führt ... Entferne ich das Menü, bzw. nutze keine Liste als Grundlage, funzt alles! Ebenso funzt alles, wenn genügend Text als erstes Content-Element vorhanden ist und nicht mit reinen Bildreihen begonnen wird. Auch ein einzelnes Bild, umflossen von Text sieht korrekt aus ... Lange Rede, kurzer Sinn: Wem ist dies auch schon aufgefallen und hat einen Tip für mich! Ich wäre tausendfach dankbar!  Grüße, Commodore Ergänzung: Die Klasse DIV.csc-textpic-clear clearing die gefloateten Bilder. Durch folgende Umformatierung der entsprechenden CSC-Klassen kann ich mein Problem beseitigen: HTML DIV.csc-textpic-clear {
clear: none;
display: none;
}
DIV.csc-textpic-imagewrap {
width: 100%;
}Allerdings werden nun durch die "width: 100%" im Text liegende Bilder natürlich nicht mehr umflossen. Ich müsste also CSS-Klassen und CSC-Wrap's entsprechend ändern!!! Geht's vielleicht nicht noch einfacher ... [Dieser Beitrag wurde 1mal bearbeitet, zuletzt am 02.06.2006 um 18:18.] |
   |
|
|
Verfasst am: 05. 06. 2006 [12:45]
|
|
|
steffenk
Moderator
Dabei seit: 22.09.2005
Beiträge: 4839
|
Das CSS funktioniert auch immer nur abhängig vom CSS der restlichen Site. Entscheidend ist oft das floating-Konzept, und das ist auch das kniffeligste. Also wenn im Content gefloatet wird, darf das keinen Einfluss auf die umliegenden Container haben. Und genau hier ist oft der Hund begraben. Daher kann ich nur den Tipp geben, das Framework auf diese floats zu testen und entsprechend anzupassen. |
|
|
|
Verfasst am: 06. 06. 2006 [15:10]
|
|
|
Commodore
Themenersteller
Dabei seit: 04.07.2003
Beiträge: 185
|
Auf jeden Fall richtig! Und natürlich lag es auch daran! Es liegt tatsächlich an der Kombination des verwendeten CSS-Layouts und dem tabellenlosen CSC-Rendering: Ich habe nun erstmalig das wirklich super durchdachte YAML verwendet und suchte den Fehler nicht in erster Linie im Framework, da ich das besagte Problem auch mit meinem alten - eigenem - Layout reproduzieren konnte (Zuerst immer T3 die Schuld geben). Wahrscheinlich setzt eine Mehrzahl von Entwicklern mittlerweile ein solches Layout ein, das also mehr oder weniger flexibel auf drei Content-Spalten basiert, wobei nur 2 der Spalten ge-float-et werden, eine bleibt statisch. Und genau diese Spalte macht Ärger! YAML hat ein paar sehr gute Tricks drauf, das globale Clearing zu umgehen, aber im Zusammenspiel mit Typo3 V4/ CSC tritt es wieder auf! Unter yaml.t3net.de/Templates-anpassen.35.0.html ist dies sehr gut beschrieben und ebenso der Fix. Das Verhängnisvolle ist nur, dass ich den Fehler in meinem eigenem CSS-Layout (teils) durch die Behebung eines Schönheitsfehlers schon unbeabsichtigt ausgebügelt hatte - nur man muss erst mal wieder drauf kommen 
|
|
|
|
Verfasst am: 22. 05. 2009 [07:47]
|
|
|
mchenzi
Dabei seit: 18.12.2004
Beiträge: 177
|
die antwort ist relativ einfach (3 Jahre später...) einfach eine Klasse class="floatbox" in das umschliessende div mit einbinden. http://forum.yaml.de/index.php?topic=6277.msg25756 Sebastian
|
|
|