CSS: float clearing begrenzen?

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

12.01.2012 - 20:48

Angenommen ich habe folgendes HTML und CSS setup: http://dl.dropbox.com/u/2309215/cssfloats/index.html

Also eine Art Menü, das links floated, danach normalen content in Form von mehreren article divs. In diesen articles befindet sich wiederum ein floatendes Element. Damit das article Element mit dem floatenden Element (Bild bspw.) abschließt, befindet sich innerhalb des articles noch ein clearing div (ich weiß, kann man auch eleganter mit :after lösen).

Das clearing verursacht aber, dass der erste Artikel nach dem floatendem Menü bis zum Ende des Menüs aufgezogen wird. Gibt es irgendeine Möglichkeit das clearing nur auf Elemente innerhalb des Eltern Elementes zu begrenzen?

ill

...

Registered: Nov 2003
Location: Salzburg
Posts: 2053

12.01.2012 - 22:49

Spricht etwas dagegen, die articles in einen eigenen Wrapper zu legen?

edit:

rein theoretisch würds auch so funktionieren (mit gesetzter width):

http://dabblet.com/gist/1603533

Bearbeitet von ill am 12.01.2012, 23:24

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

12.01.2012 - 23:43

Prinzipiell nicht, aber so funktioniert es auch nur, wenn man eine width für den Container der articles angibt. Problem ist aber, dass ich diesen Content immer auf die verfügbare Größe aufziehen will, auch wenn das menu Element gar nicht im HTML vorkommt. Wenn man den Container der articles eine width gibt, dann ist das natürlich nicht mehr der Fall.

Bearbeitet von Spikx am 12.01.2012, 23:46

ill

...

Registered: Nov 2003
Location: Salzburg
Posts: 2053

12.01.2012 - 23:51

Kannst du feststellen, wann das menu-Element nicht vorkommt? Dann könnte man das relativ einfach mit einer Klasse am Wrapper lösen.

Eine Methode, wie man die clear-Regel nur auf einen Parent beschränkt, fällt mir nämlich gerade auch nicht ein.

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

13.01.2012 - 00:01

Zitat von ill
Kannst du feststellen, wann das menu-Element nicht vorkommt? Dann könnte man das relativ einfach mit einer Klasse am Wrapper lösen.

Theoretisch ja, praktisch wollt ich mir die Arbeit einfach ersparen

. Dachte nicht, dass das so ein Problem ist, einfach ein Element floaten zu lassen, unabhängig von anderen floats und clears in anderen Elementen.

ill

...

Registered: Nov 2003
Location: Salzburg
Posts: 2053

13.01.2012 - 00:03

Es würde auch so funktionieren:

http://dabblet.com/gist/1603686

die articles werden hier einfach auf "display: table" gesetzt, was das width-Attribut für den contentWrapper nicht mehr nötig macht.
Ist ein bisserl ein Hack und leider von IE7 nicht unterstützt.

In meinem Beispiel gibts halt jetzt noch das Problem, dass der Container nun generell über die ganze Seite geht, d.h. sobald die height des Menus nicht mehr ausreicht, werden die articles ganz an den Rand positioniert. Dürfte mit einem Padding mit dem Value der Width des Menüs auf dem contentWrapper jedoch zu lösen sein (wo wir dann wieder beim Problem ohne Menü wären

)

Bearbeitet von ill am 13.01.2012, 00:06

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

13.01.2012 - 00:10

Hm, gut das nehm ich vorerstmal in Kauf

. Dass der content links keinen Margin nach dem Menü hat ist mir bewusst, prinzipiell so gewollt. Weil ansonsten müsste ich entweder tatsächlich eine table machen oder eben server seitig Klassen setzen/verändern, wenn auf einer Seite das Menü nicht da ist.

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

13.01.2012 - 00:19

Na ok, display:table; is auch nix, dadurch werden die divs ja nicht mehr auf die ganze Breite aufgezogen (wenn nicht genügend content da ist).

Flochiller

Here to stay

Registered: Jan 2004
Location: Wien
Posts: 1521

13.01.2012 - 10:48

http://little-boxes.de/lb1/14.5-vie...von-floats.html
weil ichs grad in RL lese das Buch. hth!

ill

...

Registered: Nov 2003
Location: Salzburg
Posts: 2053

13.01.2012 - 11:51

@Spikx: Wahnsinn, das is mir noch nie aufgefallen, ich hab aber auch zum größten Teil mit Layouts mit fixer Breite zu tun. Floating ohne Width-Angabe wird sehr schnell zu einem richtigen "pain in the ass"

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

