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;て使用し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 に答える