Kontaktforumlar CSS Tabelle durcheinander

[K H A N]

Hi Leute,

seit ihr so nett und unterstützt mich? Für Leute die sich damit auskennen, ist das bestimmt ein Klacks!

http://raksclub.de/rnb/#/contact

Wenn man im leeren KONTAKT Formular den OK Button klickt, kommen Fehlermeldungen bezüglich der Validierung und schwupps zerschiessen die Meldungen mir das Design des Kontaktformulares.

Danke für die Mithilfe!

Guten Rutsch heute Nacht...

[Gunnar Bittersmann]

@@K H A N

Wenn man im leeren KONTAKT Formular den OK Button klickt, kommen Fehlermeldungen bezüglich der Validierung und schwupps zerschiessen die Meldungen mir das Design des Kontaktformulares.

Dass du mit „Design“ vermutlich Darstellung oder Layout meinst, kann man noch erraten.

Was du mit „zerschiessen“ meinst nicht.

Und wie man dir helfen soll auch nicht.

Eine Fehlermeldung hab ich aber auch noch für dich: Deine Eingabefelder haben allesamt keine Beschriftung. Placeholder sind keine Label. Sie sollten aber eine Beschriftung haben, damit auch Nutzer von unterstützenden Technologien wie Screenreadern erkennen können, wozu die Eingabefelder da ist.

LLAP 🖖

[Tabellenkalk]

Hallo,

... Eingabefelder ... Eingabefelder ...

Wow, was du alles siehst. Bei mir wurden nicht mal die angezeigt. Und ich habe zwar JS deaktiviert, aber nicht CSS!

Gruß
Kalk

[K H A N]

Anbei Grafiken zur Verdeutlichung.

Hier das Bild so wie das Kontaktformular aussieht:

http://s10.postimg.org/h1kx49v55/Original.jpg

Folgendes Bild zeigt das Layout nach dem drücken von dem SENDEN/OK Button, also zerschiesstes Layout:

http://s10.postimg.org/acedo99t5/kaputt.jpg

Und so ungefähr sollte es aussehen:

http://s10.postimg.org/6u2drv8x5/richtig.jpg

[Gunnar Bittersmann]

@@K H A N

Anbei Grafiken zur Verdeutlichung.

Da ist leider nichts anbei.

Du hast die Möglichkeit, ein Bild zu verlinken oder es direkt ins Posting einzubetten. Für beides gibt es über dem Eingabefeld entsprechende Buttons.

Bitte nutze eine der Möglichkeiten, damit man sich die Bilder ansehen kann, ohne eine Copy-and-paste-Orgie starten zu müssen!

LLAP 🖖

[K H A N]

Ok Sorry hier nochmal der Post:

Jetziges Layout:

Nach klicken von OK:

So sollte es aussehen:

[Reinhard]

Hey,

Dein Browser sollte entsprechende Entwicklertools mitbringen - Du solltest mal anfangen zu lernen damit umzugehen.

Sieh dir die potentiellen Elemente im Inspektor an, bei denen du der Meinung bist, dass sie der "Übeltäter" sind und sieh dir an, wie die Darstellung sich ändert, wenn du an deren Style-Angaben rumdoktorst.

Falls du aber dennoch nicht weiterkommst wird dir sicher jemand einen Wink in die richtige Richtung geben können.

Reinhard

[K H A N]

Du meinst zB Web Developer für Chrome ja? Oder andere bessere Tools?

[Matthias Apsel]

Hallo K H A N,

Du meinst zB Web Developer für Chrome ja? Oder andere bessere Tools?

Oft reichen die bordeigenen Mittel. Rechte Maustaste → ‚Element untersuchen‘ oder ähnlich. Mein Favorit ist Firebug, obwohl da auch die Meinungen auseinander gehen.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@K H A N

Du willst also, dass hinzukommender Text keinen neuen Platz für sich beansprucht, sondern schon vorhandenen Leerraum ausfüllt.

Zwei Möglichkeiten:

• Die Fehlermeldungen absolut positionieren – vergiss das wieder.

• Die Fehlermeldungen schon initial ins HTML schreiben, aber per visibility: hidden unsichtbar machen und erst bei Bedarf (z.B. per JavaScript; geht aber auch per CSS) auf visible setzen.

Wobei jetzt noch nachzulesen wäre, wie Screenreader auf visibility: hidden reagieren und welche ARIA-Attribute man verwenden muss, damit Screenreader dynamische Änderungen dem Nutzer mitteilen.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Wobei jetzt noch nachzulesen wäre, wie Screenreader auf visibility: hidden reagieren und welche ARIA-Attribute man verwenden muss, damit Screenreader dynamische Änderungen dem Nutzer mitteilen.

Steve Faulkner hat was geschrieben: Simple inline error message pattern.

LLAP 🖖

[Tabellenkalk]

Hallo,

So sollte es aussehen

Offensichtlich beanspruchen die Fehlermeldungen Platz für eine ganze Zeile, bzw. verursachen einen Zeilenumbruch, sodass das nächste Eingabefeld eine neue Zeile bekommt. Steck die Meldungen in dasselbe Element wie das dazugehörige Feld. Das kannst du dann wie gewünscht positionieren.

Gruß
Kalk

[K H A N]

Ich probier mal danke!