Центровка маркера

maximo · December 20, 2008

Помогите выровнить маркер в одну строку с сылкой.

Выставляю следущее:

ul {list-style-image: url(/images/my_images.gif');

}

но маркер отображется на пару пикселей выше ссылки в списке

sm0k · December 20, 2008

попробуй ul li{margin-top:-5px}

maximo · December 20, 2008

попробуй ul li{margin-top:-5px}

добавил: ul li {

list-style-image: url('/images/мой рисунок.gif');

margin-top:-5px;

}

не реагирует - все так же стоит на пару пикселей выше ссылки

sm0k · December 20, 2008

кинь код хтмл и цсс

maximo · December 20, 2008

кинь код хтмл и цсс

.copyz {

color: #2f2f2f;

font-size: 11px; /* ! */

font-family: Verdana; /* ! */

text-decoration: none;

}

.copyz ul, .copyz li {

list-style-image: url('/images/point_1.gif');

}

.copyz a:active, .copy a:visited, .copy a:link {

color: #2f2f2f;

text-decoration: none;

}

.copyz a:hover {

color: #0066FF;

text-decoration: none;

}

<tr>

<td align="left" valign="top" class="copyz"> <ul><li><a href="/medicine/">Медицина</a></li>

</ul></td>

</tr>

Edited December 20, 2008 by maximo

DjTarik · December 20, 2008

По-ходу проще сделать просто бэкгроундом... И через позишн выровнять... Я всегда так делаю и даже не загоняюсь.... =)

maximo · December 20, 2008

Объясните чайнику как правильно сделать?

rus · December 20, 2008

Может так?

<style>
.copyz {
color: #2f2f2f;
font-size: 11px;
font-family: Verdana;
text-decoration: none;
}
.copyz li {
list-style-image: url('strelka.gif');
}
.copyz a:active, a:visited, a:link {
color: #2f2f2f;
text-decoration: none;
}
.copyz a:hover {
color: #0066FF;
text-decoration: none;
}
</style>
</head>

<body>
<ul class="copyz">
<li><a href="/medicine/">Медицина</a></li>
</ul>

SelenIT · December 20, 2008

Я тоже предпочитаю способ с

ul {
   list-style: none;
}
li {
   padding-left: 25px;
   background: url(/images/point_1.gif) no-repeat 0 2px; /* последней цифрой подогнать куда надо */
}

В варианте с list-style-image, по-моему, единственный способ рулить положением маркера - через саму картинку (добавляя/убирая к ней несколько пикселей пустого пространства с нужной стороны).

Edited December 20, 2008 by SelenIT

maximo · December 20, 2008

Может так?

<style>
.copyz {
color: #2f2f2f;
font-size: 11px;
font-family: Verdana;
text-decoration: none;
}
.copyz li {
list-style-image: url('strelka.gif');
}
.copyz a:active, a:visited, a:link {
color: #2f2f2f;
text-decoration: none;
}
.copyz a:hover {
color: #0066FF;
text-decoration: none;
}
</style>
</head>

<body>
<ul class="copyz">
<li><a href="/medicine/">Медицина</a></li>
</ul>

нет так же остается, хз как сделать, может ширину строки увеличить или еще как?

п.с. дефолтовые маркера - ровно идут

Я тоже предпочитаю способ с
ul {
   list-style: none;
}
li {
   padding-left: 25px;
   background: url(/images/point_1.gif) no-repeat 0 2px; /* последней цифрой подогнать куда надо */
}
В варианте с list-style-image, по-моему, единственный способ рулить положением маркера - через саму картинку (добавляя/убирая к ней несколько пикселей пустого пространства с нужной стороны).

спасибо, помогло, выставил:

ul {

list-style: none;

}

li {

padding-left: 25px;

background: url(/images/point_1.gif) no-repeat 0 -1px; /* последней цифрой подогнать куда надо */

}

и выравнилось или нельзя данную координату в минус загонять?

Edited December 20, 2008 by maximo

rash · December 20, 2008

Можно это смещение делать отрицательным.

А вообще положением изображения, установленного с помощью list-style-image, достаточно сложно управлять. Проще размер самой картинки при этом изменять. А при установке в виде фона средства для управления положением есть, поэтому этот способ зачастую удобнее.

maximo · December 20, 2008

Можно это смещение делать отрицательным.
А вообще положением изображения, установленного с помощью list-style-image, достаточно сложно управлять. Проще размер самой картинки при этом изменять. А при установке в виде фона средства для управления положением есть, поэтому этот способ зачастую удобнее.

вот вот теперь как раз отступ в 25пикселей встал от левого края, пробуй уменьшать(поближе сделать) - маркер наезжает на текст ссылки а расстояние от левого края не уменьшается, или я не правильно делаю?

maximo · December 20, 2008

вот вот теперь как раз отступ в 25пикселей встал от левого края, пробуй уменьшать(поближе сделать) - маркер наезжает на текст ссылки а расстояние от левого края не уменьшается, или я не правильно делаю?

сделал, только косяк выходит с осликом - делает отступы где то в 10 пикселей от картинки, в лисе, опере, хроме - все нормуль, как корректно заставить работать ослика?

Victor Ananiev · December 20, 2008

вот этим хаком поиграйся: _свойство:значение; его только ослик и понимает)

maximo · December 20, 2008

вот этим хаком поиграйся: _свойство:значение; его только ослик и понимает)

дописать к стилю:

background: - для не ослика

_background: - для ослика

?

сделал вот так:

padding-left:15px;

_padding-left:5px;

не помогает, тестирую на широкофарматнике или по другому надо делать?

Victor Ananiev · December 20, 2008

ты правильно понял) но на счет того что над прописывать я не вникал) Ну вот без хака попробуй подставь значение которое подойдет для осла так как тебе надо, а потом просто поставь перед ним черточку.)

maximo · December 20, 2008

в ie7 данный хак не работает, сделал через:

<!--[if IE]>

Код для браузера Internet Explorer

<![endif]-->

теперь проблема как в нем полоску растянуть, никто не подскажет?

Edited December 20, 2008 by maximo

sm0k · December 21, 2008

можно ещё так попробывать:

li:before{background:url(marker.png);}

и с помощью маргинов выровнять маркер

Vlad · December 21, 2008

В IE7 работает хак

*padding-left:5px;

maximo · December 21, 2008

всем спасибо по маркеру, вопрос: как растянуть полосу в ие(в других броузерах работает а в ие делает отступ с правого края), коды:

.hrs {

border-bottom: 2px solid #006699;

margin-bottom: 3px;

margin-top: 3px;

}

вписываю как: <div class="hrs"></div>

при задании размеров в полную ширину - выдает отступ, при размере менее реальной ширины - выдает нормально

Sign In

Центровка маркера

Question

Link to comment

Share on other sites

19 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information