Forum

von **DePunkt** » 8. Mär 2011, 22:08

Hallo,
ich muss eine Art Suchformular stylen und die Elemente wollen nicht so wie ich will...
so siehts jetzt aus:
Bild

das Problem ist nur, dass Input 3 genau auf gleicher Höhe wie Input 1 liegen soll, Input 4 auf Höhe von Input 2...
So hab ichs im Form selber auch angelegt.. also erst das input das links stehen soll, dann das was rechts stehen soll, dann wieder das was links stehen soll usw.
Aber Input 3 bleibt immer unterhalb von Input 1.. egal was ich mache.
Das Ganze liegt inner div, die auch breit genug ist.
Könnte jetzt Input 3 mit nem minus margin nach oben zwingen aber elegant ist das nicht oder?

Hat einer nen Rat für mich?

Lieben Gruß

von **jeandeluxe** » 9. Mär 2011, 00:56

DePunkt hat geschrieben:Aber Input 3 bleibt immer unterhalb von Input 1.. egal was ich mache.

Stell im HTML 3 vor 1.. usw.

hth,
Jan

von **Ingo** » 9. Mär 2011, 22:31

Nutz eine Tabelle um die Elemente zu positionieren.

von **Richard.Laing** » 10. Mär 2011, 10:17

GRRR... tabellen ;(
ich hab ein bissel zeit über gehabt

viel spass damit gruß richy

Code: Alles auswählen: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Unbenanntes Dokument</title> <style type="text/css">  </style> </head> <body> <div id="formular_box"> <fieldset> <legend>Formular</legend> <form id="form1" method="post" action=""> <p> <label for="input1">input1</label> <input type="text" name="input1" id="input1" /> </p> <p> <label for="input3">input3</label> <input type="text" name="input3" id="input3" /> </p> <p> <label for="input3">input2</label> <input type="text" name="input2" id="input2" /> </p> <p> <label for="input4">input4</label> <input type="text" name="input4" id="input4" /> </p> <p> <input type="submit" name="send" id="send" value="Senden" /> </p> </form> </fieldset> <br class="clear" /> </div> </body> </html>

von **DePunkt** » 10. Mär 2011, 16:13

Hallo,
@Jan,
jo, danke...scheint zu klappen.
Ich war mir sicher auch das hatte ich ausprobiert....

@richy
sehr schön.... danke
so ähnlich dachte ich mir das....

Lieben Gruß

von **Thomas.Blum** » 11. Mär 2011, 13:33

Hej,

die Variante vom Jan würde ich nicht einsetzen.

Der Focus würde dann als erstes auf das Input 3 gehen.

Also so: 3->1->4->2

Wie man das ganze notiert hängt davon ab wie man per Tabulator hin und herspringen möchten?

1->2->3->4
oder
1->3->2->4

wenn das geklärt ist, geht es an das HTML/CSS.

vg Thomas

von **jeandeluxe** » 11. Mär 2011, 13:46

Thomas.Blum hat geschrieben:die Variante vom Jan würde ich nicht einsetzen.
Der Focus würde dann als erstes auf das Input 3 gehen.

da gibts was: tabindex ..

lg,
Jan

von **Thomas.Blum** » 11. Mär 2011, 13:57

jeandeluxe hat geschrieben:
Thomas.Blum hat geschrieben:die Variante vom Jan würde ich nicht einsetzen.
Der Focus würde dann als erstes auf das Input 3 gehen.

da gibts was: tabindex ..

kenne ich und hatte schon geahnt das swoas kommt

Ich halte den logischen Aufbau für sinnvoller. Tabindex selbst wäre nur bei recht komplexen Formularen eine Option.

vg Thomas

von **jeandeluxe** » 11. Mär 2011, 14:01

Thomas.Blum hat geschrieben:Ich halte den logischen Aufbau für sinnvoller.

Im Prinzip: yup.. aber der op hatte halt gefragt wie er seine floatenden Elemente auf selbe Höhe bekommt. ;)

Ich kenn da keinen anderen Weg.. du?

lg,
Jan

von **Thomas.Blum** » 11. Mär 2011, 14:11

jeandeluxe hat geschrieben:Ich kenn da keinen anderen Weg.. du?

