[TYPO3-german] Typo3 4.2.1// Layout mit CSS

[Peter Linzenkirchner]

Hallo Dirk,

das ist ein bekanntes Problem, das in jedem mehrspaltigen Layout  
umschifft werden muss, das auf floats basiert und eine Spalte enthält  
die selbst nicht floatet. Ein einfaches Beispiel:

http://www.lisardo.de/test/css/clearing-falsch.html

das clear:both wirkt global und verschiebt den Inhalt der Hauptspalte  
nach unten.

Es gibt mehrere Möglichkeiten:

1. YAML ist ja so aufgebaut, dass in den Spalten nochmals ein div  
enthalten ist:
<div id="col2_content" class="clearfix">
etc. Dieses div kann mit einem float versehen werden. Damit erreicht  
man, dass der css_styled_content in einer float-Umgebung eingesetzt  
wird und die clear-Anweisungen somit nicht global wirken.

http://www.lisardo.de/test/css/clearing-float.html

Nachteil: der Hintergund der Hauptspalte verschwindet; diese Lösung  
eignet sich also nur, wenn man keinen Hintergrund bzw. keine  
Trennlinen benötigt.

2. Man kann die Default-CSS-Ausgabe von css_styled_content unterbinden  
und sie in die eigenen Stylesheets aufnehmen. Wenn man so vorgeht, ist  
es möglich, die clear-Anweisungen zu entfernen und statt dessen das  
Clearing anzuwenden, das von YAML auch empfohlen wird, nämlich mit  
overflow:hidden im übergeordneten Container. Das sind nur relativ  
wenige Änderungen, allerdings muss man für den IE < 7 die clear- 
Anweisungen in die patches einbauen. So bin ich bisher immer  
vorgegangen, aber die nächste Lösung ist erheblich eleganter:

3. yaml.t3net implementiert in der Haupt-Contentspalte ein weiteres div:
<div id="col3">
	<div id="col3_content" class="clearfix">
		<div id="col3_innen" class="floatbox">
Letzteres enthält über die Klasse floatbox das Attribut  
"overflow:hidden"; das reicht aus, um das globale Clearing zu  
verhindern. Ein aufs wesentliche reduziertes Beispiel:

http://www.lisardo.de/test/css/clearing-overflow.html

Und das ist letztlich die endgültige Lösung für das Problem, denke  
ich. Tribut ist lediglich eine zusätzliche div-Schachtel, das kann man  
in Kauf nehmen.

Viele Grüße
Peter

Am 16.08.2008 um 15:47 schrieb Soetebeer Dirk:

> Hallo Zusammen,
>
> nach dem ich auf einer statischen Webseite, die von Typo3 erzeugt  
> wurde, jeden einzelnen Teil auf YAML angepasst habe, ist mir  
> folgendes aufgefallen:
>
> In einer von TYPO3 dynamisch generierten CSS-Datei wird an manchen  
> Stellen die Anweisung clear: both verwendet.
>
> Clear: both bewirkt aber das der nachfolgende Content erst unterhalb  
> des letzten Elements fortgesetzt wird.
>
> Beispiel:
> Einstellung: Bild zentriert oberhalb des Textes azeigen
> Die CSS-Klasse "DIV.csc-textpic-clear" wird verwendet.
> In dieser Kasse steht die Anweisung "CLEAR: BOTH;"
>
> Durch diese Anweisung wird das Layout je nach verwendetem Content  
> mehr oder weniger mehr zerschossen.
>
> --------------------------
>
> Da die  Erweiterung Package Manager sich nicht installieren läßt,  
> kann die Erweiterung "YAML Framework for TYPO3" mit dem Extension  
> key ( fdfx_yaml ) leider nicht installiert werden.
>
> Daher wurde YAML direkt von yaml.de heruntergeladen und entsprechend  
> auf dem Webserver abgelegt.
>
> Weiß jemand vielleicht, wie man YAML korrekt in Typo3 integrieren  
> kann?
>
> Dirk
> _______________________________________________
> TYPO3-german mailing list
> TYPO3-german at lists.netfielders.de
> http://lists.netfielders.de/cgi-bin/mailman/listinfo/typo3-german