dieselross: Formularlayout: Zwei Felder nebeneinander?

Hallo Gemeinde,

für ein Formular möchte ich gerne zwei Felder nebeneinander stellen.
Also z. B. Vorname, Name und Straße, Hausnummer etc.
Um barrierefrei zu bleiben will ich das ganze über fieldset, label etc. konstruieren.
Was ich bisher habe ist dies:

  
<fieldset>  
     <ol>  
     <legend>Ihre Daten</legend>  
     <li>  
     <label for "anrede"><img src="images/required.gif" alt="Pflichtfeld"> Anrede:</label>  
     <select id= "anrede" name="Anrede" size="1">  
     <option></option>  
     <option>Frau</option>  
     <option>Herr</option>  
     <option>Firma</option>  
     </select>  
     </li>  
     <li>  
     <label for "vorname">Vorname:</label>  
     <input id= "vorname" name="Vorname" type="text">  
     </li>  
     <li class="nebenfeld">  
     <label for "name"><img src="images/required.gif" alt="Pflichtfeld"> Name:</label>  
     <input id= "name" name="Name" type="text">  
     </li>  
     </ol>  
</fieldset>  

Wie krieg' ich das hin? Ich möchte ein schönes, sauberes Formular mit glatten Rändern.
Die width-Eigenschaften der Felder kann ich ja nach Bedarf einstellen.
Mir geht es erst 'mal um das Nebeneinanderstellen.

Any Ideas?

Gruß
dieselross