13.01.2012 - 12:12

Zitat von Flochiller
http://little-boxes.de/lb1/14.5-vie...von-floats.html
weil ichs grad in RL lese das Buch. hth!

Hm, ganz hab ich nicht verstanden wie da auf http://little-boxes.de/lb1/14.7-set...ix-a-float.html das globale clearing Problem gelöst werden soll. Zumindest für meinen Fall. In seinem Beispiel funktioniert das ja nur, weil die divs eine fixe Breite haben, oder?

Zitat von ill
@Spikx: Wahnsinn, das is mir noch nie aufgefallen, ich hab aber auch zum größten Teil mit Layouts mit fixer Breite zu tun. Floating ohne Width-Angabe wird sehr schnell zu einem richtigen "pain in the ass"

Naja, das Layout an sich hat ja eh eine fixe Breite (wie in meinem Beispiel). Der Content halt nicht

. Aber ich bin momentan doch dazu übergegangen, vorher festzustellen ob das Menü da ist oder nicht und daher auch entsprechend eine Klasse festlege (oder nicht). Nur muss ich mich da in meinem Fall wieder mit Typoscript ärgern :rolleyes:

.

PIMP

Moderator

Registered: Sep 2002
Location: Wien ❤️
Posts: 8816

13.01.2012 - 12:33

haha typo3

scnr

Flochiller

Here to stay

Registered: Jan 2004
Location: Wien
Posts: 1521

13.01.2012 - 12:35

Zitat von Spikx
Hm, ganz hab ich nicht verstanden wie da auf http://little-boxes.de/lb1/14.7-set...ix-a-float.html das globale clearing Problem gelöst werden soll. Zumindest für meinen Fall. In seinem Beispiel funktioniert das ja nur, weil die divs eine fixe Breite haben, oder?

Ok habs wahrscheinlich nicht ganz gecheckt. Sorry bin grad ein bisschen schnupfenbedingt benebelt...

ill

...

Registered: Nov 2003
Location: Salzburg
Posts: 2053

13.01.2012 - 12:43

Zitat von PIMP
haha typo3 scnr

