对齐问题

Question

Can someone help me align the my login form and telephone number on this site: the page is based on 960 grid system and I need to align the left hand side client login and the phone number which is far right.

The CSS is as follows for that section:

#top_bar{ min-width:960px; background: #3a3a3a url(../images/menu-background-2.png) repeat-x top;   height:50px;  }
#login_bar{height:53px;}
#client_login{height:53px; width:280px; float:left; background:url(../images/client_login2.png) no-repeat center; float:left;}
#client_login_form{padding:14px 0 0 91px;}
#client_login_form input{border:medium none; outline:medium none; background:none; width:125px; height:20px; padding-right:5px; text-align:center;}
#client_login_form input.submit{width:35px;}
/*#phone{height:21px;   padding:16px 0 16px 40px; float:right;  background:url(../images/phone_icon.png) *no-repeat left; float:right;  color:#fff; font-size:20px; font-weight:bold;}*/
#phone{height:21px; width:144px; padding:16px 0 16px 40px; background:url('../images/phone_icon.png') no-repeat left;float:right; color:#fff; font-size:20px; font-weight:bold;}

I'm just not sure as to how it is done.

Thanks!

Answer 1

To get your login image to show correctly you need to change your css to:

#client_login {
    background: url("../images/client_login2.png") no-repeat scroll 0 0 transparent;
    float: left;
    height: 53px;
    position: relative;
    width: 400px;
}

To fix your form inputs change your css to:

#client_login_form input {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    float: left;
    height: 20px;
    outline: medium none;
    padding-right: 5px;
    position: relative;
    text-align: center;
    width: 125px;
}

You will have to tweak this to get it perfect, but this should help you. Make sure you're using FireBug to debug your site, it makes things way easier.