--
- life's for learning -
  1. Um barrierefrei zu bleiben will ich das ganze über fieldset, label etc. konstruieren.

    die geschichte mit einer liste ist äusserst kreativ - hab ich so noch nicht gesehen - ist aber etwas wenig praktikabel - ich würde zu div oder p-elementen als container für die "zeilen" des forumlars verwenden

    <ol>
         <legend>Ihre Daten</legend>

    legend darf kein kind von ol sein

    Any Ideas?

    pack sie nebeneinander - wenn sie logisch zusammengehören, spricht nichts dagegen sie in ein gemeinsames element zu packen

    1. die geschichte mit einer liste ist äusserst kreativ - hab ich so noch nicht gesehen - ist aber etwas wenig praktikabel - ich würde zu div oder p-elementen als container für die "zeilen" des forumlars verwenden

      Hab' ich nicht selber erfunden. Das stammt aus "The Art and Science of CSS" aus dem Sitepoint Verlag.

      <ol>
           <legend>Ihre Daten</legend>
      legend darf kein kind von ol sein

      Oops! Sollte es auch gar nicht. Ist mir wohl beim Übertragen verrutscht.
      Und das mit den p-Elementen werde ich heute abend 'mal versuchen.

      Gruß
      dieselross

      --
      - life's for learning -
      1. Hab' ich nicht selber erfunden. Das stammt aus "The Art and Science of CSS" aus dem Sitepoint Verlag.

        wie bereits erwähnt ist es nicht klug, da das gruppierende element von zusammengehörigen formularelementen das "fieldset" darstellt, das ol-element ist überflüssig

        zur gruppierung der einzelnen label- und input-elemente eignen sich wie gesagt  p-elemente, div-elemente oder noch mehr fieldsets

        1. zur gruppierung der einzelnen label- und input-elemente eignen sich wie gesagt  p-elemente, div-elemente oder noch mehr fieldsets

          Also fieldset im fieldset? Das klingt auch spannend.
          Die inneren könnte man dann ja per class oder id anders gestalten bzw. sogar unsichtbar machen, oder täusche ich mich da?

          Gruß
          dieselross

          --
          - life's for learning -
          1. Also fieldset im fieldset? Das klingt auch spannend.

            ja, nur gefällt mir persönlich der gedanke nicht, da fieldset selbst einerseits sehr viel markup produziert und andererseits gibts dann überall nur fieldsets :D

            Die inneren könnte man dann ja per class oder id anders gestalten bzw. sogar unsichtbar machen, oder täusche ich mich da?

            die rahmen der fieldsets solltest du ohnehin auf deine bedürfnissen anpassen oder gar ausblenden - klassen oder ids brauchst du da nicht, wenn die verschachtelugn vernünftig ist

            1. Alles schön und gut. Das input-Element kann ich platzieren aber das label-Element bleibt beharrlich an seinem Platz. Egal ob es in einem div oder einem p steht. Lediglich mit dem fieldset scheine ich der Sache näher zu kommen. Aber wue verhält sich ein Kind-fieldset beispielsweise in einem Screenreader?

              Gruß
              dieselross

              --
              - life's for learning -
              1. Das input-Element kann ich platzieren aber das label-Element bleibt beharrlich an seinem Platz.

                welche css-eigenschaften hat es denn?

                1. welche css-eigenschaften hat es denn?

                  Da hab' ich alles mögliche ausprobiert. Ohne Erfolg.
                  Hast Du da 'nen Tip für mich?

                  Gruß
                  dieselross

                  --
                  - life's for learning -
                  1. Da hab' ich alles mögliche ausprobiert. Ohne Erfolg.

                    definiere "alles mögliche" - wenn du wirklich _alles_ mögliche ausprobiert hättest, würds funktionieren - ich bin mir _ziemlich_ sicher, dass das funktioniert

                    Hast Du da 'nen Tip für mich?

                    ja, tipp schreibt man mit 2x p - aber ansonsten warte ich noch auf die antwort zu meiner frage, die ich nicht aus spaß an der freude gestellt habe, sondern weil mich interessiert, welchen code du genau verbrichst

                    idealerweise ein online-beispiel, da ich zu copy&paste spielchen keine lust habe ;)

                    1. Da hab' ich alles mögliche ausprobiert. Ohne Erfolg.
                      definiere "alles mögliche" - wenn du wirklich _alles_ mögliche ausprobiert hättest, würds funktionieren - ich bin mir _ziemlich_ sicher, dass das funktioniert

                      Ok, wahrscheinlich hab' ich nicht _alles_ Mögliche ausprobiert. Da hast Du sicher recht. Ich bin als Anfänger auch noch etwas unsicher und da hab' ich halt 'rumprobiert. Kann daher nicht einmal mehr sagen, was ich alles probiert habe.

                      Hast Du da 'nen Tip für mich?
                      ja, tipp schreibt man mit 2x p -

                      Neuerdings. Ich lehne die Rechtschreibdeform aber aus grundsätzlichen Erwägungen (unausgegoren, widersprüchlich etc.) ab und bleibe bei dem, was ich gelernt habe ;-)

                      aber ansonsten warte ich noch auf die antwort zu meiner frage, die ich nicht aus spaß an der freude gestellt habe, sondern weil mich interessiert, welchen code du genau verbrichst

                      idealerweise ein online-beispiel, da ich zu copy&paste spielchen keine lust habe ;)

                      Das will ich gerne heute abend oder am Sonntag in die Wege leiten. Die Webseitenbastelei ist bei mir Hobby und kann daher erst abends oder am Wochenende voll ausgelebt werden. Überdies habe ich hier (Arbeitsstelle) zwar immer 'mal wieder etwas Zeit zum Nachdenken aber nur begrenzte Internetmöglichkeiten.

                      Davon abgesehen haben mir deine Anmerkungen schon reichlich Hilfe zur Selbsthilfe und zum Verstehen geliefert. Dafür erst einmal herzlichen Dank!

                      Gruß
                      dieselross

                      --
                      - life's for learning -
                      1. Ok, wahrscheinlich hab' ich nicht _alles_ Mögliche ausprobiert. Da hast Du sicher recht. Ich bin als Anfänger auch noch etwas unsicher und da hab' ich halt 'rumprobiert. Kann daher nicht einmal mehr sagen, was ich alles probiert habe.

                        das geht mir zwar auch manchmal so, aber es hilft in der tat, wenn man aufschreibt, was man schon probiert hat - zumindest in grundzügen und sich die links zu den lösungen oder techniken merkt bzw bookmarkt - es kann vorkommen, dass die ein oder andere lösung dann doch noch gebraucht wird, für etwas anderes

                        1. das geht mir zwar auch manchmal so, aber es hilft in der tat, wenn man aufschreibt, was man schon probiert hat - zumindest in grundzügen und sich die links zu den lösungen oder techniken merkt bzw bookmarkt - es kann vorkommen, dass die ein oder andere lösung dann doch noch gebraucht wird, für etwas anderes

                          Touché! Ja, ich sollte strukturierter arbeiten. Im Job tu' ich das ja auch!

                          Gruß
                          dieselross

                          --
                          - life's for learning -
                    2. aber ansonsten warte ich noch auf die antwort zu meiner frage, die ich nicht aus spaß an der freude gestellt habe, sondern weil mich interessiert, welchen code du genau verbrichst

                      idealerweise ein online-beispiel, da ich zu copy&paste spielchen keine lust habe ;)

                      guckst du: http://relaunch.gs-barnstorf.de

                      Das Script für das Kontaktformular funktioniert noch nicht und auch sonst ist alles noch ein wenig Baustelle. Also bitte den Kopf einziehenund auf herumliegendes spitzes Werkzeug achten. Verletzungsgefahr!

                      Gruß
                      dieselross

                      --
                      - life's for learning -
                      1. guckst du: http://relaunch.gs-barnstorf.de

                        das kommt mir doch bekannt vor - aber wo ist jetzt der fehler? und vor allem in welchem browser?

                        1. das kommt mir doch bekannt vor -

                          ? Woher das ?

                          aber wo ist jetzt der fehler? und vor allem in welchem browser?

                          Den Fehler (Versatz des Labels) hatte ich ja bereits via <fieldset> beheben können.
                          Aber du sagtest ja weiter oben, daß <fieldset>s nicht so der Brüller sind.

                          Und sonst?
                          Kann der Code den ich verbrochen habe, abgesehen von kleinen, bereits mit dem Validator entdeckten, aber aus Zeitgründen noch nicht behobenen Syntaxfehlern bestehen?
                          Ich würde ja so gerne noch mehr lernen.

                          Davon abgesehen treten Fehler fast immer im Internet-Exploder auf. ;-)

                          Gruß
                          dieselross

                          --
                          - life's for learning -
                          1. ? Woher das ?

                            hattest du nicht vor kurzem das problem mit der kuh :D

                            Den Fehler (Versatz des Labels) hatte ich ja bereits via <fieldset> beheben können.
                            Aber du sagtest ja weiter oben, daß <fieldset>s nicht so der Brüller sind.

                            ja, aber es ist in ordnung - es ist nicht falsch - allerdings hatte ich gemeint, dass du beide felder in ein fliedset gibst, da ein fieldset immer mehrere andere formularelemente gruppieren sollte ;)

                            Und sonst?
                            Kann der Code den ich verbrochen habe, abgesehen von kleinen, bereits mit dem Validator entdeckten, aber aus Zeitgründen noch nicht behobenen Syntaxfehlern bestehen?

                            behebe diese fehler
                            for "anrede" ->  for="anrede"
                            oder
                            id= "anrede" -> id="anrede"

                            da investierst du ein 10 minuten und die fehler sind beseitigt - "zeitgründe" sind kein argument ;)

                            Ich würde ja so gerne noch mehr lernen.

                            bei deinem menü hätte ich die phark-methode als image-replacement-technik genutzt (negativer text-indent), die aktuell von dir genutzte methode braucht ein zusätzliches element

                            dein logo links oben würde ich als h1-element mit einem link auf die startseite deklarieren, das logo selbst als hintergrund des h1 rein

                            die weiteren überschriften auf der seite (kontakt oder ähnliches) als h2 auszeichnen

                            Davon abgesehen treten Fehler fast immer im Internet-Exploder auf. ;-)

                            jein - wenn mans mal raus hat, was man dem ie zumuten kann und was nicht, funktionierts meistens sehr gut

                            die harte wahrheit ist: der ie verhält sich standardkonform, wenn er eine eigenschaft nicht versteht :D er ignoriert sie halt einfach

                            1. hattest du nicht vor kurzem das problem mit der kuh :D

                              Ja stimmt. Das war ich.

                              da investierst du ein 10 minuten und die fehler sind beseitigt - "zeitgründe" sind kein argument ;)

                              Abends um 23:30 Uhr dann irgendwann schon, vor allem, wenn am nächsten Morgen um 05:30 Uhr unerbittlich der Wecker klingelt.

                              bei deinem menü hätte ich die phark-methode als image-replacement-technik genutzt (negativer text-indent), die aktuell von dir genutzte methode braucht ein zusätzliches element

                              Ok. Ist ein Vorschlag.

                              dein logo links oben würde ich als h1-element mit einem link auf die startseite deklarieren, das logo selbst als hintergrund des h1 rein

                              Auch nett. So hab' ich gleich auf jeder Seite einen "Rücksturz zur Basis" eingebaut.

                              die weiteren überschriften auf der seite (kontakt oder ähnliches) als h2 auszeichnen

                              Ja, stimmt. Ist logisch besser.

                              die harte wahrheit ist: der ie verhält sich standardkonform, wenn er eine eigenschaft nicht versteht :D er ignoriert sie halt einfach

                              Siehe dazu meine erweiterte Signatur ;-)

                              Gruß
                              dieselross

                              --
                              - life's for learning -
                              P.s.: Ceterum censeo IE esse delendam
                              1. die harte wahrheit ist: der ie verhält sich standardkonform, wenn er eine eigenschaft nicht versteht :D er ignoriert sie halt einfach

                                Siehe dazu meine erweiterte Signatur ;-)

                                naja, das ist auch etwas hart - es reicht eigentlich, wenn nicht irgendwelche großen konzerne meinen, der restlichen welt etwas von it-sicherheit erzählen zu müssen und dann ernsthaft behaupten, der ie6 wäre sicherer als sein nachfolger ;)

                                das schlechte daran ist, dass das normale menschen glauben und dann genau wie die "großen" unternehmen nicht updaten wollen