CSS熱點與中心問題

我在創建網站的過程中遇到了一個問題，我不知道如何解決，在網站上有一箇中心有熱點的矩形圖片，我已經使用了下面的CSS代碼 -CSS熱點與中心問題

#image_map 
    { 
     display: block; margin-left: auto; margin-right: auto; 
     width:302px; 
     height:65px; 
     background:url(Images/ManordLogo.png) no-repeat; 
     position:relative; 
     } 
     #image_map a 
     { 
      display:block; 
      position:absolute; 
      } 

      #image_map a#link1 
      { 
       width:42px; 
       height:49px; 
       top:11%; 
       left:43%; 
       }

第一行圖像居中並允許擴展能夠在頁面上，下面的代碼定義和創建熱點。一切工作正常，熱點&圖像仍然處於正確的位置，但在設計方面，我需要比它在頁面頂部的當前位置低約20px的圖像。每次我嘗試使用邊距或填充或任何形式的定位圖像跳轉到頁面的右上角，我不知道爲什麼。

我需要的圖像和熱點保持不變，熱點的位置，以保持相對不管瀏覽器窗口大小，但對於設計我需要的圖像由20像素

我在哪裏向下移動我錯了，我怎麼能做到這一點？

編輯 - 我已經創建了JsFiddle版本，所以你可以看到我的意思，黑色代表整個圖像，水色代表熱點，我需要整個塊（黑色和水色）向下移動20個像素仍然保持居中和可擴展性。

鏈接的jsfiddle - http://jsfiddle.net/cT3Eu/

謝謝。

來源

2011-12-27 user1116846

你可以嘗試的jsfiddle例子??? – 2011-12-27 08:46:13

我不太確定你的意思，你的意思是把它放入jsfiddle給你一個我的意思或？ – user1116846 2011-12-27 13:28:54

我在IE7，8，9，當前的Firefox版本和當前的Chrome版本進行了測試，併爲margin-top: 20px;的#image_map增加對我工作得很好：http://jsfiddle.net/cT3Eu/1/

來源

2011-12-27 13:57:02 Armin

我一定是做錯了，我想我只是把邊緣放在錯誤的地方？以太的方式，謝謝。 – user1116846 2011-12-27 14:04:06

CSS熱點與中心問題

回答

相關問題