鏈接出血外部圖像？

我有兩個問題，如果有人能幫助我，我將不勝感激。鏈接出血外部圖像？

我正在開發一個頁面上有一列圖像鏈接元素的移動網站。不過，我有一些問題，如下圖所示以藍色描述，圖像元素周圍的鏈接元素會滲出到外部並填充整個div的寬度。

enter image description here

標記：

<body> 
     <div id="vinranka"> 
      <img id="vinrankaIMG" src="img/vinrankaCrop.png"> 
      <img id="vinkattenText" src="img/vinkattenText.png"> 
     </div> 

     <div id="pageFull"> 

      <div id="searchBox"> 
       <form id="searchForm" method="post" action=""> 
        <div id="searchFieldBg"> 
         <input id="searchField" type="text" value="Sök dryck.." name="query"> 
         <input id="searchButton" type="submit" value="Sök" /> 
        </div> 

       </form> 
      </div> 

      <div id="btContainer"> 
       <a class="imgLink" href="redWhine.html"> <img class="buttons" src="img/redWhineBt.png"></a> 
       <a class="imgLink" href="whiteWhine.html"> <img class="buttons" src="img/whiteWhineBt.png"></a> 
       <a class="imgLink" href="sparkelingWhine.html"> <img class="buttons" src="img/sparkelingWhineBt.png"></a> 
       <a class="imgLink" href="champagne.html"> <img class="buttons" src="img/champagneBt.png"></a> 
       <a class="imgLink" href="roseWhine.html"> <img class="buttons" src="img/rosevinBt.png"></a> 
       <a class="imgLink" href="glogg.html"> <img class="buttons" src="img/gloggBt.png"></a> 
      </div> 

     </div> 

    </body>

編輯：這裏的CSS：

html, body { 
    margin: 0px; 
    padding: 0px; 
    background-color: #aed604; 
} 

#vinrankaIMG { 
    position: absolute; 
    z-index: 2; 
} 

#vinkattenText { 
    margin-left: 220px; 
    margin-top: 10px; 
} 

#pageFull { 
    position: absolute; 
    margin-left: 20px; 
    width: 454px; 
    height: 889px; 
    background-image: url('../img/pageFull.png'); 
    z-index: 1; 
} 

#btContainer { 
    display: block; 
    z-index: 10; 
} 

img.buttons { 
    display: block; 
    vertical-align: top; 
    border: 0px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 40px; 
} 

a.imgLink { 
    margin: 0px; 
    padding: 0px; 
}

我發現類似的問題的話題，其中的解決辦法是增加「垂直對齊：頂部'到圖像CSS。然而，這對我來說並不奏效，我不確定我們甚至有同樣的問題。

另一個問題是用紅色描述的區域。我有一個圖像與z-index重疊的白色背景div。問題是它也與頂部圖像鏈接重疊，即使圖像鏈接具有較高的z索引，也就是說它在標有紅色的區域變得不可點擊。圖像鏈接是否被鎖定在每個元素之下，它位於內部的白色背景之上..？

我真的很希望我已經足夠好地描述了我的問題...... =）如果有人能幫助我，我將不勝感激！我會回答你提出的任何問題！

謝謝！

/最大

來源

2011-03-01 AndroidHustle

你能提供你的CSS嗎？ – thirtydot

哦，沒有注意到你的評論。現在添加CSS。 – AndroidHustle

這實際上證明是非常簡單的。我只是簡單地將a元素設置爲與圖像具有相同的最大寬度。現在它不再流血了。對於重疊，我移動了包含「pageFull」div之外的按鈕的div，並將其位置設置爲「絕對」。現在，我可以輕鬆地將整個按鈕組件移回原始位置，只是篡改邊距，現在不再與左上圖片重疊。

希望這可以幫助別人！ =）

來源

2011-03-01 17:56:23 AndroidHustle

鏈接出血外部圖像？

回答

相關問題