Hi
If I understand correctly, you want to have a login form as shown in the pic above.
I haven't read or tried using your css code, coz I just don't have time right now, but I can help you with this.
Using HTML & CSS:
Make an "invisible" HTML form, insert every html element below into it,
and make the outer frame a table ( the outermost grey line ),
and then close the form element.
OR
Make the outer frame a table ( the outermost grey line ),
and insert an "invisible" form elemnent, and have the closing tag just before the closing tag of the table.
( Invisible meaning the same color as the background )
In the table make 3 table rows: <tr> </tr>
In each table row, insert 2 sets of table data's: <td> </td>,
In the first <td> </td> insert: Username:
In the second <td> </td>, still in the first table row, Insert a Input box <input> </input> ( for user input ),
Do the same for the 2nd table row, ( insert Password: instead of Username: ),
In the 3rd table row, leave the first <td> </td> empty,
For the Login Button: use the <button> </button> tags,
Lastly:
Use CSS for the Sizes and styling of the HTML elements:
Give a Class name for all table rows,
Give a Class name for first COLUMN of td's,
and a Class name for the second COLUMN of td's,
and a Id name for the Login button.
I hope it helped
