Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Не отображает рисунки в меню

Автор: Talk 28.3.2008, 11:44

Не подскажете, почему не отображает рисунки, указанные в качестве фона span-а в ссылках, только маленькие полоски рисунка справа каждой ссылки.. smile

html

Код


<ul id="list">
 <li class="d1"><a href="#">d1 <span>&nbsp;</span></a></li>
 <li class="d2"><a href="#" >d2<span>&nbsp;</span></a></li>
 <li class="d3"><a href="#" >d3 <span>&nbsp;</span> </a></li>
</ul>

Код


#list{
float:left;
list-style:none;text-decoration:none;
z-index:1;
position: absolute;
margin:0; padding:0;
top: 325px;
margin-left:-18px;
height:39px;
width:185px;
}
#list li.d1 a , #list li.d1, #list li.d1 a span{
width:185px;
height:43px;
}
#list li.d1 a span{
background-image:url(masla2.gif);
}

Автор: bars80080 28.3.2008, 12:16

наверно, потому что span всё же строковой элемент и если в нём ничего нет, то его высота равна строке, а ширина равна нулю
один пробел и даёт всего лишь тонкую полоску

или вам нужно было чтобы d1, d2, d3 были на фоне рисунка?, тогда уж наверно надо засунуть их в эти спаны

Автор: NDenis 28.3.2008, 12:40

а я бы вообще не использовал span, а указал бы фон для li

Автор: bars80080 28.3.2008, 12:50

тож верно, но выясним мы как лучше, после того как автор скажет, что он хочет получить

Автор: Talk 28.3.2008, 13:03

Нужно было, чтобы были обычные пункты меню - у каждого своя кнопка, которая представляется картинкой фона spana, перекрывающей надпись меню, это отлично будет для индексации - когда под кнопкой меню - пункт меню, а не alt рисунка , ссылка которой не оч индексируется поисковыми системами, некоторые вообще не воспринимают такие сслыки, не воспринимают текст (а он в данном случае важен).

Спасибо за помощь!! Решение нашлось!

Вот еще надо добавить smile

Код


#list li a span{
    cursor: pointer;
    display: block;
    position: absolute;
    float: left;
    top: 0;
    left: 0;
    background-position: 0 0;
    background-repeat: no-repeat;
}