Ausrichtung von Radiobuttons bei Textskalierung

[Tolwin]

Hallo Forum,
ich habe eine Seite in der sich jeweils ein Radiobutton und ein
zugeordneter Text befindet. Dieses Objekt kann mehrfach untereinander in
der Seite vorkommen. Damit der Text im Falle eines Umbruchs nicht unter dem
Button weiterläuft, habe ich per CSS ein Label definiert. Das funktioniert
auch alles wunderbar. Für die Barrierefreiheit habe ich die Möglichkeit
den Text zu vergrößern bzw. verkleinern eingebaut. Wenn ich nun den Text skaliere,
 möchte ich dass der Radiobutton noch immer am Textkopf ausgerichtet bleibt. Leider klappt das nicht ... die Radiobuttons rutschen immer mehr in die Mitte des skalierten Textes. Die valing top brachte auch keinen Erfolg. Habe das gleiche Problem bei Aufzählungen und Bullets usw.

Würde mich über eine Tipp zu Abbildungsmöglichkeiten per CSS freuen!

Vielen Dank und Gruß
Tolwin

[Gunnar Bittersmann]

@@Tolwin:

Damit der Text im Falle eines Umbruchs nicht unter dem Button weiterläuft, habe ich per CSS ein Label definiert.

?? Wie bitte?

Leider klappt das nicht ...

Wen du nicht sagst, WAS du gemacht hast, kann dir niemand sagen, was du falsch gemacht hast.

Würde mich über eine Tipp zu Abbildungsmöglichkeiten per CSS freuen!

Erstmal die Tips für Fragende. Du hattest bestätigt, diese in der Charta gelesen zu haben.

Live long and prosper,
Gunnar

[Tolwin]

Okay, dann mal etwas ausführlicher:

Den Aufbau Radiobutton --- beschreibender Text habe ich wie folgt realisiert

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

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; }

Damit verhindere ich, dass bei längeren Texten der umgebrochene Text unter dem Radiobutton beginnt, sondern in Höhe des oberen Textanfangs.

Wenn ich den Text nun vergrößerer, soll der Button immer mittig zum Text ausgerichtet sein, verschiebt sich aber leider immer mehr nach oben (oder der Text nach unten). Eine Seite im Netz um das mal live zu sehen kann ich leider nicht anbieten. Ich versuchs mal mit Text darzustellen

#######################
Button #######################
       #######################

(Der Rautenblock entspricht einer Zeile Text)

Nach Vergrößerung

Button #######################
       #######################
       #######################
       #######################

Ich hoffe, dass mein Anliegen nun etwas verständlicher wurde =)

Grüße

[Gunnar Bittersmann]

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

[Tolwin]

Sorry, die Klasse Radio ist aus dem Span "rausgeflogen".
Es handelt sich um ein Template für ein CMS und ich hatte etwas zu viel
des CMS Codes bereinigt. vertical-align hab ich gesteste - sowohl top, bottom oder middle brachte nicht das gewünsche Ergebnis. Jetzt versuche ich
dies mit einer Tabelle abzubilden. Es besteht aber noch immer das gleiche Problem ...  beim Vergrößern des Textes "rutscht" der Radiobutton nach oben weg - bis über den Text hinaus.

Danke für die Hinweise
Ich tüftel dann noch mal etwas mit Tabellen rum ... auf die ich eigentlich verzichten wollte.

Grüße
Tolwin

[Gunnar Bittersmann]

@@Tolwin:

Jetzt versuche ich dies mit einer Tabelle abzubilden. Es besteht aber noch immer das gleiche Problem ...  beim Vergrößern des Textes "rutscht" der Radiobutton nach oben weg - bis über den Text hinaus.

??

Wenn du eine Tabelle benutzt, musst du natürlich die Regeln

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

aus dem Stylesheet löschen.

Live long and prosper,
Gunnar

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

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

In vernünftigen Browsern ist natürlich vernünftiges Markup möglich:

<ul>  
  <li>  
    <input type="radio" name="button" value="button1" id="button1" />  
    <label for="button1">Text Text Text</label>  
  </li>  
</ul>

Stylesheet:

ul  
{  
 list-style: none;  
 display: table;  
}  
  
li  
{  
 display: table-row;  
}  
  
input  
{  
 display: table-cell;  
 vertical-align: middle;  
}  
  
label  
{  
 display: table-cell;  
}

Live long and prosper,
Gunnar

[Tolwin]

Danke, werde mir das mal genau anschauen.

Gruß
Tolwin

[Gunnar Bittersmann]

@@Tolwin:

Danke, werde mir das mal genau anschauen.

Auch im IE, der nicht in die Kategorie „vernünftige Browser“ fällt.

Live long and prosper,
Gunnar

[EKKi]

Mahlzeit,

Okay, dann mal etwas ausführlicher:

Das ist nicht "ausführlicher", das ist "mindestens notwendig" - Gedanken lesen kann hier keiner und Glaskugeln funktionieren nicht zuverlässig genug.

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

Was sollen die <span>s? So weit ich sehe, haben sie keinerlei Funktion. Oder hast Du für die irgendwelche CSS-Eigenschaften festgelegt, die Du uns verschweigst?

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

Wo genau befinden sich Elemente mit der Klasse "radio"? In Deinem obigen Beispielcode habe ich keine gefunden.

Wenn ich den Text nun vergrößerer, soll der Button immer mittig zum Text ausgerichtet sein, verschiebt sich aber leider immer mehr nach oben (oder der Text nach unten).

Wie wär's mit http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align@title=vertical-align?

MfG,
EKKi