2015-07-12 47 views
0

我最近有一個問題,當我試圖最小化我的瀏覽器時,我的徽標會被切斷。這很容易通過取走margin-left {negative-value;}來解決。現在,我的徽標被放置在我想將它移動到左邊幾個像素的位置,但顯然不想使用上述屬性和值。我嘗試了保證金的權利,似乎沒有工作。我也想保持定位的方式,只關注使用正常流量。在下面的圖片中,您可以看到主導航鏈接的背景圖片與徽標重疊。我只是想把它移到左邊有點任何幫助表示讚賞!將徽標移到左邊幾個像素

https://jsfiddle.net/w95n3x0L/2/

<div id="header"> 
<p id="logo"><img src="images/logo.png" alt="Bethan Rainforth a comedic dancer"> 
</p> 
</div> 

#logo img { 
width: 320px; 
margin-top: -60px; 
} 

enter image description here

+1

你可以在HTML/CSS代碼片段或JSFiddle中顯示此內容嗎? – 5ervant

+0

我的標誌因爲在我的電腦上不顯示。 – gwerd

+0

你想達到什麼目的?你能提供圖像嗎? – 5ervant

回答

2

我只是想動它向左移動一點,但不使用負值或定位。

你不能將它移動到左側,而無需使用負值作爲圖像沒有計算左邊距。只要使用這種margin-left: -50px;,如果你想將其移動到左邊:

#logo > img { 
    margin-left: -50px; 
} 

所有我想要的是標誌向左移動幾個像素。所以我的主頁導航的背景圖片不會重疊。

如果你想擺脫一個鏈接重疊的圖像,那麼你可以設置比你的頭的z-index越高#nav-barz-index等這樣的:

#nav-bar { 
    z-index: 1; 
} 

這樣, #logo不會再覆蓋#nav-bar

也請將<p id="logo">...</p>更改爲<div id="logo">...</div>,因爲其內容沒有段落。

0

要移動的標識一些像素到左邊,你應該添加position: relative#headerlogo絕對是這樣的位置:

(請移除p標識爲這樣的標誌部分):

HTML

<div id="header"> 
    <img id="logo" src="images/logo.png" alt="Bethan Rainforth a comedic dancer"> 
</div> 

CSS

#header{ 
    position: relative; 
} 
#logo{ 
    position: absolute; 
    width: 320px; 
    height: 100px; 
    top: 60px; 
    left: -10px; 
} 
0

,你可以,如果這不是一個問題總是裁剪源圖像。但是,如果你不想這樣做,你可以設置圖片爲背景,將其移動這樣一點點:

<p id="logo"></p> 

而應用此CSS:

p#logo { 
    height: 154px; 
    width: 320px; 
    background-image: url('http://i.imgur.com/UwpTOvm.png'); 
    background-repeat: no-repeat; 
    background-position-x: -25px; /*move it to the left*/ 
    background-size: 100%; 
}