Im folgenden Code soll im ersten Teil zwei Tabellen aneinander gehängt und dann darunter eine dritte Tabelle mit Überschrift und Abstand zu den oberen platziert werden.
Mein Problem ist aber, dass die oberen Tabellen, bei einer gewissen Größe entweder schon am Bildschirm neben die Überschrift der unteren Tabelle einschneiden oder erst im Ausdruck. Obwohl ich aber in der unteren einen Abstand gesetzt haben.
Der Code ist abgespeckt. Ich habe in den ersten zwei Tabellen beide Male einen float gesetzt, weil die zweite Tabelle sich ursprünglich in einer While-Schleife befindet und deshalb mehfach generiert wird.
Auch wird eine Datenbankabfrage gemacht, mit der die Werte für die dritte Tabelle ermittelt werden. Aber bei mir funktionierte der abgespeckte Code soweit, um das Problem nachzustellen.
gesetzt. Das war falsch. Es heißt clear:left. Aber auch dann
ginge es nicht.
kein Wunder, gehört CSS doch in öffnende, nicht ins schließende Tags.
Erst als ich einfach experimentell die zweite Tabelle mit
abgeschlossen und nach dem PHP-Teil
eingefügt habe funktioniert es. Aber warum?
Weil es jetzt im öffnenden Tag steht. Das clear:left ist u.U. nicht nötig, wenn das Default-CSS nicht einen Floatt vorsieht. Die float:left aus den vorhergehenden Tabellen beziehen sich nur auf das jeweilige Element und müssen so eigentlich nicht gecleart werden.
Abstand bei margin im float
Mittlerweile glaube ich selbst die Antwort zu kennen.
Mit dieser Variante:
Abschluss der zweiten Tabelle
<?php }<br />?\>
Wird ein neues Element eingefügt, mit dem der Float geschlossen wird und alle nachfolgenden Elemente wie gewohnt angeordnet werden.
Interessant ist aber auch folgende Variante:
Abschluss der zweiten Tabelle
<?php }<br />?\>
In der ersten Variante scheint der Abstand mit margin-top sich nach dem oberen Element zu richten, welches gecleart ist.
Mit der zweiten Variante scheint sich der Abstand nach dem Body zu richten.
Ich muss nämlich bei der zweiten Variante in margin-top 900px angeben, um ungefähr den Abstand der ersten Variante zu bekommen. Wobei in der ersten nur mit 100px hinterlegt sind.
Gruß
In der ersten Variante scheint der Abstand mit margin-top sich
nach dem oberen Element zu richten, welches gecleart ist.
Klar. Weil die Elemente mit float aus dem Textfluss genommen werden. Stelle Dir als den Textfluss einen Stift vor, der immer die aktuelle Position markiert, wo das nächste Element hingesetzt wird.
Faktisch beginnt so das Element mit dem clear an genau der selben Stelle, wie die beiden Tabellen. Das kann man auch gut feststellen, indem man den Elementen einen farbigen Rahmen verpasst oder sie sich mit einem entsprechenden Hilfstool, wie z.B. Firebug, anzeigen lässt.
Ich muss nämlich bei der zweiten Variante in margin-top 900px
angeben, um ungefähr den Abstand der ersten Variante zu
bekommen. Wobei in der ersten nur mit 100px hinterlegt sind.
Versuche es mit einem padding statt margin, dann sollte es in beiden Varianten gleich sein.
soweit ich weiß wird durch den Float das Element aus dem
Textfluss herausgenommen und es über die gesamte Spannweite
komplett umflossen.
ich denke, Du meinst das Richtige.
Wenn natürlich schon vorher der Umfluss gestoppt werden soll,
dann ist ein Clear notwendig.
Nehmen wir 3 Paragraphen, a, b und c. Ohne Float würde das etwas so aussehen:
aaaaaa
aaaaaa
aaaaaa
bbb
cccccc
cccccc
cccccc
Wenn Du b nun ein float:left gibst, dann rückt es so nah es geht an den linken Rand (wo es jetzt schon ist) und wird dabei rechts umflossen, also etwa so:
aaaaaa
aaaaaa
aaaaaa
bbbccc
cccccc
cccccc
ccc
Wenn Du c zusätzlich ein clear:left oder clear:both verpasst, dann ist mit dem umfließen wieder Schluss. Im gezeigten Beispiel würde das Ergebnis wieder aussehen, wie zu Anfang.
Hätte b hingegen ein float:right, so wäre der Unterschied deutlich sichtbar.
Also ich habe nun folgenden Code für dein Beispiel getestet.
aaaaaa
aaaaaa
aaaaaa
bbb
cccccc
cccccc
cccccc
So wie in deinem Beispiel schaut es nicht aus. Wie müsste das gemacht werden? Und in dem o.g. Code wird das b nur umflossen, wenn auch bei c ein float:left gesetzt wird. Also ohne float:left bei c, umfließt c gar nicht. Dazu muss in diesem Beispiel gar kein clear gesetzt sein.
jetzt weiß ich auch warum der dritte Container den zweiten nicht umfließt. Weil er zu schmal war. Erhöhe ich die Breite bei width im dritten Container umfließt er den zweiten.
Faktisch beginnt so das Element mit dem clear an genau der
selben Stelle, wie die beiden Tabellen. Das kann man auch gut
feststellen, indem man den Elementen einen farbigen Rahmen
verpasst oder sie sich mit einem entsprechenden Hilfstool, wie
z.B. Firebug, anzeigen lässt.
Ich habe dazu folgenden Code getestet, aber die Rahmen dort sind ausschließlich um den Container des jeweiligen Elementes gesetzt und beginnen nicht alle an der selben Stelle.
Ich habe dazu folgenden Code getestet, aber die Rahmen dort
sind ausschließlich um den Container des jeweiligen Elementes
gesetzt und beginnen nicht alle an der selben Stelle.
Nein, weil der dritte Container durch das clear wieder in den Textfluss aufgenommen wird und er damit nach den anderen beiden positioniert wird.
Was ich schrieb von wegen, dass das Element mit dem clear an der selben Stelle steht, bezog sich vermutlich (ist schon so lange her) auf Dein Posting davor, wo Du das Element mit dem clear *vor* den anderen hattest.
Es ist relevant, in welcher Reihenfolge die Elemente kommen. Ein clear hebt das float wieder auf und setzt das Element hinter das letzte Element im Textfluss.
Übrigens, wozu hast Du die divs um die Tabellen gemacht? Du hast doch jeweils nur eine Tabelle im div und div definiert doch eine Gruppe. Eine Gruppe besteht aber aus mehr als einem Element.
Denkst Du - wie viele, obwohl ich nicht weiß, warum sie so denken - dass Du Deine CSS-Eigenschaften nicht der tabelle zuordnen kannst? Natürlich kannst Du das. Um CSS anzuwenden, kann man das in jedem Element tun, man muss die nicht nochmal in ein weiteres Element packen. Das ist wie Geschenke zweimal einpacken
Wenn noch Fragen offen sind, kann ich versuchen, sie zu lösen. Nur vielleicht nochmal das Ziel dazu schreiben, denn das hab ich inzwischen doch ein bisschen aus den Augen verloren
Und bitte lieber Links als Code, dank des tollen „mehr“-Features von w-w-w werden offensichtlich neuerdings keine Zeilenumbrüche mehr mitkopiert, wenn ich den Code in eine Datei kopiere.
Also mein Ziel war ganz einfach nochmal mein Verständnis für Floats zu prüfen.
Warum habe ich den Float der Tabelle nicht zugeordnet habe? Ist wahrscheinlich Gewohnheit.
Für mich war interessant, warum in dem von mir zuletzt genannten Code ein margin-top im dritten Container erst dann einen Effekt zeigt, wenn der Wert in px sehr hoch ist. Mit margin-top:10px bewegt sich der Container nicht. Hingegen mit einem padding-top bewegt sich der Container sofort. Meine Erklärung: Der letzte Container ist gecleart, der obere aber nach wie vor gefloatet. Das bedeutet, dass der Rand des letzten Containers sich direkt um den Inhalt herum bewegt, aber der Außenabstand läuft bis zum oberen Rand der Seite und nicht bis zum vorhergehnden Objekt. Also wird mit einem margin-top nur dann ein Abstand zum vorhergehnden Container erreicht, wenn der Wert so hoch ist, dass er den Abstand vom geclearten Container bis zum Seitenrand füllt. Anders als bei padding-top. Hier wird sofort ein Abstand erreich, da der Rand des Containers direkt um den Inhalt aufgrund des clears läuft.
Leider kann ich keinen Link senden, da es sich um einen geschützten Bereich handelt.
Aber für jetzt bin ich soweit fertig, hoffe ich.
Und nochmals herzlichen Dank für deine Antwort auf meine nachgereichte Frage.
Warum habe ich den Float der Tabelle nicht zugeordnet habe?
Ist wahrscheinlich Gewohnheit.
Schlechte Angewohnheit. Dafür gibts seit vielen, vielen Jahren keine Notwendigkeit.
Für mich war interessant, warum in dem von mir zuletzt
genannten Code ein margin-top im dritten Container erst dann
einen Effekt zeigt, wenn der Wert in px sehr hoch ist.
Das kann ich jetzt auch nicht 100% genau erklären, geht aber in die selbe Richtung wie collapsing margins und ähnliche Geschichten.
Wenn Du da nen Abstand willst, benutze an der Stelle padding.
aber der Außenabstand läuft bis zum oberen Rand der Seite und
nicht bis zum vorhergehnden Objekt.
Ja, irgendwie so ist das
Anders als bei
padding-top. Hier wird sofort ein Abstand erreich, da der Rand
des Containers direkt um den Inhalt aufgrund des clears läuft.
Ja, weil padding ja der Innenabstand innerhalb des Rahmens ist.
Leider kann ich keinen Link senden, da es sich um einen
geschützten Bereich handelt.
Man könnte das auf einen öffentlichen Bereich oder einen eigenen Webspace stellen und da den Link geben
Und nochmals herzlichen Dank für deine Antwort auf meine
nachgereichte Frage.
Wenn ich sie nicht übersehe, dann immer wieder gerne
