Formularlayout: Zwei Felder nebeneinander?

- css
0 suit0 dieselross
0 suit0 dieselross
0 suit0 dieselross
0 suit0 dieselross
0 suit0 dieselross
0 suit
0 dieselross
0 suit0 dieselross
0 suit0 dieselross
0 suit
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
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
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
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
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
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
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
Das input-Element kann ich platzieren aber das label-Element bleibt beharrlich an seinem Platz.
welche css-eigenschaften hat es denn?
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
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 ;)
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
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
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
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
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?
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
? 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
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
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