nicht angemeldet
Radio-Buttons mit Text vertikal ausrichten
Hallo Forumer,
dieses SELFHTML-Beispiel http://de.selfhtml.org/html/formulare/anzeige/input_radio.htm wird vom IE und vom FF nicht so gerendert wie ich das wünsche ;-) Ginge es nach mir, dann sollten Radio-Buttons und Text vertikal zentriert sein. Tatsächlich ist die Schrift aber weiter unter der gedachten Mittellinie als die Radio-Knöpfe.
Erfolglos habe ich versucht die Sache in ein DIV mit Style vertical-align middle reinzutun.
Weiß jemand einen Weg?
Beste Grüße
Viennamade
-
Dafür gibts einmal die Tabelle (obwohl das aus semantischen Gründen wieder kritisiert werden dürfte), oder mal wieder das "div"-Element. Den jeweiligen Inhalt dann mit vertical-align in CSS ausrichten. Also nicht einfach hintereinander reinschreiben wie im Beispielquelltext.
Gruß pudding
-
Hallo Pudding,
... oder mal wieder das "div"-Element. Den jeweiligen Inhalt dann mit vertical-align in CSS ausrichten. Also nicht einfach hintereinander reinschreiben wie im Beispielquelltext.
Danke für die Antwort, so habe ich das probiert mit dem vertical-align:
<div style="vertical-align:middle;padding:0;margin:0;"><input type="radio" />Herr<input type="radio" />Frau</div>Aber funktionieren tut das nicht?!
Beste Grüße
Dieter Walenta-
"
Sie können nebeneinanderstehende Elemente mit unterschiedlicher Höhe, zum Beispiel Tabellenzellen in einer Tabellenzeile oder Textpassagen mit unterschiedlicher Schriftgröße innerhalb einer Zeile, im Verhältnis zueinander ausrichten.
"
(http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align)Schau dir deinen Quelltext nocheinmal an.
Gruß pudding
-
-
-
Hallo,
dieses SELFHTML-Beispiel http://de.selfhtml.org/html/formulare/anzeige/input_radio.htm wird vom IE und vom FF nicht so gerendert wie ich das wünsche ;-) Ginge es nach mir, dann sollten Radio-Buttons und Text vertikal zentriert sein.
Pixelgenau Mittellinie funktioniert wohl nicht. Aber _bitte_ keine zusätzlichen DIV- und SPAN-Elemente. Außerdem ist die Verwendung von LABEL-Elementen für die Beschriftung der Radio-Buttons sowieso empfehlenswert.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Radio-Buttons definieren</title>
</head>
<body><h1>Hier wird abkassiert!</h1>
<form action="input_radio.htm">
<p>Geben Sie Ihre Zahlungsweise an:</p>
<p style="margin:0;">
<input type="radio" name="Zahlmethode" id="Zahlmethode1" value="Mastercard" style="vertical-align:middle;">
<label for="Zahlmethode1" style="vertical-align:middle;"> Mastercard</label>
</p>
<p style="margin:0;">
<input type="radio" name="Zahlmethode" id="Zahlmethode2" value="Visa" style="vertical-align:middle;">
<label for="Zahlmethode2" style="vertical-align:middle;"> Visa</label>
</p>
<p style="margin:0;">
<input type="radio" name="Zahlmethode" id="Zahlmethode3" value="AmericanExpress" style="vertical-align:middle;">
<label for="Zahlmethode3" style="vertical-align:middle;"> American Express</label>
</p>
</form><p><a href="../auswahl.htm#radiobuttons">zurück</a></p>
</body>
</html>Eventuell noch ein wenig mit margin und padding bei INPUT und LABEL experimentieren.
viele Grüße
Axel
-
Hallo!
dieses SELFHTML-Beispiel http://de.selfhtml.org/html/formulare/anzeige/input_radio.htm wird vom IE und vom FF nicht so gerendert wie ich das wünsche ;-) Ginge es nach mir, dann sollten Radio-Buttons und Text vertikal zentriert sein.
Pixelgenau Mittellinie funktioniert wohl nicht. Aber _bitte_ keine zusätzlichen DIV- und SPAN-Elemente. Außerdem ist die Verwendung von LABEL-Elementen für die Beschriftung der Radio-Buttons sowieso empfehlenswert.Stimmt, die Beschriftung der Radio-Buttons mit Label-Elementen ist empfehlenswert (ich tat es dummerweise nicht weil ich nur name-Attribute für die Input-Elemente verwendet habe, und diese haben bei gruppierten Radio-Buttons eben nur einen Wert).
Danke!
Viennamade
-