| |
|
|
| | И снова нужен хелп... в свое оправдание скажу, что перепробовал много вариантов :)
итак, вроде простая задача - в <li> сделать маркером картинку.
после того, как самостоятельные попытки не удались - этот ресурс (http://www.w3schools.com/css/css_examples.asp) я тоже посетил.
Обычный тест проходит без сложностей:
<style>
li {
list-style-position: outside;
list-style-image: url(i/rightarrow_red.gif);
}
</style>
<ul>
<li>pos 1<br>eoreorieoprie</li>
<li>pos 2</li>
<li>pos 3<br>eoreorieoprie</li>
<li>pos 4</li>
</ul>
|
тут можно переопределять как <li>, так и <ul> - результат одинаков.
Но в реальном применении - <li> маркируется дефолтовыми кружками (disc) - и хоть ты убейся!
Вот фрагмент CSS
.innertube_left{
margin-left: 15px;
margin-right: 15px;
background: #D5270E;
padding-left:7px;
padding-right:5px;
}
.slidedoormenu{
margin: 0;
padding: 5px;
width: 140px;
}
.slidedoormenu li{
list-style-position: outside;
list-style-image: url('i/rightarrow_red.gif');
border-bottom: 1px solid black;
}
.slidedoormenu li a{
display: block;
font: bold 13px Tahoma;
color: white;
width: auto;
padding: 7px 0;
text-indent: 10px;
text-decoration: none;
}
|
Вот как используется в HTML
<div class="innertube_left">
<ul class="slidedoormenu">
<li class="current"><a href="#">pos 1</a></li>
<li><a href="#">pos 2</a></li>
<li><a href="#">pos 3</a></li>
<li><a href="#">pos 4</a></li>
<li><a href="#">pos 5</a></li>
<li class="lastitem"><a href="#">pos 6</a></li>
</ul>
</div>
|
| |
| |
|
|
| |
|
|
| |
для: LouD
(17.06.2007 в 13:44)
| | | Код вполне валиден.
Более чем уверен, что проблема в картинке - то ли неверно указан путь к ней, то ли эта картинка вовсе отсутствует на сервере. | |
| |
|
|
| |
|
|
| |
для: CNT
(17.06.2007 в 13:52)
| | | >Более чем уверен, что проблема в картинке - то ли неверно указан путь к ней
Да, наверное с путями что-то... Буду ковыряться дальше :)
Спасибо за оперативный ответ, CNT...
Нравится мне этот форум - ответы быстрые и профессиональные! | |
| |
|
|
| |
|
|
| |
для: LouD
(17.06.2007 в 13:44)
| | | А list-style-image задается разве для <li>, а не для <ul> (или <ol>) http://www.w3schools.com/css/pr_list-style-image.asp | |
| |
|
|
| |
|
|
| |
для: ilyaILF
(17.06.2007 в 13:58)
| | | на самом деле без разницы - действует в обоих случаях: и для <ul>, и для <li>
в моем варианте я все равно переопределял <li> - поэтому во-избежание разбухания кода и картинку переопределил там же. | |
| |
|
|
| |
|
|
| |
для: LouD
(17.06.2007 в 14:01)
| | | совет:
li{
list-style:none;
background: url() no-repeat left top;
padding-left:20px;
}
так вы сможете управлять позицией маркера. | |
| |
|
|
| |
|
|
| |
для: AlexSol
(17.06.2007 в 14:05)
| | | да, спасибо. Пригодилось для шлифовки под Mozilla Firebird - там маркер упорно уезжал сильно влево, за границу дива. Сейчас во всех броузерах на своем месте. | |
| |
|
|
| |
|
|
| |
для: ilyaILF
(17.06.2007 в 13:58)
| | | Это свойство применимо к тегам LI, OL, UL
А в MSIE ещё и к объектам currentStyle, runtimeStyle и style | |
| |
|
|
