• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Input elemente nebeneinander

Johnny990

Neues Mitglied
Hi zusammen.

Eine kurze Frage eines Nichtdesigners.:)

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

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

Screenshot


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;
}
Also nochmal die Frage: Wie bekomme ich 2 Inputboxen in einem labelbasierten Formular (Select, text usw) nebeneinander?

Vielen Dank schon mal

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

HTML:
<fieldset id="fieldset-subform_advert"><legend>Inserat - Daten werden veröffentlicht und sind im Inserat sichtbar</legend>
<dl>
<fieldset id="fieldset-subform_contact"><legend>Kontaktdetails</legend>
<dl>
<dt id="region-label"><label for="subform_advert-subform_contact-region" class="required">Bundesland</label></dt>
<dd id="region-element">
<select name="subform_advert[subform_contact][region]" id="subform_advert-subform_contact-region" title="Pflichtfeld">
    <option value="" label="--">--</option>
    <option value="Baden-Württemberg" label="Baden-Württemberg">Baden-Württemberg</option>
    <option value="Bayern" label="Bayern">Bayern</option>
    <option value="Berlin" label="Berlin">Berlin</option>
    <option value="Brandenburg" label="Brandenburg">Brandenburg</option>
    <option value="Bremen" label="Bremen">Bremen</option>
    <option value="Hamburg" label="Hamburg">Hamburg</option>
    <option value="Hessen" label="Hessen">Hessen</option>
    <option value="Mecklenburg-Vorpommern" label="Mecklenburg-Vorpommern">Mecklenburg-Vorpommern</option>
    <option value="Niedersachsen" label="Niedersachsen">Niedersachsen</option>
    <option value="Nordrhein-Westfalen" label="Nordrhein-Westfalen">Nordrhein-Westfalen</option>
    <option value="Rheinland-Pfalz" label="Rheinland-Pfalz">Rheinland-Pfalz</option>
    <option value="Saarland" label="Saarland">Saarland</option>
    <option value="Sachsen" label="Sachsen">Sachsen</option>
    <option value="Sachsen-Anhalt" label="Sachsen-Anhalt">Sachsen-Anhalt</option>
    <option value="Schleswig-Holstein" label="Schleswig-Holstein">Schleswig-Holstein</option>
    <option value="Thüringen" label="Thüringen">Thüringen</option>
</select></dd>
<dt id="city-label"><label for="subform_advert-subform_contact-city" class="required">Stadt/Ort</label></dt>
<dd id="city-element">
<input type="text" name="subform_advert[subform_contact][city]" id="subform_advert-subform_contact-city" value="" title="Pflichtfeld" /></dd>
<dt id="plz-label"><label for="subform_advert-subform_contact-plz" class="required">Postleitzahl</label></dt>
<dd id="plz-element">
<select name="subform_advert[subform_contact][plz]" id="subform_advert-subform_contact-plz" title="Pflichtfeld">
    <option value="" label="--">--</option>
    <option value="9" label="9xxxx">9xxxx</option>
    <option value="8" label="8xxxx">8xxxx</option>
    <option value="7" label="7xxxx">7xxxx</option>
    <option value="6" label="6xxxx">6xxxx</option>
    <option value="5" label="5xxxx">5xxxx</option>
    <option value="4" label="4xxxx">4xxxx</option>
    <option value="3" label="3xxxx">3xxxx</option>
    <option value="2" label="2xxxx">2xxxx</option>
    <option value="1" label="1xxxx">1xxxx</option>
    <option value="0" label="0xxxx">0xxxx</option>
