Tabelle schneidet in DIV-Container

Hallo zusammen!

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.

Gruß und Dank!

 Überschrift 
 Tabelle1 

EintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintrag
Tabelle2
JanFebMärAprMaiJunJulAugSepOktNovDez<?php foreach($zeile as $key=>$z)
{
echo „“ . „“ . „Eintrag“ . „“;
for($y=1;$y" . „Beitrag“ . „“;
}
echo „“;
}
?>

Moin,

kann es sein, dass Dir einfach die CSS-Eigenschaft „clear“ fehlt?

Gruß,
-Efchen

Hallo!

Ich habe ja nach der zweiten Tabelle

gesetzt. Das war falsch. Es heißt clear:left. Aber auch dann ginge es nicht.

Erst als ich einfach experimentell die zweite Tabelle mit

abgeschlossen und nach dem PHP-Teil

eingefügt habe funktioniert es. Aber warum?

Hallo,

Ich habe ja nach der zweiten Tabelle

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.

Gruß

osmodius

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ß 

Moin,

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.

Liebe Grüße,
-Efchen

Super!
Genau das war die Lösung!

Mit Padding hat es geklappt! Der Vollständigkeit halber hier der Code:

<?php }<br />?\> 


So soll es sein!

Danke! 

@osmodius
Hallo nochmal,

soweit ich weiß wird durch den Float das Element aus dem Textfluss herausgenommen und es über die gesamte Spannweite komplett umflossen.

Wenn natürlich schon vorher der Umfluss gestoppt werden soll, dann ist ein Clear notwendig.

Ist das so richtig?

Moin,

Genau das war die Lösung!
Mit Padding hat es geklappt!

Und Du hast verstanden, warum?
Oder fragst Du das selbe nächstes Mal wieder? :smile:

Gruß,
-Efchen

Das sehen wir dann das nächste Mal *lol*

Hallo Alex,

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.

Gruß

osmodius

Hi!

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.

Oder mache ich was falsch?

Gelöst!
Hallo nochmal,

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.

Gruß

@Efchen
Hallo nochmal :smile:

Also jetzt habe ich doch nochmal was probiert.

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.

Hilfst du mir nochmal?

EintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintrag 
 
EintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintrag 
 
EintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintragEintrag 

Vielen Dank!

Moin,

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 :smile:

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 :smile:

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.

Liebe Grüße,
-Efchen

Hallo und danke für deine Antwort!

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.

Moin,

Warum habe ich den Float der Tabelle nicht zugeordnet habe?
Ist wahrscheinlich Gewohnheit.

Schlechte Angewohnheit. :smile: 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 :wink:

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 :wink:

Und nochmals herzlichen Dank für deine Antwort auf meine
nachgereichte Frage.

Wenn ich sie nicht übersehe, dann immer wieder gerne :smile:

Viel Erfolg weiterhin,
-Efchen

Danke!
Herzlichen Dank nochmals!