0

我正在尝试将我的徽标放在页面上，并将其向下和向左移动以与部分部分重叠。顶部没有问题，它根据需要与内容区域重叠，但我想将其移动到离开了，但是当我这样做时，部分文字被切断了..（保龄球应该是标志，但正如你所见，一半的 B 消失了..）不知道是什么原因造成的，需要帮助修理它。

  • 页面背景为白色
  • 包装纸是黑色的
  • 我希望徽标的一部分位于黑色包装区域左侧的白色上（如图所示）

目前 目前

想要的样子 想要的样子！

css 文件：

body{
    margin:0px 0px; padding:0px;
    text-align:center;
    background-color: white;
    color: white;
}
h1{
    font-size: 22px;
    font-weight: bold;
}

#Wrapper{
    width:900px;
    margin:0px auto;
    min-height:100%;
    text-align:left;
    padding:0px;
    border-width: 0px;
    overflow: auto;
}
#Header{
    background-color: white;
    width: 100%;
    min-height: 150px;
}

#ContentWrapper{
    text-align: center;
    background-color: black;
    height: 100%;
}

#Content{
    margin-left: 200px;
    text-align: left;
}

/* HEADER */
#Logo{
    float: left;
    position: relative;
    top: 90px;
    left: -35px;

}

.imgLogo{

}
#HeaderLogin{
    float:right;
    position: relative;
    top: 30px;
    left: -30px;
}

#HeaderLoginEmail{
    float:left;
    margin:0px 10px 10px 0px;
}

#HeaderLoginPassword{
    float:left;
    margin:0px 10px 10px 0px;
}

#HeaderLoginButton{
    float:left;
}

.html 文件：

<html>
<link rel="stylesheet" type="text/css" media="screen" href="base2.css">
    <body>
<div id="Wrapper">
  <div id="Header">
    <div id="Logo">
        <img class="imgLogo" src="images/logo2.png" />
    </div>
    <div id="HeaderLogin">
      <div id="HeaderLoginEmail">
           <input class="txtHeaderLogin" placeholder="Email" /> <br />
                <label class="lblHeaderLogin">Forgot Email?</label>
      </div>

      <div id="HeaderLoginPassword">
        <input class="txtHeaderLogin" placeholder="Password" /> <br />
        <label class="lblHeaderLogin">Forgot Password?</label>
      </div>

      <div id="HeaderLoginButton">
        <a href="#" class="btnHeaderLogin">LOGIN</a>
      </div>

    </div>
  </div>
  <div id="ContentWrapper">
    <div id="Content">

    </div>


  </div>
</div>

4

2 回答 2

0

这样做：http: //jsfiddle.net/yc6Qa/1/

我没有将徽标向左浮动并设置负边距，而是将徽标设置为position: absolute;and used left: 0;。CSS/HTML 的其余部分保持不变。
根据您网站的其他部分，此解决方案将非常适合您。

于 2013-02-06T00:42:26.967 回答
0

更改您的徽标 css：

#Logo{
    float: left;
    position: relative;
    top: 90px;
    left: 0px;

}

基本上去掉负左。

于 2013-02-06T00:42:54.580 回答