My login box is not displayed properly
I am trying to create a log in box which should look like this
<html>
<head>
<title>Login Page</title>
<script type="javascript" src="js/login.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="logo">
<img src="images/logo.gif"/>
</div>
<div class="line">
</div>
<div class="loginImage">
<img src="images/login_banner.jpg" />
</div>
<div class="loginTop">
<img src="images/log_top.gif" />
</div>
<div class="loginBox">
<br/>
<div class="innerLogin">
<text>Secure Login</text>
<br/><br/>
<img src="images/field_top.gif" />
<div class="innerLoginBox">
<br/>
<div class="loginControls">
Login Id
<div style="position:relative;top:15px;">
<input type="text" name="txtLogin" />
</div>
<div style="position:relative;top:30px;">
Password
</div>
<div style="position:relative;top:36px;">
<input type="password" name="txtPass" / >
</div>
<div style="position:relative;top:45px;">
<input type="button" value="Log In" />
</div>
</div>
</div>
<img src="images/field_bottom.gif" />
</div>
</div>
<div class="loginBottom">
<img src="images/log_bottom.gif" 开发者_JS百科/>
</div>
</body>
</html>
style.css
.logo
{
position:absolute;
top:15px;
left:80px;
}
.line{
position:absolute;
top:65px;
left:80px;
width:955px;
height:5;
background:#B60548;
}
.loginImage
{
position:absolute;
top:85px;
left:80px;
}
.loginTop
{
position:absolute;
top:85px;
left:770px;
}
.loginBottom
{
position:relative;
top:339px;
left:762px;
}
.loginBox
{
position:absolute;
top:88px;
left:770px;
background-color:#E5E5E5;
width:255px;
}
.innerLogin
{
position:relative;
left:15px;
}
.innerLoginBox
{
position:relative;
background-color:white;
width:226px;
}
.loginControls
{
position:relative;
left:10px;
}
text
{
color:#A4003F;
font: bold 16px Arial,Helvetica,sans-serif;
}
Remove position:relative; and top:xx; then replace with padding-top:xx
<div class="loginControls"> Login Id
<div style="padding-top:10px">
<input type="text" name="txtLogin" />
</div>
<div style="padding-top:10px"> Password </div>
<div style="padding-top:10px">
<input type="password" name="txtPass" />
</div>
<div style="padding-top:10px">
<input type="button" value="Log In" />
</div>
</div>
You can also update this
<div style="padding-top:10px">
<input type="button" value="Log In" />
</div>
to
<div style="padding-top:10px;padding-bottom:10px">
<input type="button" value="Log In" />
</div>
加载中,请稍侯......
精彩评论