Paula der HTML Tiger: Kommentarfeld zerschossen

Hallo,

ich weiß nicht warum, aber das Kommentarfeld unter den Beiträgen http://traum-deutung.de/wasser/ ist verschoben.

Der Firebug hilft mir leider nicht weiter, ich kann so viele Elemente abschalten wie ich will da bewegt sich nichts...

  1. Hallo,

    Wenn du zoomst (Strg+Mausrad) kannst du sehen wie sich das Layout ändert / zerschießt.

    Das Problem kann ich auch nicht lösen, zumal du einige sehr individuelle Lösungen benutzt (um es mal freundlich auszudrücken).

    Du solltest das p-Element nicht als Container mißbrauchen.

    Und du solltest dich mit float / clear beschäftigen. Das setzt du meiner Ansicht nach falsch ein und beachtest zum Beispiel die Vererbung nicht. Wer floatet muss auch clearen, und zwar an der richtigen Stelle.

    Gruss

    MrMurphy

    1. Lieber MrMurphy,

      zumal du einige sehr individuelle Lösungen benutzt (um es mal freundlich auszudrücken).

      die Seite ist mit Wordpress realisiert... und an den "individuellen Lösungen" ist wahrscheinlich das verwendete Template schuld.

      Liebe Grüße,

      Felix Riesterer.

      --
      "Wäre die EU ein Staat, der die Aufnahme in die EU beantragen würde, müsste der Antrag zurückgewiesen werden - aus Mangel an demokratischer Substanz." (Martin Schulz, Präsident des EU-Parlamentes)
  2. ich weiß nicht warum, aber das Kommentarfeld unter den Beiträgen http://traum-deutung.de/wasser/ ist verschoben.

    Du nimmst die <input>-Felder per float:left aus dem normalen Verlauf raus, d.h. alle anderen Elemente fließen rechts vorbei - und genau das machen die <label>-Elemente.

    Würdest du die Abstände (margin und padding) sowohl von <label> als auch bei den sie umgebenden <p> jenen von <input> anpassen, käme es hin, aber dann treibst du den Zweck von float völlig ad absurdum.
    float ist kein "Seitenwechselattribut", float entkoppelt die Darstellung des Elementes von seiner Umgebung. Eine Beschriftung und ihr Eingabefeld möchtest du aber ganz bestimmt nicht voneinander abkoppeln, also ist float hier schon grundsätzlich fehl am Platze.

    Sollen die Beschriftungen vor den Eingabefeldern stehen, solltest du sie auch vor den Eingabefeldern einbauen. Im Moment hast du sie dahinter und versuchst, diesen HTML-Fehler zu beheben, indem du sie CSS-seitig mit float davorklemmst.

    Ich würde für so einen Aufbau, links eine Spalte mit Beschriftungen, rechts eine Spalte mit den dazugehörigen Eingabefeldern, je eine Zeile pro Datum, glatt eine Tabelle benutzen, aber dafür bekomme ich hier sicher Haue ..

    1. @@Hannes:

      nuqneH

      Ich würde für so einen Aufbau, links eine Spalte mit Beschriftungen, rechts eine Spalte mit den dazugehörigen Eingabefeldern, je eine Zeile pro Datum, glatt eine Tabelle benutzen, aber dafür bekomme ich hier sicher Haue ..

      Nicht dafür.

      Aber dafür, dass du unerwähnt lässt, dass Beschriftungen und Eingabefelder auf vielen Geräten nicht in eine Zeile passen.

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      1. Om nah hoo pez nyeetz, Gunnar Bittersmann!

        Aber dafür, dass du unerwähnt lässt, dass Beschriftungen und Eingabefelder auf vielen Geräten nicht in eine Zeile passen.

        Dafür gibt es auch eine Lösung. Tabellen responsiv gestalten

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Bovis und Bovist.

        1. @@Matthias Apsel:

          nuqneH

          Dafür gibt es auch eine Lösung. Tabellen responsiv gestalten

          Da wär ich nie drauf gekommen. :-D

          Qapla'

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
          1. Om nah hoo pez nyeetz, Gunnar Bittersmann!

            Da wär ich nie drauf gekommen. :-D

            Wusst ichs doch ;-)

            Matthias

            --
            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Wal und Waldsterben.