CSS Sprite jquery-ui標籤菜單中的圖像問題導航

我目前有問題，我在我的導航菜單中爲標籤放置圖標。我使用了一個在線圖像css sprite創建器，它運行良好。現在的問題是圖片顯示不正確。我該如何解決這個問題？這裏是我的EXAMPLE HTMLCSS Sprite jquery-ui標籤菜單中的圖像問題導航

<ul> 
<li><a href="#tab-1" class="pngIcon sprite-category">1. Category</a></li> 
<li><a href="#tab-2" class="pngIcon sprite-description">2. Description</a></li> 
<li><a href="#tab-3" class="pngIcon sprite-images">3. Images</a></li> 
<li><a href="#tab-4" class="pngIcon sprite-contact">4. Contact Info</a></li> 
<li><a href="#tab-5" class="pngIcon sprite-final">5. Final</a></li> 
</ul>

CSS我從所做的css_sprite圖片網站上的座標

.sprite-final{ background-position: 0 0; width: 32px; height: 32px; } 
.sprite-category{ background-position: 0 -82px; width: 32px; height: 32px; } 
.sprite-contact{ background-position: 0 -164px; width: 32px; height: 32px; } 
.sprite-description{ background-position: 0 -246px; width: 32px; height: 32px; } 
.sprite-images{ background-position: 0 -328px; width: 32px; height: 32px; } 


.pngIcon { 
    padding: 0; 
    background: url(http://webprolearner.ueuo.com/dropdown-menu/images/tabdetails.png) no-repeat top left; 
    height: 32px; 
    line-height: 32px; 
    text-indent: 40px; 
    margin: 0 5px; 
    display: block; 
}

CSS雪碧圖片

enter image description here

來源

2012-08-02 CodingWonders90

well css是區分大小寫的，因此修復sprite-final上的大寫字母F以作爲開始。編輯：我可以只添加你使用id和類錯誤，類是用於多次使用的東西，在這種情況下，#pngIcon，而ID應該是唯一的，在這種情況下，所有的sprite-xx。 – Andy 2012-08-02 21:02:32

你真的需要標籤裏面標籤嗎？你爲什麼不使用標籤並添加具有「背景」屬性的類？ – 2012-08-02 21:05:22

另外，在您的代碼中，您首先用全部圖標調用整個圖像tabdetails.png，然後再次用相同的圖標上課。所有在同一個img標籤。正因爲如此，所有的圖標都顯示在同一時間 – 2012-08-02 21:09:01

精靈僅用於背景。刪除初學者的img標籤。然後直接添加.sprite-Final, ...類的a標籤還添加了一個類pngIcon到每個錨（不是作爲#ID，只能在每個頁面發生ID一次！）然後更新你的CSS如下：

.pngIcon { 
    padding: 0; 
    background-image: url(images/tabdetails.png); 
    background-repeat: no-repeat; 
    height: 32px; 
    line-height: 32px; 
    text-indent: 40px; 
    margin: 0 5px; 
    display: block; 
}

我認爲應該做的伎倆......

來源

2012-08-02 21:08:41 Pevara

+1我已經根據你的建議將它從id更改爲一個類。但通過刪除'img'，你的意思是設置它像這樣'

1. Category

' – CodingWonders90 2012-08-02 21:27:05

是的，這正是我的意思 – Pevara 2012-08-02 21:28:34

噢好吧，我不知道爲什麼，但它現在在所有標籤重複相同的圖片。請檢查已完成的[CHANGES]（http://webprolearner.ueuo.com/dropdown-menu/test1.php）。 – CodingWonders90 2012-08-02 21:31:54

首先，喲你需要檢查你的ID和課程。 ID是唯一的，不應該在代碼中重複，而類正是這樣的：重複。我會在別的之前改變它。

其次，CSS是級聯樣式，所以重要的是首先閱讀樣式。您正在定義類，之後您將命令background: url(images/tabdetails.png) no-repeat top left;設置爲#pngIcon（左上角相當於background-position）。

第三個和更重要，你應該給背景的<a>，而不是使用圖像。你的CSS沒有被應用！

來源

2012-08-02 21:08:10 Yisela

謝謝，我不知道我是如何犯這種類型的犯罪與IDS類混淆，但我已經改變了它。 – CodingWonders90 2012-08-02 21:28:03

您需要在特定的類分配給<a>元素。然後你將這個精靈作爲背景應用於每個人。您不需要那裏的<img>元素。

<li><a href="#tab-1" class="sprite-Final">1. Category</a></li>

然後給該錨元件一些填充到左側。由於圖標寬度爲32像素，因此可能類似於35像素。這樣做會將文本「1.類別」推到右側。對錨點應用任何調整以使文本與背景圖標圖像很好地對齊。 line-height: X;屬性最好是垂直對齊。

來源

2012-08-02 21:14:39 EdwardM

CSS Sprite jquery-ui標籤菜單中的圖像問題導航

回答

相關問題