Alignment Issue
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)开发者_StackOverflow 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!
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.
精彩评论