CSS margin-top wird nicht beachtet.

S

smallwall

Lt. Junior Grade

Registriert

Feb. 2014

Beiträge

446

• 18. Dezember 2015

• #1

Hi,
ich habe hier ein Problem mit einem <div> der seine Eigenschaft nicht beachtet. Es scheint, als wäre der vorherige <div> einfach nicht vorhanden, und somit wird margin-top: auf den Seitenanfang angewandt?

Hier ein Bild:

Für den Browser: http://devphp.de/pgn2/show_game.php?id=1

Hat jemand ne Idee, wieso er sich so verhält? Habe extra eine min-height des vorherigen <div> eingebaut, aber er scheint wie Luft für den betreffenden <div> zu sein.

<div class="gameheader"> ist gemeint. HTML+CSS im obrigen Link.

mfg

 

Crizzo

Redakteur

Teammitglied

Registriert

Juli 2005

Beiträge

3.215

• 18. Dezember 2015

• #2

Also mit einem "float: left" für gameheader kannst du das lösen. Aber ich weiß ehrlich gesagt nicht, wieso der margin-top nicht greift. Weil das <div class="gameheader"> eben direkt einem "float"-Element folgt, wird dessen Abstand nicht korrekt berechnet. Du müsstest ergo vor dem .gameheader clearen, zwischen dem <div> darüber. Irgendwie "block formatting context" + "collapsing margins"

Brauchst natürlich dann eine Breite für .gameheader, sonst wird es so schmal gedrückt wie möglich.

 

Zuletzt bearbeitet: 18. Dezember 2015

L

LinPat

Cadet 2nd Year

Registriert

Nov. 2015

Beiträge

17

• 18. Dezember 2015

• #3

"float:left" aus gameboarddiv entfernen.

 

S

smallwall

Lt. Junior Grade

Ersteller dieses Themas

Registriert

Feb. 2014

Beiträge

446

• 18. Dezember 2015

• #4

Wow, danke =)

mit float:left auf gameheader ist der header rechts vom gametext (halt links umflossen), das möchte ich nicht, er soll unter dem Brett sein.

 

Crizzo

Redakteur

Teammitglied

Registriert

Juli 2005

Beiträge

3.215

• 18. Dezember 2015

• #5

Naja, div.men braucht natürlich noch ein clear, sonst ist er natürlich rechts drüber.

 

Jesterfox

Legende

Registriert

März 2009

Beiträge

44.484

• 18. Dezember 2015

• #6

smallwall schrieb:

Es scheint, als wäre der vorherige <div> einfach nicht vorhanden, und somit wird margin-top: auf den Seitenanfang angewandt?

Zum Vergrößern anklicken....

Durch sein float:left ist der vorhergehende DIV für die Margin-Berechnung tatsächlich "nicht vorhanden". Float nimmt Elemente aus dem normalen Fluss und gibt ihnen eine Sonderbehandlung, das führt zu einigen Nebeneffekten.

Soweit ich das sehe braucht das Gameboard aber eigentlich gar kein Float, oder?

 

S

smallwall

Lt. Junior Grade

Ersteller dieses Themas

Registriert

Feb. 2014

Beiträge

446

• 18. Dezember 2015

• #7

Habe die Seite und das Stylesheet etwas bereinigt, das Problem ist gelöst. Vielen Dank für Eure Zeit.

Ergänzung (19. Dezember 2015)

Für die Leute die vielleicht doch nochmal in diesen Thread schauen, hier die nächste Frage:

Weiß jemand warum der body in dieser Seite so verbuggt ist? Mir wird angezeigt, er wäre nur 89px hoch.

http://devphp.de/pgn2/openings.php

 

Jesterfox

Legende

Registriert

März 2009

Beiträge

44.484

• 19. Dezember 2015

• #8

Dürfte den selben Grund haben... die Elemente darunter sind alle gefloatet und zählen deshalb nicht zum Inhalt der die Höhe bestimmt. Dass sie trotzdem angezeigt werden liegt daran das per default overflow:visible gilt.

Es gab nen Weg das zu ändern... ich glaub den Body auch ein Float zu geben müsste helfen.

 

S

smallwall

Lt. Junior Grade

Ersteller dieses Themas

Registriert

Feb. 2014

Beiträge

446

• 20. Dezember 2015

• #9

Ok, nächste Frage:

http://devphp.de/pgn2/category_edit.php

label.set { width:350px; }

... wird nicht beachtet. Ebensowenig .set {... } Wieso nicht?

 

Jesterfox

Legende

Registriert

März 2009

Beiträge

44.484

• 20. Dezember 2015

• #10

Labels sind keine Blockelemente und haben daher (erst mal) keine Abmessungen... ein display:inline-block hilft.

Ich würd aber auch mal empfehlen sich etwas in CSS einzulesen, da scheint es schon an den Grundlagen zu hapern... SelfHtml wäre z.B. eine Anlaufstelle.