Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> UL, LI и list-stile-image, выравнивание текста по вертикали 
:(
    Опции темы
MacTep
Дата 7.2.2010, 15:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1292
Регистрация: 4.8.2003
Где: г. Самара

Репутация: нет
Всего: 4



Доброго времени суток!

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

Код

li.li1 { margin-left: 100px; padding-left: 20px;}
li.li2 { margin-left: 80px; padding-left: 20px;}
li.li3 { margin-left: 63px; padding-left: 20px;}
li.li4 { margin-left: 51px; padding-left: 20px;}
li.li5 { margin-left: 44px; padding-left: 20px;}
li.li6 { margin-left: 40px; padding-left: 20px;}
UL {
    list-style-image: url(../images/li.png);
    line-height: 2.0em;
    font-size: 16pt;
    color: #b71f1e;
}


Код

        <div id="menu">
          <ul>
                <li class="li1"><a href="">танцевальные направления</a>
                <li class="li2"><a href="">преподаватели</a>
                <li class="li3"><a href="">расписание</a>
                <li class="li4"><a href="">контакты</a>
                <li class="li5"><a href="">новости</a>
                <li class="li6"><a href="">отзывы</a>
            </ul>
        </div>


Не понимаю, почему у меня получается так (синими стрелками показал пару проблемных мест):
http://clip2net.com/clip/m28600/1265546265-clip-100kb.png

Мне не нравится в этом то, что картинка (окружность) и тест идут по вертикали на разных уровнях... Я могу добиться их выравнивания, чтобы текст шел по вертикали по центру картинки?

Это сообщение отредактировал(а) MacTep - 7.2.2010, 15:39


--------------------
(A)bort, (R)etry, (I)gnore = Haфиг, Heфиг, Пoфиг ... :)
PM MAIL   Вверх
Mavrun
Дата 7.2.2010, 15:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 199
Регистрация: 25.11.2007

Репутация: 9
Всего: 13



для начала попробуй повозиться с line-height. если не помогает, то попробуй ли-шкам маргин и паддинг попрописывать (не забывая,ч то маргин может отрицательный быть)

если не помогает, то архив примера давай, скачаю, настрою

Это сообщение отредактировал(а) Mavrun - 7.2.2010, 15:56
PM MAIL   Вверх
MacTep
Дата 7.2.2010, 15:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1292
Регистрация: 4.8.2003
Где: г. Самара

Репутация: нет
Всего: 4



Цитата(Mavrun @  7.2.2010,  15:55 Найти цитируемый пост)
то попробуй ли-шкам маргин и паддинг попрописывать (не забывая,ч то маргин может отрицательный быть) 

Дело в том, что если я что-то (маргин или паддинг) выставляю, то это применяется и к картинке и к тексту... и друг относительно друга они вообще никак не изменяют своего положения.

Добавлено через 1 минуту и 52 секунды
Вот тут есть такая фраза дурацкая:
Цитата
Учтите, что высота рисунка влияет на межстрочное расстояние между пунктами списка, поэтому подбирайте изображение небольшого размера.

Неужели это обозначает, что выровнять картинки достаточно большого размера относительно текста я не смогу?


--------------------
(A)bort, (R)etry, (I)gnore = Haфиг, Heфиг, Пoфиг ... :)
PM MAIL   Вверх
Mavrun
Дата 7.2.2010, 16:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 199
Регистрация: 25.11.2007

Репутация: 9
Всего: 13



Ну, на заборе тоже написано=) Я не говорю, коненчо, что они не правы, так оно и есть, но возможно есть обходные пути. как вариант можно прописать ли-шкам display:block (по сути превратить в div) и задать им тупо бэкграунды в виде этого шара. а текст паддингом выровнять
PM MAIL   Вверх
MacTep
Дата 7.2.2010, 16:10 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1292
Регистрация: 4.8.2003
Где: г. Самара

Репутация: нет
Всего: 4



да ну по идее, конечно, можно... smile вот как раз ради того, чтобы подсказали, как "извратнуться" сюда и обратился smile


--------------------
(A)bort, (R)etry, (I)gnore = Haфиг, Heфиг, Пoфиг ... :)
PM MAIL   Вверх
MacTep
Дата 7.2.2010, 19:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1292
Регистрация: 4.8.2003
Где: г. Самара

Репутация: нет
Всего: 4



Проблема до сих пор актуальна.


--------------------
(A)bort, (R)etry, (I)gnore = Haфиг, Heфиг, Пoфиг ... :)
PM MAIL   Вверх
SelenIT
Дата 7.2.2010, 22:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401



К сожалению, да, нынешний CSS слабоват в управлении положением маркеров. Как вариант, можно поковырять саму картинку (добавить к ней пустых полей в несколько пикселей с нужной стороны и т.п.), но даже это не даст 100%-й гарантии одинаковости ее положения во всех браузерах. По-моему, вариант с левым паддингом LI и фоновой картинкой для него оптимален (а для печати, если что, можно вернуть дефолтные маркеры).

Это сообщение отредактировал(а) SelenIT - 7.2.2010, 22:28


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.1796 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.