Gunnar Bittersmann: Ausrichtung von Radiobuttons bei Textskalierung

Beitrag lesen

@@Tolwin:

<span><input type="radio" name="button" value="button1" id="1" /></span>

Fehlerhafter Wert für das 'id'-Attribut. [http://de.selfhtml.org/html/referenz/attribute.htm#id_idref_name]

<span><label>Text Text Text</label></span>

Da fehlt das 'for'=Attribut. Mit einem solchen wird „beim Klick auf den Inhalt eines Labels […] in aktuellen Browsern das Formularelement fokussiert bzw. ausgewählt, auf das sich das Label bezieht. Diese Funktion erleichtert unter anderem die Auswahl von Checkboxen.“ [http://de.selfhtml.org/html/formulare/strukturieren.htm#label] Wichtig für Usability und Barrierefreiheit.

und im CSS so :

.radio input { display:block; float:left; margin:2px 6px 0px 5px !important; margin:-2px 0px 0px 1px; }
.radio label { display:block; margin-left:0px; }

In deinem gezeigten HTML-Quellcode gibt es keine Elemente der Klasse "radio".

Dein Vorhaben ist wohl am besten mit einer Tabelle* zu erreichen:

<table>  
  <tbody>  
    <tr>  
      <td><input type="radio" name="button" value="button1" id="button1" /></td>  
      <td><label for="button1">Text Text Text</label></td>  
    </tr>  
  </tbody>  
</table>

Ohne weiteres Zutun stellen wohl alle Browser von Haus aus den Inhalt von Tabellenzellen vertikal mittig dar; Nachhelfen mit 'vertical-align' ist möglich.

Live long and prosper,
Gunnar

* Ob die Zuordnung von Radiobuttons und Labels zu Tabellenspalten und damit die Verwendung einer Tabelle semantisch korrekt ist, darüber darf gestritten werden.

--
„Das Internet ist ein großer Misthaufen, in dem man allerdings auch kleine Schätze und Perlen finden kann.“ (Joseph Weizenbaum)