将登录表单移近Header CSS HTML

Question

我正在尝试将登录表单从当前位置向上移动。它需要更接近徽标，我知道这是因为标题上设置的最小高度，但这需要修复。

右边是表格的显示方式。在左边是它应该如何出现。

请注意更改应仅影响登录表单。

.header-strip {
   background: url("../../Images/gradient.gif");
    min-width: 981px;
    position: relative;
    z-index: 300;
    min-height: 134px;
    padding-top: 10px;
}

.login {
    background: url("../../Images/Audi-R8-TDI.jpg");
    background-size: 100%;
    padding: 50px 0 50px 0;
    background-repeat: no-repeat;
    background-position: left;
    height: 500px;
    width: 1000px;
    border-radius: 5px;
}

感谢您的帮助。

Answer 1

尝试为登录添加margin-top。

Answer 2

减少你的填充顶部，直到你想要它为止。目前是50岁。

.login {
      padding: 20px 0 50px 0;
}

希望它有所帮助。

Answer 3

编辑：

变化

.login {
    background: url("../../Images/Audi-R8-TDI.jpg");
    background-size: 100%;
    padding: 50px 0 50px 0;
    background-repeat: no-repeat;
    background-position: left;
    height: 500px;
    width: 1000px;
    border-radius: 5px;
}

到

.login {
    background: url("../../Images/Audi-R8-TDI.jpg");
    background-size: 100%;
    padding: 50px 0 50px 0;
    background-repeat: no-repeat;
    background-position: left;
    height: 500px;
    width: 1000px;
    border-radius: 5px;
    margin: -20px 0 0 0;
    position: relative;
    top: 0;
    z-index: 9999;
}

这将更改登录到标头的距离，并在更高的z-index上设置登录

在这里查看jsfiddle：http://jsfiddle.net/W9gcx/

Answer 4

您必须将margin-top和padding-top设置为0，但您还必须将表单标记设置为内联显示

Answer 5

首先使用ID而不是类。我想你永远不会同时使用两个标题条或两个登录表单。

轻松设置＆＃34;保证金＆＃34;到0px。这将消除您实际拥有的距离。

#login {
margin: 0px;

background: url("../../Images/Audi-R8-TDI.jpg");
background-size: 100%;
padding: 50px 0 50px 0;
background-repeat: no-repeat;
background-position: left;
height: 500px;
width: 1000px;
border-radius: 5px;
}

尝试使用内置的＆＃34;检查器＆＃34;在浏览器中使用该边距。按＆＃34; F12＆＃34;。

margin-top 0px;

这实际上只会影响＆＃34; top＆＃34;距离。

研究这个： http://www.cssbasics.com/chapter_7_css_margins.html

编辑： 甚至你的div也不应该是父母

<div id="header-strip">..</div>
<div id="login">..</div>

Answer 6

尝试添加上边距.login类

.login {
  clear:both;
  margin-top:50px;
  background: url("../../Images/Audi-R8-TDI.jpg");
  background-size: 100%;
  padding: 50px 0 50px 0;
  background-repeat: no-repeat;
  background-position: left;
  height: 500px;
  width: 1000px;
  border-radius: 5px;

}