Zunächst mal den HTML-Code:
<fieldset>
<legend>Neuen Eintrag erstellen</legend>
<form>
<label for="name">* Name</label>
<input type="text" id="Name" name="name" class="Eingabefeld"><br>
<label for="email">eMail</label>
<input type="text" id="email" name="email" class="Eingabefeld"><br>
<label for="homepage">Homepage</label>
<input type="text" id="homepage" name="homepage" class="Eingabefeld"><br>
<label for="kommentar">* Kommentar</label>
<textarea id="kommentar" name="kommentar" class="Eingabefeld" rows="8"></textarea><br>
<input type="submit" value="Abschicken" class="Abschicken">
<input type="reset" value="Löschen" class="Loeschen">
</form>
</fieldset>
...und nochmal die zugehörigen Definitionen der CSS-Datei:
fieldset
{
border: #26a solid 2px;
width: 230px;
padding: 5px
}
legend
{
padding-top: 2px;
padding-bottom: 3px;
padding-left: 4px;
padding-right: 4px;
background: #26a
}
label
{
float: left;
text-align: right;
padding-right: 10px;
clear: both
}
.Eingabefeld
{
width: 50px;
float: left;
margin-bottom: 10px;
border: 1px solid #000000;
background-image: url(pic/gfx/L_schatten_eingabefelder.gif);
overflow: hidden
}
.Abschicken,
.Loeschen
{
color: #ffffff;
background: #26a;
border: 1px #9cf outset
}
.Abschicken
{
clear: both;
float: left
}
.Loeschen
{
float: right
}
Probleme sind:
1. Der unschöne Abstand zwischen der Bezeichnung der Legende und dem ersten Eingabefeld:
+-------------------------+
+-+ Neuen Eintrag erstellen +-------+
| +-------------------------+ |
| |
| |
| |
| +-------------------------+ |
| Name: | | |
| +-------------------------+ |
| |
| +------------------------+ |
| eMail: | | |
| +------------------------+ |
| |
+-----------------------------------+
2. Die Breite des fildsets soll sich nach dessen Inhalt richten, ohne dass ich mich um die genaue Breitenangabe kümmern muss.
Die von MudGuard (Andreas) vorgeschlagene Anweisung margin:auto funktioniert nicht. Hier wird das fieldset ebenfalls über die gesamte Bildschirmbreite gezogen.
Gruss, Enrico