Formular Radios gestalten

Guten Morgen,

ich möchte eine kleine Befragung online gestalten

das Formular besteht hauptsächlich aus Radiobuttons.

Ich habe mir das so vorgestellt drei Blöcke

Antwort nach Gefallen | Frage…| würdest Du wieder kommen bzw empfelen

Die “X” sollen mal die “Radios” sein.

x x x x x x erste Frage ? x x
x x x x x x Nächte Frage ? x x
x x x x x x Nächte Frage ? x x
x x x x x x Nächte Frage ? x x

Das ganze wollte ich in einer Liste machen, jetzt habe ich es in einer Tabelle.
Gibt es eine Variante mit Unterlistenpunken, die diese drei Blöcke in einen

  • erlaubt?

    Oder hat wer eine andere Idee wie ich das gestalten kann?

    liebe Grüße und ein schönes WE

  • In jedem li-Element kannst du auch andere Blockelemente reinsetzen,
    unter anderem auch andere Listenelemente wie ul, ol, dl.

    dl kann einen Sinn ergeben, wenn du einen Begriff hast (dt), der sich
    durch die darauf folgenden Listenelemente (dd) definiert.
    In diesem Falle könnte die Antwort des Nutzers definieren, was
    er unter der Frage versteht, etwas weit gegriffen, aber anders
    bekommt man das innerhalb einer Liste kaum hin.

    Der Ansatz mit ul oder ol wäre, in einem li ein h? und ein weiteres
    ul oder ol zu notieren, um eine Unterliste mit Überschrift zu erhalten.
    Alternativ könnte man da eventuell auch mit p arbeiten, wenn es
    keine Überschrift ist, sondern mehr ein Absatz.

    Dekorieren, anordnen und positionieren kann man den Kram dann
    mit CSS.

    Guten Morgen,

    ich habe hier mal ein kleines Beispiel wie die Punkte positioniert sein sollen,
    Die Bestimmung der Breite klappt leider nicht im Firefox .
    Sondern nur im IE.

    ändere ich display auf display: table-cell; klappt es im IE nicht
    füge ich zusätzlich folgenden code ein

    [code]<!–[if IE]>

    li { display: inline; }

    <![endif]–>[/code]

    scheint es zu klappen.
    Gibt es bessere Möglichkeiten?

    Danke und
    MfG

    [code]
    li { display: inline; }
    .frage
    { width:500px;
    padding-left:20px;
    }

    • Frage 1 mit kurzem Text
    • Frage 2 mit etwas mehr Text
    • Frage 3 mit noch etwas mehr Text
    [/code]

    Breitenangabe kann man machen etwa bei display block oder
    was hier besser sein könnte: inline-block aus dem
    Arbeitsentwurf von CSS2.1, was aber von älteren browsern
    natürlich nicht richtig interpretiert wird.
    Das könnte man ansonsten für aktuellere browser für li notieren.
    Ansonsten bleibt display block.
    Nebeneinander anordnen kann man Blockelemente z.B. mit float
    left/right …

    Bei input ist eine Dekoration mit CSS immer riskant, weil da die
    Interpretation bei verschiedenen browsern recht unterschiedlich
    ausfallen kann, besser also man dekoriert das Element drumherum.

    Lieber hoffmann,

    ich danke Dir, ich habe mich etwas belesen und bin auf die Definitionsliste gekommen. Das ist die beste Lösung für mein Problem. Dazu habe ich folgenden code

    dl{ padding:0; margin:0; white-space:nowrap; } dt { float:left; height:25px; } dd { text-align:left; margin-left:20em; height:25px;} .bghell { background-color: #ffffff; } .bgdunkel { background-color: #ebeef1; } }

    und hier das HTML

    [code]

    Erste Frage
    [/code]

    Jetzt ist es eigentlich genau wie ich es möchteNur wie bekommen ich eine ganze “Zeile” mit farbigen Hintergrund. margin-left:20em; macht das unmöglich.

    MfG und Danke

    mit dl {background:red} etwa - ist dann allerdings die gesamte
    Definitionsliste.

    Inhaltlich verstehe ich die auch nicht so ganz.
    Woher soll der Nutzer wissen, was die Radioknöpfe zu bedeuten
    haben?
    Es ist auch nicht zu erkennen, daß die letzteren drei inputs die
    vorderen drei samt Frage irgendwie erläutern täten, wäre die
    Voraussetzung für die Verwendung von dl/dt/dd wie oben bereits
    erwähnt.

    Das sähe dann eher so aus:

    <p>Was ist ...?</p>
    <dl>
    <dt>
    Miraculix
    </dt>
    <dd>
    Nudelgericht <input name="bez1" type="radio" value="1" />
    </dd><dd>
    Comic-Figur <input name="bez1" type="radio" value="2" />
    </dd><dd>
    Fernsehmoderator <input name="bez1" type="radio" value="3" />
    </dd>
    <dt>
    Eichelhäher
    </dt>
    <dd>
    Sexpraktik <input name="bez2" type="radio" value="1" />
    </dd><dd>
    Soap-Opera-Held <input name="bez2" type="radio" value="2" />
    </dd><dd>
    Vogel <input name="bez2" type="radio" value="3" />
    </dd>

    Klassennamen wie bghell und bgdunkel sind übrigens suboptimal.
    Der Name sollte für die Funktion stehen, nicht für die Erscheinung.

    lieber Hoffmann,

    ich habe mal versucht das Layout in Tabelle zu erstellen, so möchte ich das ich CSS

    http://www.gebrauchtesrad.de/test.php

    mfG und danke

    Das sind wohl korrelierte Daten, da ist eine Tabelle angemessen.
    (X)HTML hat ja zahlreiche Möglchkeiten, die Zugänglichkeiten von
    Tabellen zu verbessern - Elemente wie thead, tfoot, tbody, th,
    caption, dazu Attribute wie summary, headers, scope, axis
    sollten da helfen.

    Wenn es sich um tabellarischen Inhalt handelt, wie hier, wäre es
    suboptimal, keine Tabellenelemente dafür zu verwenden.

    Wenn man die Struktur simpel halten will, muß man eben die
    Bedeutung bei jedem Knopf erneut dazuschreiben, um sie bei
    einer nicht visuellen Präsentation leichter verständlich zu machen.

    CSS kannst du dann ja auch auf die Tabellenzellen anwenden, bei
    Farben etc ist das nicht so das Problem.

    Danke @Hoffmann dann mache ich mit der Tabelle also nichts falsch.

    ich weiß noch nicht was korrelierte Daten sind aber ich gucke gleich :wink:

    vielen Danke und liebe Grüße