| |
 12.5 Кб |
|
| | Использую технологию спрайт.
Существует код
<div class="icons">
<ul>
<li><a href="#"><span class="icon-print"></span>Печать</li>
<li><a href="#"><span class="e-mail"></span>E-mail</li>
</ul>
</div>
|
В css
.icons ul, ul.pagenav{list-style:none;}
.icons ul li{}
.icons ul li a{
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
.icons ul li span{
display:block;
width:15px;
height:18px;
background:url(../images/icons/glyphicons-halflings.png) no-repeat;
}
.icons ul li span.icon-print:after{
background-position:50px 20px;
}
|
Что не делаю, но позиция к картинке не меняется. Что не так делаю?
P.S. И хочется убрать надпись "Печать", "E-mail". Убрать по сути не проблема, к ссылке приписать display:bloсk Но тогда и иконка пропадает. | |
| |
|
|
| |
|
|
| |
для: immortal727
(16.03.2015 в 17:42)
| | |
background-position: -48px -23px;
|
| |
| |
|
|
| |
|
|
| |
для: Sfinks
(16.03.2015 в 18:09)
| | | Уже много раз пробовал изменять позиции, бесполезно. Показывает только первое изображение и всё | |
| |
|
|
| |
|
|
| |
для: immortal727
(17.03.2015 в 10:01)
| | | Пришлось "извращаться"
.icons ul li a{
padding-left:18px;
/*display:block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;*/
}
.icons ul li.print-icon a{
position: relative;
background-image: expression(this.runtimeStyle.backgroundImage="none",
this.innerHTML = '<img alt="" src="../images/icons/glyphicons-halflings.png">'+this.innerHTML);
}
.icons ul li.print-icon a:before{
content: url(../images/icons/glyphicons-halflings.png);
position: absolute;
top: -50px;
clip: rect(50px 110px 65px 95px);
left: -95px;
}
|
Но тогда никак не убирается текст
А если так, то позиционирование не работает
.icons ul li a{
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background:url(../images/icons/glyphicons-halflings.png) no-repeat;
display:block;
width:15px;
height:18px;
}
.icons ul li span.icon-print{
background-position: -48px -23px;
}
|
| |
| |
|
|
| |
|
|
| |
для: immortal727
(17.03.2015 в 10:01)
| | | Цитата:
<div class="icons">
<ul>
<li><a href="#"><span class="icon-print"></span>Печать</li>
<li><a href="#"><span class="e-mail"></span>E-mail</li>
</ul>
</div>
|
конец цитаты
А тег <a> закрывать пробовали? | |
| |
|
|
| |
|
|
| |
для: immortal727
(16.03.2015 в 17:42)
| | |
.icons ul, ul.pagenav {
list-style: none;
width: 15px;
}
.icons ul li {
margin-bottom: 10px;
}
.icons ul li a {
display: block;
width: 15px;
height: 15px;
background: url(../images/icons/glyphicons-halflings.png) no-repeat;
}
.icons ul li a.icon-print {
background-position: -24px -24px;
}
<div class="icons">
<ul>
<li><a href="#" class="icon-print"></a></li>
<li><a href="#" class="e-mail"></a></li>
</ul>
</div>
|
| |
| |
|
|
| |
|
|
| |
для: Mookapek
(18.03.2015 в 01:46)
| | | Такой вариант вообще не выход. Если оставлять надпись, то изображение наезжает и никакими отсупами ничего не сделаешь. Оставил свой ранний вариант.
Ваш подходит если действительно оставить только значки | |
| |
|
|
| |
|
|
| |
для: immortal727
(18.03.2015 в 12:30)
| | | "И хочется убрать надпись "Печать", "E-mail"." - это не вы писали? | |
| |
|
|
| |
|
|
| |
для: Mookapek
(18.03.2015 в 01:46)
| | | С надписями:
.icons ul, ul.pagenav {
float: left;
padding: 0;
margin: 0;
list-style: none;
}
.icons ul li:first-child {
margin-bottom: 10px;
}
.icons ul li span {
display: inline-block;
}
.icons ul li span.mark {
padding-left: 4px;
}
.icons ul li span.ic {
width: 15px;
height: 16px;
margin-bottom: -4px;
background: url(../images/icons/glyphicons-halflings.png) no-repeat;
}
.icons ul li span.icon-print {
background-position: -24px -25px;
}
<div class="icons">
<ul>
<li><a href="#"><span class="ic icon-print"></span><span class="mark">Печать</span></a></li>
<li><a href="#"><span class="ic e-mail"></span><span class="mark">Email</span></a></li>
</ul>
</div>
|
| |
| |
|
|
