CSS и спрайты - неожиданный результат - PullRequest
Новая
       1

CSS и спрайты - неожиданный результат

0 голосов
/ 29 января 2012

Что я здесь не так делаю? Я не могу заставить спрайты работать правильно. Когда я проверяю элемент, это не правильная высота или ширина. Я получил спрайты для работы с контейнером div с фоновым изображением, но я не думаю, что использование обертки является правильным в такой ситуации.

Вот что я пытаюсь сделать .. 

<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.

Если я не вставлю это пустое пространство между ссылками, это вообще ничего не показывает ... Должно быть что-то, что я просто делаю неправильно. Что это? Я проверил настройки сайтов, и им, похоже, не нужно там места.

Ответы [ 2 ]

0 голосов
/ 29 января 2012

Эта штука работает.Проверьте это следующим образом: 

<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>

Ваш путь к фоновому изображению неверный. Вам нужно указать полный URL-адрес изображения http://www.freeimagehosting.net/newuploads/o2gz4.png

Надеюсь, это поможет

0 голосов
/ 29 января 2012

Вот рабочий пример (с вашим кодом) 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>
...