HTML Textfelder auseinander drücken

[Raiid]

Hallo Leute,

ich muss ein Formular erstellen, hab da aber ein kleines Problem. Habe es hinbekommen, das die Textfelder sich jetzt unabhänig vom Text positionieren. Das is bisher mein Code:

<div style="color:#4a4a4a; margin-left:25px; float:left;line-height:25px;">
    <p><strong>Apple Produkt</strong>* (Artikelnummer)</p></p>
    <p>Artikelbezeichnung</p>
    <p>Kundennummer</p>
    <p>Standort der Geräte</p>
</div>
   
   
   
   
<div style="padding-left:300px;"> 
    <form action="input_text.htm">
      <input name="produkt" type="text" size="50px" maxlength="50" value="||msgProdukt/||">
      <input name="bezeichnung" type="text" size="50px" maxlength="50" value="||msgBezeichnung/||">
      <input name="kundennummer" type="text" size="50px" maxlength="50" value="||msgKundennummer/||">
      <input name="standortGeräte" type="text" size="50px" maxlength="50" value="||msgStandortGeräte/||">
    </form>
</div>

ich will jetzt, das die Textfelder auf der gleichen höhe wie der Text liegt. Klar könnte ich margin usw nehmen, aber das soll ich ja nicht könnt ihr mir da helfen? Ich darf auch keine position nehmen sprich top&left-.-

 

[NullPointer]

Ich halte diesen Ansatz (Felder und Beschriftung in unabhängige Divs zu packen) für wenig sinnvoll. Was logisch zusammengehört, sollte auch zusammen im Markup stehen. Am einfachsten wäre es hier wohl sogar, eine (Vorsicht böses Wort ) Table zu nehmen, wo die Beschriftungen in der linken Spalte stehen und die Felder in der rechten.

Außerdem würde ich für die Beschriftungen <label> nehmen. Aber das nur am Rande

 

[Raiid]

Das Ding is, tables darf ich auch net benutzen

 

[NullPointer]

Das ist natürlich doof

Dann würde ich aber zumindest jedes Feld mit seiner Beschriftung zusammen in einen div packen. Die Beschriftung jeweils in einen span mit fester Breite, damit die Felder alle schön bündig liegen, das müßte schon reichen - oder übersehe ich was?

 

[Raiid]

könntest mir das ma vorschreiben?:/ bin noch nich soo der html pro

 

[Uepsilon]

warum darfst du die ganzen sachen nicht nehmen? klingt verrückt.

trotzdem: 2 boxen nebeneinander floaten, mit ein bisschen abstand dazwischen. dann die labels und die fields in "unterboxen" packen und diesen eine feste höhe zuweisen (und eine fest line-height, solang nur 1zeilig) und dann sollte das passen.. zumindest theoretisch.

 

[NullPointer]

mein Vorschlag (keine Garantie, da nicht getestet):

<form ...>
 <div>
    <label for="(Eingabefeld-ID)" style="width: 200px">Beschriftung</label>
    <input id="(Eingabefeld-ID)" name="..." type="..." (etc.) />
  </div>
</form>

Für jedes Eingabefeld hättest du dann einen solchen div. Die 200px sind natürlich nur ein Beispielwert, den du anpassen müßtest.

 

[Raiid]

den code werde ich gleich ausprobiern

jaa meine firma hat hohe ansprüche hier muss alles perfekt laufen(die können sich dsa auch erlauben)

Ergänzung (21. Oktober 2010)

bringt nix kann den abstand nicht ändern

Ergänzung (21. Oktober 2010)

<form class="myForm" action="input_text.htm">
    <label for="(Eingabefeld-ID)" style="width:300px; height:25px; line-height:25px; margin-left:25px; float:left;">Beschriftung</label>
    <input id="(Eingabefeld-ID)" name="..." type="..." style="height:15px; "/>
    <br class="clear"/>
    <label for="(Eingabefeld-ID)" style="width:300px; margin-left:25px; float:left;">Beschriftung</label>
    <input id="(Eingabefeld-ID)" name="..." type="..."/>
    <br class="clear"/>
    <label for="(Eingabefeld-ID)" style="width:300px; margin-left:25px; float:left;">Beschriftung</label>
    <input id="(Eingabefeld-ID)" name="..." type="..."/>
    <br class="clear"/>
</form>

habs jetzt dank euch nochma