Rahmen um ein Formular erstellen ?

[ganter123]

Hallo zusammen,

Wie schon im Titel angedeutet, würde ich gerne ein Rahmen um mein "Registrierungsformular machen". Dabei soll es gleich wie in diesem Beispiel aussehen:

Who Says CSS Forms Cant Look Good? version 3.0

Der Text, was in meinem Fall "Registierung ist, soll wie im Beispiel zwischen den Rahmen geschrieben werden. Der Rahmen erhält dadurch einen Unterbruch, was meiner Meinung nach wirklich gut zur Geltung kommt

Ich habe vieles probiert aber bis jetzt noch ohne Erfolg:

Falls euch sonst noch Dinge auffallen, welche ich verbessern könnte, so wäre ich froh wenn ihr diese spezfisch erwähnen würdet .. :)

Danke & Gruss
ganter123

Hier ist meine HTML-Datei:

      <form action=""
        <fielset class="signup">
          <legend>Registrieren</legend>
          <div class="box">
            <label for="email">E-Mail</label>
            <input id="e-mail" class="email" type="text" name"email">    
          </div>
          <div class="box">
            <label for="password">Passwort</label>
            <input id="passwort" class="password" type="passwort" name"passwort">       
          </div>
          <div class="box">
            <label for="captcha">Captcha</label>
            <input id="captcha" class="captcha" type="text" name"captcha">  
          </div>
          <div>
            <button id="submit" type="submit">Anmelden</button>
          </div> 
        </fielset>
      </form>

Mein CSS:

form {
          background: none repeat scroll 0 0 #FFFFFF;
          border: 1px solid #EEEEEE;
          padding: 10px;
}
.login {
          background: url("../gfx/user.gif") no-repeat scroll 95% 1em transparent;
}
.signup {
          background: url("gfx/anmelden.png") no-repeat scroll 95% 1em transparent;
}
fieldset div {
          clear: both;
          margin: 0;
}

.box {
        margin-top: 5px;
}

form {
        margin: 0px;
        width: 457px;
}

label {
        float: left;
        margin-top: 5px;
        margin-right: 15px;
        text-align: right;
        width: 110px;
}

legend {
        color: #0B77B7;
        font-size: 1.8em;
        overflow: visible;
}

legend span {
        text-align: right;
        width: 110px;
}

input {
        -moz-border-radius: 0.4em 0.4em 0.4em 0.4em;
        background: none repeat scroll 0 0 #FAFAFA;
        border: 1px solid #DDDDDD;
        font: bold 0.95em arial,sans-serif;
        padding: 4px;
        width: 10em;
}

input:hover, input:focus {
        background: none repeat scroll 0 0 #F6F6F6;
        border-color: #C5C5C5;
}

fieldset {
        border: 1px solid #DDDDDD;
        padding: 5px;
}

.email, .password, .captcha {
        width: 160px;       
}

input.default {
        color: #BBBBBB;
}
#submit {
        background: url("gfx/submit-button.jpg") no-repeat scroll 0 0 transparent;
        border: 0 none;
        cursor: pointer !important;
        display: block;
        height: 26px;
        margin-top: 20px;
        overflow: hidden;
        text-indent: -9999px;
        width: 69px;
}
#submit:hover {
        background-position: 0 -26px;
}

 

[ganter123]

Wenn ich das ohne meine andere Datei anzeigen lasse, so wird der Rahmen umgesetzt ... :/

Da muss ich nochmals über die Bücher - sorry das ich eure Zeit mit einem sinnlosen Topic verschwende.

Gruss
ganter123

 

[threadi]

Du hast hier einen Schreibfehler:

<fielset class="signup">

Da fehlt ein "d". Richtig:

<fiel[COLOR="red"]d[/COLOR]set class="signup">

Beim beendenden Tag ebenso. Wenn Du das korrigierst sollte es schon klappen.