hängt von der Reihenfolge ab

1->2->3->4

Code: Alles auswählen: <element class="left"> <input_1 /> <input_2 /> </element> <element class="right"> <input_3 /> <input_4 /> </element>

1->3->2->4

Code: Alles auswählen: <element> <input_1 /> <input_3 /> </element> <element> <input_2 /> <input_4 /> </element>

vg Thomas

von **DePunkt** » 11. Mär 2011, 21:13

beide Versionen hatte ich auch schon.
Aber a) lag die rechte Box trotzdem nicht genau auf Höhe der ersten (frag mich nicht warum)
und b) schreibt man sich da nen css Wolf....

Richys Version muss ich jetzt aber leider doch noch mal überdenken weil der IE das Form zerschießt...
fang also wieder von vorn an....
Es kann doch nicht so schwer sein son einfaches Formular zu bauen :evil:

lieben Gruß

von **Ingo** » 11. Mär 2011, 21:44

Vier Tage lang an so einem Krams rumeiern, weil aus fragwürdigen ideologischen Gründen keine Tabelle fürs Layout in Frage kommt? Wirklich? :shock:

Es gibt kein HTML Element, welches an dieser Stelle semantisch sinnvoll wäre (um die Formularelemente zu positionieren). <p>s zu verwenden (damit werden Fliesstextabsätze gekennzeichnet) ist semantisch nichts besser als eine Tabelle. Die Reihenfolge der Eingabefelder im Markup zu tauschen damit die Optik passt, ist (meiner Meinung nach) die fragwürdigste Lösung von allen. Vom CSS-Rattenschwanz für diese Konstruktionen mal gar nicht zu sprechen.

von **jeandeluxe** » 12. Mär 2011, 00:00

Ingo hat geschrieben:Vier Tage lang an so einem Krams rumeiern, weil aus fragwürdigen ideologischen Gründen keine Tabelle fürs Layout in Frage kommt?

Hast du mal erwogen, daß das HTML Konstrukt um die inputs vorgegeben ist?
XForm z.b...

lg,
Jan

von **Thomas.Blum** » 12. Mär 2011, 09:45

b) schreibt man sich da nen css Wolf.

Vom CSS-Rattenschwanz für diese Konstruktionen mal gar nicht zu sprechen.

Jetzt würde mich mal interessieren was ihr an CSS notiert

Tabellen, wow. Das sind keine tabellarischen Daten ... Lassen wir das lieber

vg Thomas

von **Richard.Laing** » 12. Mär 2011, 09:52

Richys Version muss ich jetzt aber leider doch noch mal überdenken weil der IE das Form zerschießt...

das sollte dann an der breite liegen, das sich dort im css etwas verschiebt.

weil aus fragwürdigen ideologischen Gründen keine Tabelle fürs Layout in Frage kommt?

du rechnest dem kunden doch auch alles ab und schenkst ihm nicht die hälfte oder ... dann sollte man auch vernünftig arbeiten. sorry nicht böse gemeint aber das geht auch mit css.
aber das ist die grundvorraussetzung bei redaxo html und css sollte man beherschen.
ist zumindest meine einstellung.
gruß richy

ps: das html und css was ich oben geliefert habe ist in 5 min entstanden und keine endlösung, aber der weg sollte richtig sein.

Forum

css form elemente stylen.... bin ich blöd?

css form elemente stylen.... bin ich blöd?

Re: css form elemente stylen.... bin ich blöd?

Re: css form elemente stylen.... bin ich blöd?

Re: css form elemente stylen.... bin ich blöd?

Re: css form elemente stylen.... bin ich blöd?

Re: css form elemente stylen.... bin ich blöd?

Re: css form elemente stylen.... bin ich blöd?

Re: css form elemente stylen.... bin ich blöd?

Re: css form elemente stylen.... bin ich blöd?

Re: css form elemente stylen.... bin ich blöd?

Re: css form elemente stylen.... bin ich blöd?

Re: css form elemente stylen.... bin ich blöd?

Re: css form elemente stylen.... bin ich blöd?

Re: css form elemente stylen.... bin ich blöd?

Re: css form elemente stylen.... bin ich blöd?

Wer ist online?