Подскажите по list-style-image ?

[quake3]

Добрый день. Подскажите плиз - сделал в качестве маркера списка картинку 32х32.

Стиль:

list-style-image (...url к файлу);

list-style-position:outside;

display:list-item;

Собственно вопрос в том, как можно этот маркер выровнять по центру относительно текста ( типа align="middle" ), а то текст начинается по базовой линии.

[psywalker]

Добрый день. Подскажите плиз - сделал в качестве маркера списка картинку 32х32.

Стиль:

list-style-image (...url к файлу);

list-style-position:outside;

display:list-item;

Собственно вопрос в том, как можно этот маркер выровнять по центру относительно текста ( типа align="middle" ), а то текст начинается по базовой линии.

делай фон не маркерами, а background'ом

[quake3]

делай фон не маркерами, а background'ом

Попробовал... Картинка горизонтально обрезается сверху и снизу пикселей на 5 (сама 32х32)...текст выводится прямо поверх неё.. при установке margin-left фоновая картинка сдвигается вместе с текстом.

Покажи пример пожалуйста.

Суть в том, что краткие новости выводятся в правой колонке сайта, вертикально. Разделяются <HR> -ом. У колонки свой стиль с шапкой (НОВОСТИ) и background-ом.

Edited January 9, 2010 by quake3

[psywalker]

Попробовал... Картинка горизонтально обрезается сверху и снизу пикселей на 5 (сама 32х32)...текст выводится прямо поверх неё.. при установке margin-left фоновая картинка сдвигается вместе с текстом.

Покажи пример пожалуйста.

Суть в том, что краткие новости выводятся в правой колонке сайта, вертикально. Разделяются <HR> -ом. У колонки свой стиль с шапкой (НОВОСТИ) и background-ом.

Покажи скрин того, что хочешь получить.

[quake3]

Покажи скрин того, что хочешь получить.

[psywalker]

Ну и какие проблемы, бери и вешай фон на LI, делай нужные паддинги и радуйся результату.

[quake3]

Ну и какие проблемы, бери и вешай фон на LI, делай нужные паддинги и радуйся результату.

А нет ли возможности именно выровнять картинку-маркер с помощью css ?

[psywalker]

А нет ли возможности именно выровнять картинку-маркер с помощью css ?

да почему-же нет, http://htmlbook.ru/css/background-position.html

[quake3]

да почему-же нет, http://htmlbook.ru/css/background-position.html

Не то.. я имею ввиду если не делать через background, а выровнять именно list-style-image...

[psywalker]

Не то.. я имею ввиду если не делать через background, а выровнять именно list-style-image...

Если делать через background, то и выравнивать надо через него. В чём проблема?

[Justnewone]

Не то.. я имею ввиду если не делать через background, а выровнять именно list-style-image...

Выравнивайте. почитайте и выравнивайте. Можно конечно поиграться с высотой самих строк, но играйтесь сами, не ждите от людей, что они захотят на кактус вместо Вас садиться.

[quake3]

Выравнивайте. почитайте и выравнивайте. Можно конечно поиграться с высотой самих строк, но играйтесь сами, не ждите от людей, что они захотят на кактус вместо Вас садиться.

Почитал все.. ничего не нашел.. Картинка-маркер все равно начинается на одну строчку выше текста новости

Вот что получается:

Edited January 13, 2010 by quake3

[AKyHuH]

хм

css:

ul.icons li{
list-style: none;
}

.icon1,
.icon2,
.icon3
{
padding-left: 32px;
}

.icon1
{
	background: transparent url(../images/icon1.gif) no-repeat;
}

.icon2
{
	background: transparent url(../images/icon2.gif) no-repeat;
}

.icon3
{
	background: transparent url(../images/icon3.gif) no-repeat;
}

html:

<ul class="icons">
 <li class="icon1">fdjldkfjgldfkgj</li>
 <li class="icon2">fdjldkfjgldfkgj</li>
 <li class="icon3">fdjldkfjgldfkgj</li>
</ul>

я как-то так себе это представляю

Edited January 13, 2010 by Great Rash

[Justnewone]

Почитал все.. ничего не нашел.. Картинка-маркер все равно начинается на одну строчку выше текста новости

Вот что получается:

Внимание вопрос, как Вы думаете, почему ничего не нашли?

[AKyHuH]

Внимание вопрос, как Вы думаете, почему ничего не нашли?

викторина?

думаю ничего не нашли, потому что ни там искали, тут надо паддингами и маргинами играть, а ссылка на лист-стайл...

хм, почитал первый пост, вопрос то вообще в том, чтобы маркер вертикально по центру был, а не в том, что он начинается на одну строку выше текста... тогда тут другой подход нужен...

Edited January 13, 2010 by AKyHuH

[Justnewone]

викторина?

думаю ничего не нашли, потому что ни там искали, тут надо паддингами и маргинами играть, а ссылка на лист-стайл...

Почитайте внимательно ветку.

[rus]

Не то.. я имею ввиду если не делать через background, а выровнять именно list-style-image...

Не думаю что есть разница что через бэграунд, что через лист-стайл-имидж, можно так.

То есть: background-image: url('images/mybg.png') left bottom; или left center...

Edited January 13, 2010 by rus

[AKyHuH]

Не думаю что есть разница что через бэграунд, что через лист-стайл-имидж, можно так.

То есть: background-image: url('images/mybg.png') left bottom; или left center...

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

css:

ul.icons li {
list-style: none;
padding-left: 32px;
background: transparent url(../images/icon-gazeta.gif) no-repeat left center;
min-height: 32px;
}

html:

<ul class="icons">
<li>fdjldkfjgldfkgj</li>
<li>fdjldkfjgldfkgj</li>
<li>fdjldkfjgldfkgj</li>
</ul>

вот даже так, если маркер всегда одинаковый

Edited January 13, 2010 by Great Rash
Для оформления кода есть специальные теги. Не забывайте об этом.

[s0rr0w]

Почитал все.. ничего не нашел.. Картинка-маркер все равно начинается на одну строчку выше текста новости

Вот что получается:

ИЕ?

[quake3]

ИЕ?

Да IE. Сейчас пробую в пхп вставить предложение AKyHuH, отпишу что как..

Edited January 13, 2010 by quake3

[s0rr0w]

Да IE. Сейчас пробую в пхп вставить предложение AKyHuH, отпишу что как..

У ИЕ самый дебильный алгоритм выравнивания картинки.

Сначала она выравнивается с верхнего левого угла, но как размер становится больше, чем 1em, она начинает выравниваться с нижнего правого угла.