@@André > ich arbeite gerade an einem kleinen Redesign für meine Webseite. Derzeit sind die Zahlungsoptionen dran. Was sagt ihr zu meinem Code, könnte er noch gekürzt werden? > > [http://codepen.io/anon/pen/qZmzBX](http://codepen.io/anon/pen/qZmzBX) Der Radiobutton hat keine Beschriftung. Damit er eine hat, müsste er entweder eine ID haben und das `label`-Element ein entsprechendes [`for`-Attribut](https://wiki.selfhtml.org/wiki/Label#label) mit gleichem Wert, oder das `label`-Element umfasst sowohl den Radiobutton als auch die Beschriftung. Das Bild mit dem Papier-Überweisungsformular gehört auf jeden Fall auch mit ins `label`-Element. „Vorauskasse“, „Vorkasse“, was denn nun? Da ist zu viel redundanter (und dann auch noch widesprüchlicher) Text. Wenn du das Bild eines Papier-Überweisungsformulars (kennt die überhaupt noch jemand (in deiner Zielgruppe)?) haben willst, dann nimm nur das Überweisungsformular ohne den Text als Grafik. Das Bild braucht keinen Alternativtext („Vorauskasse“ steht ja schon da), also `alt=""`. (Das `alt`-Attribut muss vorhanden sein!) JPEG ist für diese Art von Grafiken das falsche Grafikformat, siehe Artikel [GIF oder JPEG](http://aktuell.de.selfhtml.org/artikel/grafik/gif-jpeg/) (das dort über GIF Gesagte gilt auch für PNG) und [Das richtige Grafikformat für den richtigen Zweck](http://webkrauts.de/artikel/2008/das-richtige-grafikformat-fuer-den-richtigen-zweck). Und ja, der Code kann gekürzt werden. Die inneren `div`s sind überflüssig. Das sollte reichen: ~~~html <div class="zahlung"> <input type="radio" name="payment" value="vorkasse" id="vorkasse"> <label for="vorkasse"> <span class="titel">Vorauskasse</span> Bezahlen per Banküberweisung <img src="http://www.bilder-upload.eu/upload/de2e57-1458857412.jpg" alt="" /> </label> </div> ~~~ Wobei die Zahlungsarten auch durchaus `li`s in einem `ul`-Element sein dürfen. Es besteht [kein Grund](http://www.w3.org/International/questions/qa-escapes#not) [^1], das ü in „Banküberweisung“ zu verst&uuml;mmeln. [^1]: In Kürze gibt’s das auch wieder auf deutsch. In deinem Stylesheet finden sich viele _magic numbers_{: lang="en"} wie `height: 4.375em` – Werte, die du auf deinem System ermittelt hast. Auf anderen Systemen passen die nicht. _Magic numbers_{: lang="en"} sind zu vermeiden. Statt die Höhe festzulegen, verwendest du besser `padding`. > Eine weitere Frage, ist es sinnvoll den Hintergrund zu ändern, wenn der User sich für eine Zahlungsoption entschieden hat? Als visuelle Verdeutlichung des gedrückten Radiobuttons? Kann man machen. > Wenn ja, kann ich dieses allein mit CSS umsetzten Bei entsprechendem Markup, ja. Wenn Radiobutton und `label` aufeinanderfolgene Geschwisterelemente sind, kannst das du mit ~~~css :checked + label { background: … } ~~~ Um den Radiobutton _visuell_ in die `label`-Box zu legen, kann diese `padding-left` und negativen `margin-left` bekommen und der Radiobutton per `position: relative; z-index: 1` nach vorn geholt werden. > oder muss ich beim Klick auf den Radiobutton mit jQuery eine weitere Klasse hinzufügen? Das ginge auch mit JavaScript. LLAP 🖖 -- „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“ „Hat auf dem Forum herumgelungert …“ (Wachen in Asterix 36: Der Papyrus des Cäsar)

@@André > ich arbeite gerade an einem kleinen Redesign für meine Webseite. Derzeit sind die Zahlungsoptionen dran. Was sagt ihr zu meinem Code, könnte er noch gekürzt werden? > > [http://codepen.io/anon/pen/qZmzBX](http://codepen.io/anon/pen/qZmzBX) Der Radiobutton hat keine Beschriftung. Damit er eine hat, müsste er entweder eine ID haben und das `label`-Element ein entsprchendes [`for`-Attribut](https://wiki.selfhtml.org/wiki/Label#label) mit gleichem Wert, oder das `label`-Element umfasst sowohl den Radiobutton als auch die Beschriftung. Das Bild mit dem Papier-Überweisungsformular gehört auf jeden Fall auch mit ins `label`-Element. „Vorauskasse“, „Vorkasse“, was denn nun? Da ist zu viel redundanter (und dann auch noch widesprüchlicher) Text. Wenn du das Bild eines Papier-Überweisungsformulars (kennt die überhaupt noch jemand (in deiner Zielgruppe)?) haben willst, dann nimm nur das Überweisungsformular ohne den Text als Grafik. Das Bild braucht keinen Alternativtext („Vorauskasse“ steht ja schon da), also `alt=""`. (Das `alt`-Attribut muss vorhanden sein!) JPEG ist für diese Art von Grafiken das falsche Grafikformat, siehe Artikel [GIF oder JPEG](http://aktuell.de.selfhtml.org/artikel/grafik/gif-jpeg/) (das dort über GIF Gesagte gilt auch für PNG) und [Das richtige Grafikformat für den richtigen Zweck](http://webkrauts.de/artikel/2008/das-richtige-grafikformat-fuer-den-richtigen-zweck). Und ja, der Code kann gekürzt werden. Die inneren `div`s sind überflüssig. Das sollte reichen: ~~~html <div class="zahlung"> <input type="radio" name="payment" value="vorkasse" id="vorkasse"> <label for="vorkasse"> <span class="titel">Vorauskasse</span> Bezahlen per Banküberweisung <img src="http://www.bilder-upload.eu/upload/de2e57-1458857412.jpg" alt="" /> </label> </div> ~~~ Wobei die Zahlungsarten auch durchaus `li`s in einem `ul`-Element sein dürfen. Es besteht [kein Grund](http://www.w3.org/International/questions/qa-escapes#not) [^1], das ü in „Banküberweisung“ zu verst&uuml;mmeln. [^1]: In Kürze gibt’s das auch wieder auf deutsch. In deinem Stylesheet finden sich viele _magic numbers_{: lang="en"} wie `height: 4.375em` – Werte, die du auf deinem System ermittelt hast. Auf anderen Systemen passen die nicht. _Magic numbers_{: lang="en"} sind zu vermeiden. Statt die Höhe festzulegen, verwendest du besser `padding`. > Eine weitere Frage, ist es sinnvoll den Hintergrund zu ändern, wenn der User sich für eine Zahlungsoption entschieden hat? Als visuelle Verdeutlichung des gedrückten Radiobuttons? Kann man machen. > Wenn ja, kann ich dieses allein mit CSS umsetzten Bei entsprechendem Markup, ja. Wenn Radiobutton und `label` aufeinanderfolgene Geschwisterelemente sind, kannst das du mit ~~~css :checked + label { background: … } ~~~ Um den Radiobutton _visuell_ in die `label`-Box zu legen, kann diese `padding-left` und negativen `margin-left` bekommen und der Radiobutton per `position: relative; `z-index: 1` nach vorn geholt werden. > oder muss ich beim Klick auf den Radiobutton mit jQuery eine weitere Klasse hinzufügen? Das ginge auch mit JavaScript. LLAP 🖖 -- „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“ „Hat auf dem Forum herumgelungert …“ (Wachen in Asterix 36: Der Papyrus des Cäsar)