Login formatieren

Ich habe mal schnell was erstellt:
Das ist nur das Grundgerüst. Die Farben markieren die Bereiche.
Abstände, Höhen und Breiten kannst du natürlich noch ändern.

HTML-Code im body:

<div id="oben">
  <p>user login</p>
 </div>




 <div id="links">
    <p>
     ID Box
     <br />
     PW Box
    </p>
 </div>




 <div id="rechts">
  <p>
   SIGN UP
   <br />
   LOST PW
   <br />
   login button
  </p>
 </div>

CSS Datei:

html, body
{
    background-color: blue;
    text-align: center;
    width: 400px;




}




#oben {
    background-color: red;
    width: 400px;
}
#oben p {
    color: white;
    text-align: left;
    margin-left: 0.5em;
}




#links {
    text-align: left;
    float: left;
    margin: 4px 8px;
    width: 300px;
    background-color: green;
    height: 80px;
}
#links p {
    margin-left: 1em;
}




#rechts  {
    text-align: center;
    margin: 4px 8px 4px 0;
    background-color: yellow;
    width: 76px;
    float: right;
    height: 80px;
}

Wobei ich den HTML Code jetzt nicht für den besten halten würde.. ja nachdem was man vorhat, ist da einiges wahrscheinlich semantisch nicht ganz richtig...

Aber das sieht man wahrscheinlich erst dann, wenn der Inhalt drin ist.

Mein Code war ja auch eher nur ein grober Tipp, wie man das machen könnte.
Was meinst du denn, ist semantisch nicht ganz richtig?

Pelgro: schau mal hier: <!-- m --><a class="postlink" href="http://de.selfhtml.org/html/formulare/formatieren.htm">http://de.selfhtml.org/html/formulare/formatieren.htm</a><!-- m -->

Sören: Das ganze ist ein Formular, würde also schonmal das <form> fehlen (p wäre hier fehl am Platz). Und die <input>s durch <br /> zu trennen ist auch nicht die feine Art.

Dieses Loginformular besteht hauptsächlich aus Bildern..
Also rann an die Arbeit

Das mit dem Loginbutton wird dann so geregelt, dass du anstatt <input type="submit"...> <input type="images" src="#"...> verwendest [:

weil mir sonst keine Methode bekannt ist, wie man das sonst machen könnte... =/