Gib mir bitte einen Tipp für was besseres, bisher hat mir noch jedes ausprobierte CMS auf die ein oder andere Art und Weise Wutausbrüche und graue Haare beschert

Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	12.01.2012 - 20:48 Angenommen ich habe folgendes HTML und CSS setup: http://dl.dropbox.com/u/2309215/cssfloats/index.html Also eine Art Menü, das links floated, danach normalen content in Form von mehreren article divs. In diesen articles befindet sich wiederum ein floatendes Element. Damit das article Element mit dem floatenden Element (Bild bspw.) abschließt, befindet sich innerhalb des articles noch ein clearing div (ich weiß, kann man auch eleganter mit :after lösen). Das clearing verursacht aber, dass der erste Artikel nach dem floatendem Menü bis zum Ende des Menüs aufgezogen wird. Gibt es irgendeine Möglichkeit das clearing nur auf Elemente innerhalb des Eltern Elementes zu begrenzen?
ill ... Registered: Nov 2003 Location: Salzburg Posts: 2053	12.01.2012 - 22:49 Spricht etwas dagegen, die articles in einen eigenen Wrapper zu legen? edit: rein theoretisch würds auch so funktionieren (mit gesetzter width): http://dabblet.com/gist/1603533 Bearbeitet von ill am 12.01.2012, 23:24
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	12.01.2012 - 23:43 Prinzipiell nicht, aber so funktioniert es auch nur, wenn man eine width für den Container der articles angibt. Problem ist aber, dass ich diesen Content immer auf die verfügbare Größe aufziehen will, auch wenn das menu Element gar nicht im HTML vorkommt. Wenn man den Container der articles eine width gibt, dann ist das natürlich nicht mehr der Fall. Bearbeitet von Spikx am 12.01.2012, 23:46
ill ... Registered: Nov 2003 Location: Salzburg Posts: 2053	12.01.2012 - 23:51 Kannst du feststellen, wann das menu-Element nicht vorkommt? Dann könnte man das relativ einfach mit einer Klasse am Wrapper lösen. Eine Methode, wie man die clear-Regel nur auf einen Parent beschränkt, fällt mir nämlich gerade auch nicht ein.
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	13.01.2012 - 00:01 Zitat von ill Kannst du feststellen, wann das menu-Element nicht vorkommt? Dann könnte man das relativ einfach mit einer Klasse am Wrapper lösen. Theoretisch ja, praktisch wollt ich mir die Arbeit einfach ersparen . Dachte nicht, dass das so ein Problem ist, einfach ein Element floaten zu lassen, unabhängig von anderen floats und clears in anderen Elementen.
ill ... Registered: Nov 2003 Location: Salzburg Posts: 2053	13.01.2012 - 00:03 Es würde auch so funktionieren: http://dabblet.com/gist/1603686 die articles werden hier einfach auf "display: table" gesetzt, was das width-Attribut für den contentWrapper nicht mehr nötig macht. Ist ein bisserl ein Hack und leider von IE7 nicht unterstützt. In meinem Beispiel gibts halt jetzt noch das Problem, dass der Container nun generell über die ganze Seite geht, d.h. sobald die height des Menus nicht mehr ausreicht, werden die articles ganz an den Rand positioniert. Dürfte mit einem Padding mit dem Value der Width des Menüs auf dem contentWrapper jedoch zu lösen sein (wo wir dann wieder beim Problem ohne Menü wären ) Bearbeitet von ill am 13.01.2012, 00:06
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	13.01.2012 - 00:10 Hm, gut das nehm ich vorerstmal in Kauf . Dass der content links keinen Margin nach dem Menü hat ist mir bewusst, prinzipiell so gewollt. Weil ansonsten müsste ich entweder tatsächlich eine table machen oder eben server seitig Klassen setzen/verändern, wenn auf einer Seite das Menü nicht da ist.
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	13.01.2012 - 00:19 Na ok, display:table; is auch nix, dadurch werden die divs ja nicht mehr auf die ganze Breite aufgezogen (wenn nicht genügend content da ist).
Flochiller Here to stay Registered: Jan 2004 Location: Wien Posts: 1521	13.01.2012 - 10:48 http://little-boxes.de/lb1/14.5-vie...von-floats.html weil ichs grad in RL lese das Buch. hth!
ill ... Registered: Nov 2003 Location: Salzburg Posts: 2053	13.01.2012 - 11:51 @Spikx: Wahnsinn, das is mir noch nie aufgefallen, ich hab aber auch zum größten Teil mit Layouts mit fixer Breite zu tun. Floating ohne Width-Angabe wird sehr schnell zu einem richtigen "pain in the ass"
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	13.01.2012 - 12:12 Zitat von Flochiller http://little-boxes.de/lb1/14.5-vie...von-floats.html weil ichs grad in RL lese das Buch. hth! Hm, ganz hab ich nicht verstanden wie da auf http://little-boxes.de/lb1/14.7-set...ix-a-float.html das globale clearing Problem gelöst werden soll. Zumindest für meinen Fall. In seinem Beispiel funktioniert das ja nur, weil die divs eine fixe Breite haben, oder? Zitat von ill @Spikx: Wahnsinn, das is mir noch nie aufgefallen, ich hab aber auch zum größten Teil mit Layouts mit fixer Breite zu tun. Floating ohne Width-Angabe wird sehr schnell zu einem richtigen "pain in the ass" Naja, das Layout an sich hat ja eh eine fixe Breite (wie in meinem Beispiel). Der Content halt nicht . Aber ich bin momentan doch dazu übergegangen, vorher festzustellen ob das Menü da ist oder nicht und daher auch entsprechend eine Klasse festlege (oder nicht). Nur muss ich mich da in meinem Fall wieder mit Typoscript ärgern .
PIMP Moderator Registered: Sep 2002 Location: Wien ❤️ Posts: 8816	13.01.2012 - 12:33 haha typo3 scnr
Flochiller Here to stay Registered: Jan 2004 Location: Wien Posts: 1521	13.01.2012 - 12:35 Zitat von Spikx Hm, ganz hab ich nicht verstanden wie da auf http://little-boxes.de/lb1/14.7-set...ix-a-float.html das globale clearing Problem gelöst werden soll. Zumindest für meinen Fall. In seinem Beispiel funktioniert das ja nur, weil die divs eine fixe Breite haben, oder? Ok habs wahrscheinlich nicht ganz gecheckt. Sorry bin grad ein bisschen schnupfenbedingt benebelt...
ill ... Registered: Nov 2003 Location: Salzburg Posts: 2053	13.01.2012 - 12:43 Zitat von PIMP haha typo3 scnr Gib mir bitte einen Tipp für was besseres, bisher hat mir noch jedes ausprobierte CMS auf die ein oder andere Art und Weise Wutausbrüche und graue Haare beschert

CSS: float clearing begrenzen?

Forum Index > Software > Coding Stuff

Spikx

ill

Spikx

ill

Spikx

ill

Spikx

Spikx

Flochiller

ill

Spikx

PIMP

Flochiller

ill