[TYPO3-german] gridelements - neues Element

[Peter Linzenkirchner]

Hallo, 

das geht auch: 

Clearing mit overflow:hidden: 

wrap = <div class=„columns“>|</div>
.colums {overflow:hidden}

Nachteil: innerhalb der Container kann kein Element mehr enthalten sein, welches rausragt, sei es mit negativem margin oder über position:absolute oder position:relative. 

Clearing mit after (macht bootstrap):

wrap = <div class=„columns“>|</div>
.columns:before,
.columns:after {
   content:"";
   display:table;
}
.columns:after {
  clear:both;
}
.columns {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

Ein Überbllick über fast alle Clearing-Arten ist hier: 
http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best
(743)

Gruß
Peter




> Am 19.09.2015 um 14:59 schrieb Ralf-Rene Schröder <ralf.rene at online.de>:
> 
> dein Problem ist das du immer mit .columns das clearing machst, damit
> wird ein vorheriges float versäubert, aber nicht das deines letzten
> 2-spalters...
> 
> entweder machst du z.B. sowas:
> wrap = <div class="columns"> | <div style="clear:both;"></div> </div>
> 
> (besser natürlich mit einer Klasse)
> wrap = <div class="columns"> | <div class="clearing"></div> </div>
> .clearing {clear:both;}
> 
> oder nur ein div und CSS
> wrap = <div class="columns"> | <div></div> </div>
> .columns > div:last-child {clear:both;}
> 
> oder baust dir einen clearing rahmen für beliebige Elemente den du dann
> bei DDD benutzen kannst (aber sowas kann man dann ja vergessen)
> 
> meine Preferenz wäre die Klassenlösung, weil man da im HTML/TS sieht
> wofür das div da ist und es nicht ausnahmsweise löscht...
> Ich persönlich nutze bei sowas immer ein
> <hr class="clear-b invisible" />
> mit dem entsprechenden CSS, so habe ich einen sichtbaren und einen
> unsichtbaren Clearer zur Verfügung...
> 
> 
> Am 19.09.2015 um 14:07 schrieb Alto Speckhardt:
>> Hallo,
>> 
>> 
>> RRS> ist ein ganz normales floatproblem von CSS
>> RRS> wenn dein linkes GE mit A höher ist als BC zusammen, dann bleibt D quasi
>> RRS> an A "hängen"...
>> 
>> Ja, genau das sehe ich hier.
>> 
>> 
>> RRS> entweder ein clear:both für D
>> RRS> oder du baust es automatisch in dein 2-spaltiges GE mit einem
>> RRS> umfassenden Container und clearing mit ein (was wohl das sinnvollste
>> RRS> wäre)...
>> 
>> Das wäre dann Sache des TypoScript, oder? Dort habe ich momentan für 
>> den Zweispalter:
>> 
>> ***
>>  # ID des CE Backend Layout Records
>>  1 < lib.gridelements.defaultGridSetup
>>  1 {
>>    columns {
>>      # colPos ID
>>      1 < .default
>>      1.wrap = <div class="bel1_col1">|</div>
>>      # colPos ID
>>      2 < .default
>>      2.wrap = <div class="bel1_col2">|</div>
>>    }
>>    wrap = <div class="columns">|</div>
>>  }
>> ***
>> 
>> Müsste da einfach noch ein zusätzliches "wrap" drumrum?
>> 
>> 
>> RRS> wie sieht denn dein HTML für den 2-spalter aus?
>> 
>> Du meinst das CSS? Wie folgt:
>> 
>> ***
>> /* BE-layout ID 1: zweispaltig */
>> .columns {clear:both;}
>> .columns .bel1_col1 {float:left; width:48%; margin-right:2%}
>> .columns .bel1_col2 {float:left; width:48%; }
>> ***
>> 
>> 
>> RRS> und nutzt du irgendein CSS Framework?
>> 
>> Nein, keines.
>> 
>> 
> 
> 
> -- 
> image[FORMAT] - Ralf-René Schröder
> http://www.image-format.eu ... Wir geben Ihrem Image das richtige Format
> _______________________________________________
> TYPO3-german mailing list
> TYPO3-german at lists.typo3.org
> http://lists.typo3.org/cgi-bin/mailman/listinfo/typo3-german



--
Xing: http://www.xing.com/profile/Peter_Linzenkirchner
Web: http://www.typo3-lisardo.de
Facebook: http://tinyurl.com/lisardo-multimedia