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: </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.