Ein DIV im Grid tanzt aus der Reihe

[Killua]

Wieder ein megaeinfaches Problem, doch ich finde den Fehler nicht.

Ein Grid, welches bisher einwandfrei tat, was es soll, ist plötzlich, 1000 %-ig ohne Veränderung nicht mehr in der Lage, Elemente nebeneinander darzustellen. Denn das dritte Element (kopfspalte3) verkrümelt sich immer außerhalb dieser Darstellung!

Konkret:

  <div class="kopf">
    <div class="kopfspalte1"><img src="bild1.jpg"></div>
    <div class="kopfspalte2"><img src="bild2.jpg"></div>
    <div class="kopfspalte3"><img src="bild3.jpg"></div>
  </div>

wird mittels

.kopf { display: grid; grid-auto-flow: column; }

Bisher wurden (vorbehaltlich genug Platz) die Bilder nebeneinander gezeigt. Wegen 'auto' sogar egal wie viele Bilder DIVs man hineinbaute.

Jetzt aber rutscht das dritte Element außer- und unterhalb des Grids!

Aha, der Browser zeigt DIV kopfspalte3 ausserhalb (!!!) von kopf ! 😱

Das sieht dann in den Browser-Tools so aus:

  <div class="kopf">
    <div class="kopfspalte1"><img src="bild1.jpg"></div>
    <div class="kopfspalte2"><img src="bild2.jpg"></div>
  </div>
<div class="kopfspalte3"><img src="bild3.jpg"></div>

Wie kompass???

Und wie repariert man das nachhaltig? So, dass dieses Dokument in ein paar Wochen, Monaten Jahren auch noch so aussieht? Gibt es stabilere Grid Codes als den?

PS: Auch mit fix definierten grid-template-columns 1fr 1 fr 1fr oder mit auto auto auto das Gleiche Bild: Ein DIV tanzt aus der Reihe

[MudGuard]

Hi,

Ein Grid, welches bisher einwandfrei tat, was es soll, ist plötzlich, 1000 %-ig ohne Veränderung nicht mehr in der Lage, Elemente nebeneinander darzustellen. Denn das dritte Element (kopfspalte3) verkrümelt sich immer außerhalb dieser Darstellung!

Konkret:

  <div class="kopf">
    <div class="kopfspalte1"><img src="bild1.jpg"></div>
    <div class="kopfspalte2"><img src="bild2.jpg"></div>
    <div class="kopfspalte3"><img src="bild3.jpg"></div>
  </div>

ist das echt kopierter Sourcecode, oder ist das das, was Du MEINST, zu haben?

Jetzt aber rutscht das dritte Element außer- und unterhalb des Grids!

Vermutung: da ist irgendwo (nach dem zweiten Bild) ein </div> zu viel.

Wobei ich mich eh frage, warum da noch divs um die Bilder außenrum sind.

cu,
Andreas a/k/a MudGuard

[Killua]

ist das echt kopierter Sourcecode, oder ist das das, was Du MEINST, zu haben?

Naja, das ist so: Der echte Code ist mit komplexer, mit einem Haufen PHP und so (deswegen auch DIVs um Bilder usw.) Egal.

Ich habe das abgespeckt und den Code, genau wie er hier oben steht in die betreffende Site gestellt, eben um alle Fehlerquellen auschließen. Also ja, genau der Code steht dort und sonst nix! Und genau der einfache Code tut nicht, was er soll.

Vermutung: da ist irgendwo (nach dem zweiten Bild) ein </div> zu viel.

Ich finde echt nix ...

Ich werde den ganzen Kram neu aufbauen, irgendwo pfuscht was includetes rein oder so.

Sorry für die blöde Frage, aber wie gesagt da ist etwas neues in der Umgebung das da reinkrätscht.

Aber ansonsten wäre der Code (abgesehen von unnötigen DIVs um Bilder) ja richtig? Oder gäbe es bessere Methoden, ist vllt. doch die alte Flexbox besser oder noch weiter zurück mir float?

Danke!

[MudGuard]

Hi,

Der echte Code ist mit komplexer, mit einem Haufen PHP und so (deswegen auch DIVs um Bilder usw.) Egal.

guck nicht in den PHP-Code, wenn Du ein HTML-Problem hast. Schau im Browser in den Source-Code, der dort ankommt. Und wenn Du dann den Fehler gefunden hast, mußt Du halt zurückverfolgen, wo das herkommt.

Mehr kann ich dazu nicht sagen, denn die problematische Seite kann ich nicht sehen.

cu,
Andreas a/k/a MudGuard

[Killua]

guck nicht in den PHP-Code, wenn Du ein HTML-Problem hast.

Doch! Denn von dort kommt das Problem, 100 pro!

Schau im Browser in den Source-Code, der dort ankommt.

Ebenda zeigt sich der verschobene DIV

Und wenn Du dann den Fehler gefunden hast, mußt Du halt zurückverfolgen, wo das herkommt.

Aus PHP. Und wenn das HTML dieses Dokuments sauber ist, dann durch irgendeine includete Sache oder so ...

[Rolf B]

Hallo Killua,

Es gibt einen Unterschied zwischen Elemente-Inspektor und Sourcecode. Wohin guckst du?

Der HTML Sourcecode zeigt, was das PHP ausgibt. Je nach Browser findest du ihn im Netzwerk Tab oder in der Quellcode-Ansicht. Du kannst dem Browser auch direkt sagen: Quellcode anzeigen.
Der Inspektor zeigt das DOM, also das, was der Browser draus macht.

Wenn das DOM falsch ist und du im PHP nichts siehst, muss das generierte HTML untersucht werden.

Rolf

[Killua]

Hallo Killua,

Es gibt einen Unterschied zwischen Elemente-Inspektor und Sourcecode.

Weiß ich doch Mit "Browser-Tools" meine ich stets eben diesen

Wenn das DOM falsch ist und du im PHP nichts siehst, muss das generierte HTML untersucht werden.

Ich habs inzwischen gefunden, es war echt eine includete PHP, die das verursachte.

Konkret sollte ein weiteres Div Element angezeigt werden, aber nur wenn ... bestimmte Bedingungen, Konfigs das festlegen. Das Endif der Abfrage war um eine Zeile verrutscht und zeigte quasi ein halbes Div - das brachte alles durcheinander … Das war aber nur in einer seltenen Ausnahmesituation auch im generierten Quelltext so zu sehen, daher die Annahme, das Grid sei ehe sauber.

Danke an alle, ist gelöst!