<ul> Sprite Issue - PullRequest
Новая
       30

<ul> Sprite Issue

2 голосов
/ 02 июня 2011

У меня есть следующий код 

<ul id ="menu">
    <%foreach (var pckg in Model)
    { %>

        <li style = "text-align:center;width:60px;" class = "top-<%=pckg.Controller.ToLower() %>"> 
            li-text
        </li>

    <%} %>

</ul>

и следующий спрайт CSS 

.top-pkg1{ background-position: -184px 0; width: 36px; height: 36px; } 
.top-pkg2{ background-position: -270px 0; width: 36px; height: 36px; } 
.top-pkg3{ background-position: -356px 0; width: 36px; height: 36px; } 
.top-pkg4{ background-position: -517px 0; width: 36px; height: 36px; } 
.top-pkg5{ background-position: -603px 0; width: 36px; height: 31px; } 
.top-pkg5{ background-position: -689px 0; width: 36px; height: 36px; } 
.top-pkg6{ background-position: -775px 0; width: 36px; height: 36px; } 
.top-pkg7{ background-position: -861px 0; width: 36px; height: 36px; }

, а вот контейнер css 

 #menu li
    {
         display:block;
         background: url(/Content/images/TopMenu/topmenu.png) no-repeat top left; 

    }    
    #menu li a
    {
        margin-top:35px;
        text-align:center;    
    }

Но когда яЗапустив этот код, я получаю первое изображение спрайта, частично показанного на всех тегах li. Не могу понять проблему.Я создал CSS из Здесь Ссылка Fiddle http://jsfiddle.net/tassadaque/LnGqX/1/

Ответы [ 2 ]

1 голос
/ 02 июня 2011

@ tassadaque;Вы уже определили background-position в вашем li URL-адресе изображения top left

background: url(/Content/images/TopMenu/topmenu.png) no-repeat top left;

Поэтому удалите top left позицию из вашего li URL-адреса изображения и напишите так: 

background: url(/Content/images/TopMenu/topmenu.png) no-repeat;

Редактировать Запись: 

#menu li {background: url(/Content/images/TopMenu/topmenu.png) no-repeat;}

#menu li.top-pkg1{ background-position: -184px 0; width: 36px; height: 36px; }
#menu li.top-pkg2{ background-position: -270px 0; width: 36px; height: 36px; }
#menu li.top-pkg3{ background-position: -356px 0; width: 36px; height: 36px; }
#menu li.top-pkg4{ background-position: -20px 0; width: 36px; height: 36px; }
#menu li.top-pkg5{ background-position: -603px 0; width: 36px; height: 31px; }
#menu li.top-pkg5{ background-position: -689px 0; width: 36px; height: 36px; }
#menu li.top-pkg6{ background-position: -775px 0; width: 36px; height: 36px; }
#menu li.top-pkg7{ background-position: -861px 0; width: 36px; height: 36px; }
0 голосов
/ 02 июня 2011

Сначала запустите: 

<ul id ="menu">
    <%foreach (var pckg in Model)
    { %>

        <li style = "text-align:center;width:60px;"> 
            top-<%=pckg.Controller.ToLower() %>
        </li>

    <%} %>

</ul>

Чтобы узнать, есть ли у вас top-pkg1, top-pkg2 и т. Д. Мне кажется, что у вас один и тот же класс во всех li.

...