Inputfelder sinnvoll darstellen

[NameZero912]

Hallo. Ich habe zu Beginn in der CSS Datei alle margins und paddings auf 0 setzen lassen. Nun möchte ich eine Subseite anpassen bei der ich in einer Tabelle immer in der ersten Spalte das Label für ein Input Text field stehen hatte und in der zweiten Spalte das Textfeld selbst.

Es sah bisher also so aus:
<table>
<tr>
<td align="right">Username:&nbsp;</td>
<td><input name="username" type="text" size="20" maxlength="20" id="loginfield" /></td>
</tr>
.....
</table>

Ich möchte das ganze nun geschickter lösen, über <label>. Ich habe es auch geschafft dass das ganze in etwa richtig aussieht:

<fieldset class="hidefieldset">
 <legend class="pageheading">Login</legend>
 <label for="username">Username:</label> <input name="username" type="text" size="20" maxlength="20" id="loginfield" class="additionalspace" />
 <br><label for="password">Password:</label> <input name="password" type="password" size="20" maxlength="20" class="additionalspace" />
</fieldset>

CSS dazu:
fieldset.hidefieldset {
 border: 0px;
}
legend.pageheading {
 font-size: 12px;
 font-weight: bold;
 margin-bottom: 5px;
}
input {
 font-family: Verdana, Tahoma, Arial, sans-serif;
 font-size: 10px;
 color: #000000;
}
input.additioalspace {
 margin: 20px;
}
label {
 display: block;
 width: 90px;
 float: left;
 clear: both;
 text-align: right;
 padding-right: 10px;
}

Es sieht also so aus wie bisher in der Tabelle: die input text fields sind alle plan untereinander, die Labels sind rechtsbündig in einem gewissen Abstand dazu angeordnet. Mein Problem ist: die Inputfields kleben förmlich aneinander, und der Wert "margin" gewirkt da garnichts. Wie kann ich das Problem lösen ?

Notbremse für mich wäre die Benutzung eines neuen Divs bei dem ich die <inputs> rechtsbündig anordne und die labels deebenfalls mentsprechend, aber es muss doch irgendwie intelligenter gehen (?).

Tut mir leid, CSS ist nachwievor Neuland für mich.

[Ingo Turski]

Hi,

Mein Problem ist: die Inputfields kleben förmlich aneinander, und der Wert "margin" gewirkt da garnichts. Wie kann ich das Problem lösen ?

Notbremse für mich wäre die Benutzung eines neuen Divs bei dem ich die <inputs> rechtsbündig anordne und die labels deebenfalls mentsprechend, aber es muss doch irgendwie intelligenter gehen (?).

Intelligent wäre es, auf das <br /> zu verzichten und die Elemente stattdessen in ein P zu setzen, dem Du dann gewünschte margins zuweisen kannst.

freundliche Grüße
Ingo

[NameZero912]

Intelligent wäre es, auf das <br /> zu verzichten und die Elemente stattdessen in ein P zu setzen, dem Du dann gewünschte margins zuweisen kannst.

freundliche Grüße
Ingo

Vielen Dank, so klappt es wunderbar!

[MudGuard]

Hi,

Ich möchte das ganze nun geschickter lösen, über <label>. Ich habe es auch geschafft dass das ganze in etwa richtig aussieht:

<label for="username">Username:</label> <input name="username" type="text" size="20" maxlength="20" id="loginfield" class="additionalspace" />

Das Label mit dem Text Username: steht also vor einem Feld, mit dem es nicht das geringste zu tun hat.
Das for-Attribut bezieht sich selbstverständlich auf das id-Attribut der form-Control, nicht auf das name-Attribut.
Andernfalls wären label für Radiobuttons gar nicht sinnvoll möglich, da diese ja identische name-Attribute haben müssen, um eine Gruppe darzustellen.

<br><label for="password">Password:</label> <input name="password" type="password" size="20" maxlength="20" class="additionalspace" />

Noch ein Label ohne Bezug zum danebenstehenden input ...

cu,
Andreas

[Jonathan]

<input [...] class="additionalspace" />

input.additioalspace {
margin: 20px;
}

Ist das Problem vielleicht der Tippfehler?

MfG Jonathan