Using stylesheet

[bytes]

How can I make my login form from the simple one to this :

 

 

The stylesheet code is

 

body {
background-color:#000000;
font-family:Tahoma, sans-serif;
font-size:13px;
text-align:center;
color:#E7E7E7;
}
a {
color:#E7E7E7;
}
#web {
width:90%;
margin:0 auto;
padding:10px;
text-align:left;
background:#171717;
}
#header {
padding:5px;
font-size:16px;
font-weight:bold;
}
#footer {
text-align:center;
font-size:12px;
}
#logstable {
width:100%;
font-size:13px;
}
#logstable a{
width:100%;
font-size:13px;
}
#searchtable {
width:100%;
font-size:13px;
}
#logintable {
margin:0 auto;
border-color:#E7E7E7;
border-style:solid;
border-width:1px;
font-weight:bold;
font-size:14px;
}
#row0 {
background:#E7E7E7;
color:#171717;
font-weight:bold;
}
#row0 a{
color:#171717;
font-weight:bold;
}
.row1 {
background:#373737;
}
.row2 {
background:#666666;
}
#navigation {
margin:0px;
padding:0px 0px 0px 0px;
background:#373737;
height:33px;
}
#navigation li {
float:left;
clear:none;
list-style:none;
}
#navigation li a {
color:#F7F7F7;
display:block;
padding:10px 18px;
text-decoration:none;
font-weight:bold;
}
#navigation li a:hover {
color:#FFFFFF;
background:#171717;
}
input {
background-color:#373737;
border-color:#E7E7E7;
border-width:1px;
border-style:solid;
color:#E7E7E7;
}
select {
background-color:#373737;
border-color:#E7E7E7;
border-width:1px;
border-style:solid;
color:#E7E7E7;
}
.page0 {
height:19px;
background-color:#373737;
border-color:#E7E7E7;
border-width:1px;
border-style:solid;
color:#E7E7E7;
}
.page0 a {
text-decoration:none;
}
.page1 {
height:19px;
background-color:#171717;
border-color:#373737;
border-width:1px;
border-style:solid;
color:#373737;
}
#pages {
font-size:14px;
font-weight:bold;
margin-top:5px;
height: 20px;
}
#numbers {
float:left;
}
#delete {
float:right;
}

[phpwolf]

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