Radiobuttons anordnen

[Benjamin]

Liebe Forenmitglieder!

Ich stehe vor einem vertrackten Problem, auch die Forensuche hat mich nicht weitergebracht. Es geht um die Darstellung folgender Seiten:

http://www.erfolg-im-mathe-abi.de/feedback.htm
http://www.erfolg-im-mathe-abi.de/bestellung.php => Schritt2

Dort sind im Rahmen eines Formulars Radiobuttons samt Beschriftung, die es in einer Reihe auszurichten gilt. Der relevante Quellcode sieht in etwa so aus:

<label for="" class="nobreak">Sie sind</label>
<input type="radio" name="Typ" class="radio" value="Sch&uuml;ler">Sch&uuml;ler
<input type="radio" name="Typ" class="radio" value="Lehrer">Lehrer
<input type="radio" name="Typ" class="radio" value="Sonstiges">Sonstiges

Im Stylesheet sind <label> und <input> auf display: inline; und float: left; getrimmt.

Auf welchem Schlauch stehe ich, daß es mir alles durcheinanderschüttelt?

Danke für Eure Hilfe!

Benjamin

[Marc Reichelt]

Hallo Benjamin,

Im Stylesheet sind <label> und <input> auf display: inline; und float: left; getrimmt.

Auf welchem Schlauch stehe ich, daß es mir alles durcheinanderschüttelt?

Dein float:left auf mehrere Elemente bewirkt natürlich, dass diese eines nach dem anderen links angeordnet werden, bis kein Platz mehr da ist. So wie ich das so auf die Schnelle sehe brauchst du dieses float gar nicht. Außerdem sind <input>-Elemente automatisch inline, weshalb auch das display:inline wegfallen sollte.
Und zwar für alle Elemente.

Grüße

Marc Reichelt || http://www.marcreichelt.de/

[MudGuard]

Hi,

Dort sind im Rahmen eines Formulars Radiobuttons samt Beschriftung, die es in einer Reihe auszurichten gilt. Der relevante Quellcode sieht in etwa so aus:

<label for="" class="nobreak">Sie sind</label>

Wofür soll das Label denn sein?
Für die Radiobutton-Gruppe? Da wäre m.E. fieldset besser. Denn label ist für die Beschriftung von form-controls vorgesehen ("The LABEL element is used to specify labels for controls that do not have implicit labels,"), nicht für control groups ("The FIELDSET element allows authors to group thematically related controls and labels. ").

<input type="radio" name="Typ" class="radio" value="Sch&uuml;ler">Sch&uuml;ler
<input type="radio" name="Typ" class="radio" value="Lehrer">Lehrer
<input type="radio" name="Typ" class="radio" value="Sonstiges">Sonstiges

Im Stylesheet sind <label> und <input> auf display: inline; und float: left; getrimmt.

float zieht display:block automatisch nach sich. display auf inline zu setzen ist also sinnlos.

Auf welchem Schlauch stehe ich, daß es mir alles durcheinanderschüttelt?

Es wird genau das gemacht, was Du anordnest: die input-Elemente werden links gefloatet.
Der Fließtext (also die Beschriftungen der Radio-Buttons, die eigentlich in label-Elementen stehen sollten) steht dann rechts von den linksgefloateten Elementen (soweit Platz ist, sonst wird ggf. umgebrochen).

Ohne das float:left (und ohne DEIN display:inline, denn display:inline ist für input und label im Normalfall eh gegeben) wären die Elemente normale inline-Elemente und würden nebeneinander stehen.

cu,
Andreas