CSS vertical align checkbox label

0

Formulare sind das wichtigste Element auf kommerziellen Internetseiten und ein wesentlicher Erfolgsfaktor für professionelles Webdesign. Aus genau diesem Grund muß man sich hier auch die größte Mühe bei geben, damit man den User auch von seinem Formular überzeugt. Hier zählt neben der guten Usability auch vor allem das mit HTML und CSS umgesetzte Layout.

CSS vertical align checkbox label

CSS vertical align checkbox label

Da ja immer noch das 1er HTTP Protokoll genutzt wird, sind die Formularelemente selber allerdings noch aus dem letzten Jahrtausend. Das ist zwar schwer vorstellbar, aber dennoch die Wahrheit. Formularelemente zur Eingabe, wie Radio-Buttons, Checkboxen und auch Drop-Down Menus können hier immer wieder nicht zeitgemäß im Layout auffallen. Das alleine wäre aber nicht so schlimm, gäbe es nicht zusätzlich noch Probleme mit ihrer Ausrichtung.

CSS vertical align checkbox label

Bei Checkboxen gibt es eine Möglichkeit diese global über das CSS anzusprechen und richtig zu positionieren. Die folgenden Angaben zur bottom Positionierung sind natürlich abhängig von der Schriftgröße, die man auf der Internetseite einsetzt.

Einen jsfiddle Link zu dem Code Beispiel gibt es hier http://jsfiddle.net/576wT/

About Author

PHP Kurs und Inhouse Schulungen für Webdevelopment mit Continuous Integration - Clean Coder, Blogger, Autor, Dozent und Senior Webdeveloper www.rolandgolla.de

Leave A Reply

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.