</select></dd>
<dt id="street-label"><label for="subform_advert-subform_contact-street" class="optional">Straße</label></dt>
<dd id="street-element">
<input type="text" name="subform_advert[subform_contact][street]" id="subform_advert-subform_contact-street" value="" /></dd>
<dt id="housenumber-label"><label for="subform_advert-subform_contact-housenumber" class="optional">Hausnummer</label></dt>
<dd id="housenumber-element">
<input type="text" name="subform_advert[subform_contact][housenumber]" id="subform_advert-subform_contact-housenumber" value="" /></dd>
<dt id="addon-label"><label for="subform_advert-subform_contact-addon" class="optional">Zusatz</label></dt>
<dd id="addon-element">
<input type="text" name="subform_advert[subform_contact][addon]" id="subform_advert-subform_contact-addon" value="" /></dd>
<dt id="mobile-label"><label for="subform_advert-subform_contact-mobile" class="optional">Mobil-Telefon</label></dt>
<dd id="mobile-element">
<input type="text" name="subform_advert[subform_contact][mobile]" id="subform_advert-subform_contact-mobile" value="" /></dd>
<dt id="tel-label"><label for="subform_advert-subform_contact-tel" class="optional">Telefon</label></dt>
<dd id="tel-element">
<input type="text" name="subform_advert[subform_contact][tel]" id="subform_advert-subform_contact-tel" value="" /></dd>
<dt id="email-label"><label for="subform_advert-subform_contact-email" class="optional">E-Mail</label></dt>
<dd id="email-element">
<input type="text" name="subform_advert[subform_contact][email]" id="subform_advert-subform_contact-email" value="" /></dd>
<dt id="hp-label"><label for="subform_advert-subform_contact-hp" class="optional">Homepage</label></dt>
<dd id="hp-element">
<input type="text" name="subform_advert[subform_contact][hp]" id="subform_advert-subform_contact-hp" value="" /></dd>
<dt id="from-label"><label for="subform_advert-subform_contact-from" class="optional">Erreichbar von</label></dt>
<dd id="from-element">
<select name="subform_advert[subform_contact][from]" id="subform_advert-subform_contact-from">
    <option value="" label="--">--</option>
    <option value="12:00" label="12:00">12:00</option>
    <option value="13:00" label="13:00">13:00</option>
    <option value="14:00" label="14:00">14:00</option>
    <option value="15:00" label="15:00">15:00</option>
    <option value="16:00" label="16:00">16:00</option>
    <option value="17:00" label="17:00">17:00</option>
    <option value="18:00" label="18:00">18:00</option>
    <option value="19:00" label="19:00">19:00</option>
    <option value="20:00" label="20:00">20:00</option>
    <option value="21:00" label="21:00">21:00</option>
    <option value="22:00" label="22:00">22:00</option>
    <option value="23:00" label="23:00">23:00</option>
    <option value="00:00" label="00:00">00:00</option>
    <option value="01:00" label="01:00">01:00</option>
    <option value="02:00" label="02:00">02:00</option>
    <option value="03:00" label="03:00">03:00</option>
    <option value="04:00" label="04:00">04:00</option>
    <option value="05:00" label="05:00">05:00</option>
    <option value="06:00" label="06:00">06:00</option>
    <option value="07:00" label="07:00">07:00</option>
    <option value="08:00" label="08:00">08:00</option>
    <option value="09:00" label="09:00">09:00</option>
    <option value="10:00" label="10:00">10:00</option>
    <option value="11:00" label="11:00">11:00</option>
</select></dd>
<dt id="to-label">&nbsp;</dt>
<dd id="to-element">
<select name="subform_advert[subform_contact][to]" id="subform_advert-subform_contact-to">
    <option value="" label="--">--</option>
    <option value="12:00" label="12:00">12:00</option>
    <option value="13:00" label="13:00">13:00</option>
    <option value="14:00" label="14:00">14:00</option>
    <option value="15:00" label="15:00">15:00</option>
    <option value="16:00" label="16:00">16:00</option>
    <option value="17:00" label="17:00">17:00</option>
    <option value="18:00" label="18:00">18:00</option>
    <option value="19:00" label="19:00">19:00</option>
    <option value="20:00" label="20:00">20:00</option>
    <option value="21:00" label="21:00">21:00</option>
    <option value="22:00" label="22:00">22:00</option>
    <option value="23:00" label="23:00">23:00</option>
    <option value="00:00" label="00:00">00:00</option>
    <option value="01:00" label="01:00">01:00</option>
    <option value="02:00" label="02:00">02:00</option>
    <option value="03:00" label="03:00">03:00</option>
    <option value="04:00" label="04:00">04:00</option>
    <option value="05:00" label="05:00">05:00</option>
    <option value="06:00" label="06:00">06:00</option>
    <option value="07:00" label="07:00">07:00</option>
    <option value="08:00" label="08:00">08:00</option>
    <option value="09:00" label="09:00">09:00</option>
    <option value="10:00" label="10:00">10:00</option>
    <option value="11:00" label="11:00">11:00</option>
</select></dd></dl></fieldset>
 
