Css圖像定位問題

我試圖將我的標誌放在頁面上，並向下移動並向左移動以與部分部分重疊。頂部沒有問題，它根據需要與內容區域重疊，但是我想把它移到左邊，但是當我這樣做的時候，文本的一部分被切斷了..（保齡球應該是標誌，但正如你所看到的，B的一半已經消失了。）不知道什麼是造成這種情況，並需要幫助解決它。Css圖像定位問題

的頁面背景是白色的
包裝爲黑色
我想要的標誌部分是白色向左黑色包裝區域（如上圖所示的圖像）

目前 Currently

所需的外觀 Desired Look!

個

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>

來源

2013-02-06 myTD

該徽標似乎將頁面邊緣向左（-35px）左移。您試圖重疊的內容是否在左側？我很困惑，因爲你明確表示你試圖將標誌移動到重疊的位置，但左側似乎沒有任何內容。 – showdev

我已添加所需的外觀...整個頁面爲白色背景..中心部分爲黑色（包裝）..我希望徽標符合要求。 – myTD

您提供的代碼與您的第一張「Currently」圖片不符，是否缺少任何代碼？這就是你給定的代碼的樣子：http://jsfiddle.net/cUAp5/ – Omega

做這樣的：http://jsfiddle.net/yc6Qa/1/

而不是浮動離開標誌和設置陰性切緣，我將徽標設置爲position: absolute;並使用left: 0;。其餘的CSS/HTML是不變的。
根據您網站的其他部分，此解決方案將很適合您。

來源

2013-02-06 00:42:26 Sven

更改標誌的CSS：

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

}

基本上去除負左側。

來源

2013-02-06 00:42:54 Mark

Css圖像定位問題

回答

相關問題