Zahlungsoptionen mit CSS gestallten

[André]

Hallo,

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

Eine weitere Frage, ist es sinnvoll den Hintergrund zu ändern, wenn der User sich für eine Zahlungsoption entschieden hat? Wenn ja, kann ich dieses allein mit CSS umsetzten oder muss ich beim Klick auf den Radiobutton mit jQuery eine weitere Klasse hinzufügen?

[Gunnar Bittersmann]

@@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

Der Radiobutton hat keine Beschriftung. Damit er eine hat, müsste er entweder eine ID haben und das label-Element ein entsprechendes for-Attribut 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 (das dort über GIF Gesagte gilt auch für PNG) und Das richtige Grafikformat für den richtigen Zweck.

Und ja, der Code kann gekürzt werden. Die inneren divs sind überflüssig. Das sollte reichen:

<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 lis in einem ul-Element sein dürfen.

Es besteht kein Grund ^[1], das ü in „Banküberweisung“ zu verstümmeln.

In deinem Stylesheet finden sich viele magic numbers wie height: 4.375em – Werte, die du auf deinem System ermittelt hast. Auf anderen Systemen passen die nicht. Magic numbers 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

: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 🖖

---

1. In Kürze gibt’s das auch wieder auf deutsch. ↩︎