Dann würde ich label und input jeweils in ein Blockelement zusammenfassen
und beide floaten:
z.B. als ul:
Code:
<li class="selectboxen">
<p>
<label>von</label><select>...</select>
</p>
<p>
<label>bis</label><select>...</select>
</p>
</li>
Code:
.selectboxen p {
float: left;
}
 
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
 
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? :)

Screenshot:
 
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:
<!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">
...
...
...

HTML:
<div class="XXXXXXXXXXXXXX">
<label for="subform_advert-subform_contact-from" class="optional">Erreichbar von</label>

<select name="subform_advert[subform_contact][from]" id="subform_advert-subform_contact-from">
    <option value="" label="--">--</option>
    <option value="12:00" label="12:00">12:00</option>
    <option value="13:00" label="13:00">13:00</option>
    <option value="14:00" label="14:00">14:00</option>
    <option value="15:00" label="15:00">15:00</option>
    <option value="16:00" label="16:00">16:00</option>
    <option value="17:00" label="17:00">17:00</option>
    <option value="18:00" label="18:00">18:00</option>
    <option value="19:00" label="19:00">19:00</option>
    <option value="20:00" label="20:00">20:00</option>
    <option value="21:00" label="21:00">21:00</option>
    <option value="22:00" label="22:00">22:00</option>
    <option value="23:00" label="23:00">23:00</option>
    <option value="00:00" label="00:00">00:00</option>
    <option value="01:00" label="01:00">01:00</option>
    <option value="02:00" label="02:00">02:00</option>
    <option value="03:00" label="03:00">03:00</option>
    <option value="04:00" label="04:00">04:00</option>
    <option value="05:00" label="05:00">05:00</option>
    <option value="06:00" label="06:00">06:00</option>
    <option value="07:00" label="07:00">07:00</option>
    <option value="08:00" label="08:00">08:00</option>
    <option value="09:00" label="09:00">09:00</option>
    <option value="10:00" label="10:00">10:00</option>
    <option value="11:00" label="11:00">11:00</option>
</select></div>


<div class="XXXXXXXXXXXXXX">
<label for="subform_advert-subform_contact-to" class="optional">bis</label>

<select name="subform_advert[subform_contact][to]" id="subform_advert-subform_contact-to">
    <option value="" label="--">--</option>
    <option value="12:00" label="12:00">12:00</option>
    <option value="13:00" label="13:00">13:00</option>
    <option value="14:00" label="14:00">14:00</option>
    <option value="15:00" label="15:00">15:00</option>
    <option value="16:00" label="16:00">16:00</option>
    <option value="17:00" label="17:00">17:00</option>
    <option value="18:00" label="18:00">18:00</option>
    <option value="19:00" label="19:00">19:00</option>
    <option value="20:00" label="20:00">20:00</option>
    <option value="21:00" label="21:00">21:00</option>
    <option value="22:00" label="22:00">22:00</option>
    <option value="23:00" label="23:00">23:00</option>
    <option value="00:00" label="00:00">00:00</option>
    <option value="01:00" label="01:00">01:00</option>
    <option value="02:00" label="02:00">02:00</option>
    <option value="03:00" label="03:00">03:00</option>
    <option value="04:00" label="04:00">04:00</option>
    <option value="05:00" label="05:00">05:00</option>
    <option value="06:00" label="06:00">06:00</option>
    <option value="07:00" label="07:00">07:00</option>
    <option value="08:00" label="08:00">08:00</option>
    <option value="09:00" label="09:00">09:00</option>
    <option value="10:00" label="10:00">10:00</option>
    <option value="11:00" label="11:00">11:00</option>
</select></div>
CSS

HTML:
.XXXXXXXXXXXXXX{float: left }
.XXXXXXXXXXXXXX select{width: 16em;}
 
Mit dem was ich jetzt sehe muß ich raten.
Hat <label> bis </label> 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.
 
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??
 
Dann würde ich label und input jeweils in ein Blockelement zusammenfassen und beide floaten:
Code:
<p>
<label>von</label><select>...</select>
</p>
[/QUOTE]
Aber warum als Textabsatz auszeichnen? Hier handelt es sich doch nicht  um einen Textabsatz.

Angst vor Ansteckung? Divitis? :-)

Hier haben wir einen echten Fall für ein <div>. Das Label und das dazugehörige Eingabefeld wird mit <div> zu einer logischen Gruppe zusammengefügt.
 
Zurück
Oben