Input elemente nebeneinander

html.de-Forum HTML, XHTML & CSS
1

Hi zusammen.

Eine kurze Frage eines Nichtdesigners.:slight_smile:

Programmiere gerade ein labelbasiertes Formular und stehe vor einem für euch lösbarem problem: :wink:

Will in folgendem Beispiel 2 Selectboxen nebeneinander bekommen, weiss aber nicht wie ich das anstellen soll:

Screenshot
http://img685.imageshack.us/img685/3363/unbenanntdl.th.jpg

Mein bisheriger CSS code:

[CODE]input[type=text]{
margin-top: 10px;
width: 20em;
font-family: Verdana, sans-serif;
font-size: 0.9em;
padding: 5px;
border: 1px solid #e71375;
height: 16px;
background: url(„…/images/bg_input_text.gif“) repeat-x;

}

input[type=submit]{

border: 2px solid #e71375;
width: 400px;
height: 30px;
margin-top: 30px;
-moz-border-radius:30px;
-khtml-border-radius:30px;
cursor: pointer;

}

.zend_form select{
margin-top: 10px;
width: 21em;
font-size: 0.9em;
padding: 5px;
}

.zend_form label{
font-weight: bold;
float: left;
vertical-align:middle;
width:8em;
color: black;
padding-top: 13px;
}

/Das ist besagtes Selectfeld welches nach oben verschoben werden soll. Versuche mit margin scheitern/

#subform_advert-subform_contact-to{
float:right; margin-top: 0px;margin-bottom: 20px;
}

[/CODE]Also nochmal die Frage: Wie bekomme ich 2 Inputboxen in einem labelbasierten Formular (Select, text usw) nebeneinander?

Vielen Dank schon mal

VG

2

ich denke mal der HTML-Code wäre auch noch hilfreich.

3

jo klar hast recht. Denke folgender Code müsste genügen

[HTML]

Inserat - Daten werden veröffentlicht und sind im Inserat sichtbar
Kontaktdetails
Bundesland
-- Baden-Württemberg Bayern Berlin Brandenburg Bremen Hamburg Hessen Mecklenburg-Vorpommern Niedersachsen Nordrhein-Westfalen Rheinland-Pfalz Saarland Sachsen Sachsen-Anhalt Schleswig-Holstein Thüringen
Stadt/Ort
Postleitzahl
-- 9xxxx 8xxxx 7xxxx 6xxxx 5xxxx 4xxxx 3xxxx 2xxxx 1xxxx 0xxxx
Straße
Hausnummer
Zusatz
Mobil-Telefon
Telefon
E-Mail
Homepage
Erreichbar von
-- 12:00 13:00 14:00 15:00 16:00 17:00 18:00 19:00 20:00 21:00 22:00 23:00 00:00 01:00 02:00 03:00 04:00 05:00 06:00 07:00 08:00 09:00 10:00 11:00
 
-- 12:00 13:00 14:00 15:00 16:00 17:00 18:00 19:00 20:00 21:00 22:00 23:00 00:00 01:00 02:00 03:00 04:00 05:00 06:00 07:00 08:00 09:00 10:00 11:00
[/HTML]
4

Soll das so bleiben?

<dt id="to-label"> </dt>

Oder soll da noch ein label für das letzte select rein?

5

ja kommt nochn label rein. Nämlich „bis“

6

Dann würde ich label und input jeweils in ein Blockelement zusammenfassen
und beide floaten:
z.B. als ul:

[CODE]

  • von...

    bis...

    • [/CODE] [CODE] .selectboxen p { float: left; } [/CODE]
    7

    gehts auch anders? also will ja eigentlich nur die rechte selectbox neben die linke floaten… Label muss nicht unbedingt sein

    Problem: müsste sonst mit dekoratoren arbeiten, da ich mit nem Framework das agnze mache…

    Wenns nicht anders geht kein Thema, wollte nur wissen obs für diesen speziellen einen Fall auch einfach geht. Das formular ändert sich nämlich nicht mehr

    8

    Dann wäre das leere dt nicht nötig und du könntest den beiden dd float left geben.

    Notfalls könntest du „von - bis“ in das eine label schreiben.
    Ich fände das aber nicht sinnvoll.

    [COLOR=„DarkSlateGray“]Ansonsten auch dem leeren dt float: left geben

    9

    ok super. habs jetzt so , wie von dir zuerst vorgeschlagen, mit den dekoratoren umgesetzt! Danke dir.

    Nur noch ein problem

    Die zweite select box wird ziemlich wiet vom label und der anderen box nach rechts geschoben. margin und padding helfen nix. wie krieg ich die näher ran? :slight_smile:

    Screenshot:
    http://img42.imageshack.us/img42/5276/unbenannttiq.th.jpg

    10

    Zeige mal den aktuellen Code (mit Doctype) oder besser einen Link.

    11

    page ist leider bis jetzt nur lokal

    hier der code: die zuständige Klasse wudre zur erleichterten erkennbarkeit für dich mit XXXXXX deklariert.

    [HTML]

    ... ... ... [/HTML]

    [HTML]


    Erreichbar von

    -- 12:00 13:00 14:00 15:00 16:00 17:00 18:00 19:00 20:00 21:00 22:00 23:00 00:00 01:00 02:00 03:00 04:00 05:00 06:00 07:00 08:00 09:00 10:00 11:00
    bis -- 12:00 13:00 14:00 15:00 16:00 17:00 18:00 19:00 20:00 21:00 22:00 23:00 00:00 01:00 02:00 03:00 04:00 05:00 06:00 07:00 08:00 09:00 10:00 11:00
    [/HTML]CSS

    [HTML]
    .XXXXXXXXXXXXXX{float: left }
    .XXXXXXXXXXXXXX select{width: 16em;}[/HTML]

    12

    Mit dem was ich jetzt sehe muß ich raten.
    Hat bis vielleicht noch width: 8em; oder ein zu großes padding?

    Wenn du die ganze Seite nicht hochladen möchtest stelle ein Testcase zusammen und lade diesen hoch.

    13

    auf das hätt ich auch kommen können!

    Du hattest natürlich recht, das label war noch zu breit…

    Ein Allerletztes:
    Ist es unschön ein margin-right neben die letzte select box zu machen um die nächste zeile auch wirklich in die nächste Zeile zu schieben??? Denn sonst wird diese gleich neben meinem hinteren selectfeld platziert…

    Gibts da elegantere Methoden??

    14

    Am besten in dem du die Floats in einem Block einschließt.

    Das hilft dir ganz bestimmt:
    14.5 Vier Methoden zum Einschließen von Floats - Little Boxes - Webseiten gestalten mit HTML und CSS

    15

    Aber warum als Textabsatz auszeichnen? Hier handelt es sich doch nicht um einen Textabsatz.

    Angst vor Ansteckung? Divitis? :slight_smile:

    Hier haben wir einen echten Fall für ein

    . Das Label und das dazugehörige Eingabefeld wird mit
    zu einer logischen Gruppe zusammengefügt.

    16

    Angst vor Ansteckung? Divitis?

    Ich ganz bestimmt nicht.

    und sind in

    gut aufgehoben.
    Allerdings würde ich die beiden gefloateten

    s in ein div stecken und auf die Liste verzichten.