css和精靈 - 意外的結果

我在這裏做錯了什麼？我無法讓精靈正常工作。當我檢查元素時，它不是正確的高度或寬度。我已經得到了精靈的工作有一個背景圖像的容器div，但我不認爲在這種情況下有一個包裝是正確的。css和精靈 - 意外的結果

這裏是我想要做的..

<html> 
<style> 
.bottomtable{display:block;} 
.bottomtable .close {float: right;margin-right:5px;margin-top:25px;display:inline;position:relative;background-image:url('http://www.freeimagehosting.net/o2gz4');background-position:-278px -18px;height:7px;width:7px;} 
.bottomtable .close a {height:7px;width:7px;} 
.bottomtable .titletext{text-align: right;float: right;margin-right:5px;margin-top:-20px;display:block;} 
.bottomtable h5{margin:0;padding:0;font-size: 14px;font-weight:normal;display: inline;} 
.bottomtable ul {display:block;padding:5px;margin:0;} 
.bottomtable li {list-style-type:none;padding:10px;margin:0;height:75px;display:block;} 
.bottomtable li a{text-decoration:underline;font-weight:bold;display:block;margin-bottom:5px;} 
.bottomtable li a span{display:block;text-decoration:underline;font-weight:bold;margin:2px 0 4px;} 
.bottomtable ul img {display:inline;float:left;margin-top:-2px;margin-right:20px;} 
</style> 
<body> 
<div class="bottomtable"> 
<ul> 
    <li><h5><a href="#">some title</a></h5><a href="javascript://close" class="close" title="">&nbsp;</a>this is some text here..............<div style="clear: right;"></div>      </li> 
    <li><h5><a href="#">some title</a></h5><a href="javascript://close" class="close" title="">&nbsp;</a>this is some text here..............<div style="clear: right;"></div> </li> 
    <li><h5><a href="#">some title</a></h5><a href="javascript://close" class="close" title="">&nbsp;</a>this is some text here..............<div style="clear: right;"></div> </li> 
    <li><h5><a href="#">some title</a></h5><a href="javascript://close" class="close" title="">&nbsp;</a>this is some text here..............<div style="clear: right;"></div> </li> 

</ul> 
</div> 
</style> 
</html>

所有你能看到的是X的一小部分

如果我不把那鏈接之間的空白空間，它根本不顯示任何內容...必須有一些我只是做錯了。它是什麼？我檢查了網站的tuns，他們似乎並不需要那裏的空間。

來源

2012-01-29 Steve Payne

哪個背景精靈從http：// WWW。 freeimagehosting.net/o2gz4你想展示？ – Sabari 2012-01-29 09:12:49

這裏發生了什麼，爲什麼你有明確的權利的divs？我認爲你需要回過頭去學習一些關於CSS及其工作方式的知識。如果你能告訴我們你想要的結果，我們可以幫你重寫那個CSS :) – Kyle 2012-01-29 09:15:22

我正在試圖做小X. – 2012-01-29 09:22:12

這個事情的作品。請檢查此：

<html> 
    <style> 
    .bottomtable{display:block;} 
    .bottomtable .close {background-image:url("http://www.freeimagehosting.net/newuploads/o2gz4.png");background-position: -278px -18px;color: #FFFFFF;display: inline;float: right;height: 10px;margin-right: 5px; margin-top: 10px;position: relative;width: 11px;} 
    .bottomtable .close a {height:7px;width:7px;} 
    .bottomtable .titletext{text-align: right;float: right;margin-right:5px;margin-top:-20px;display:block;} 
    .bottomtable h5{margin:0;padding:0;font-size: 14px;font-weight:normal;display: inline;} 
    .bottomtable ul {display:block;padding:5px;margin:0;} 
    .bottomtable li {list-style-type:none;padding:10px;margin:0;height:75px;display:block;} 
    .bottomtable li a{text-decoration:underline;font-weight:bold;display:block;margin-bottom:5px;} 
    .bottomtable li a span{display:block;text-decoration:underline;font-weight:bold;margin:2px  0 4px;} 
    .bottomtable ul img {display:inline;float:left;margin-top:-2px;margin-right:20px;} 
</style> 
<body> 
    <div class="bottomtable"> 
    <ul> 
     <li><h5><a href="#">some title</a></h5><a href="javascript://close" class="close" title="">&nbsp;</a>this is some text here..............<div style="clear: right;"></div>         </li> 
     <li><h5><a href="#">some title</a></h5><a href="javascript://close" class="close" title="">&nbsp;</a>this is some text here..............<div style="clear: right;"></div> </li> 
     <li><h5><a href="#">some title</a></h5><a href="javascript://close" class="close" title="">&nbsp;</a>this is some text here..............<div style="clear: right;"></div> </li> 
     <li><h5><a href="#">some title</a></h5><a href="javascript://close" class="close" title="">&nbsp;</a>this is some text here..............<div style="clear: right;"></div> </li> 

    </ul> 
    </div> 
</body> 
</html>

你的背景圖片的路徑是wrong.You必須指定完整的圖像URL是http://www.freeimagehosting.net/newuploads/o2gz4.png

希望這有助於

來源

2012-01-29 09:23:19 Sabari

這件事情是正確的:) – Sabari 2012-01-29 09:53:02

這裏是工作示例（與您的代碼）http://jsfiddle.net/vFLRe/26/

<html> 
<style> 
.bottomtable .close {float:right;margin-right:5px;margin-top:25px;background-image:url('http://www.freeimagehosting.net/o2gz4');background-position:-278px -18px;height:25px;width:25px;display:block;border:1px solid black;} 
.bottomtable .close a {height:25px;width:25px;} 
</style> 
<body> 
<div class="bottomtable"> 
<ul> 
    <li><h5><a href="#">some title</a></h5><a href="javascript://close" class="close" title=""></a>this is some text here..............<div style="clear: right;"></div>      </li> 
</ul> 
    </div> 
    </body> 
</html>

來源

2012-01-29 09:15:17 Dementic

圖像將不會加載。圖像路徑是錯誤的 – Sabari 2012-01-29 09:23:58

css和精靈 - 意外的結果

回答

相關問題