Можно ли к маркерам списка применить стили внутреннего элемента?

Сообщений: 2247 Регистрация: Янв 2014

6 Ноября 2015 12:25

Помогите, пожалуйста. В таких делах не силен вообще((Вот использую часто нумерованные списки, и когда они применяются к обычному тексту, то ответствуют его размерам. А когда применяю к подзаголовкам (Н2, Н3), то цифры меньше текста.
Возможно ли как-то прописать в стилях, чтобы размер маркера был как у элемента, к которому он применяется? А еще лучше и цвет на всякий случай...

А то я уже пробовал и <li style="font-size: 1,5em;"> вот так делать, то что-то не применяется... Не валидно... Может с помощью :before как-то решается?

Изменено: Иван - 6 Ноября 2015 12:25

Валентин

Сообщений: 621 Регистрация: Май 2010

6 Ноября 2015 18:03

Код
<ol> <li><h2>текст</h2></li> </ol>

если Вы задаете стили пункту списка, в котором находится заголовок, то будет одинаковый и цвет, и размер:
li { свойства }
а если задать стили самому заголовку - то будет отличие от маркера:
h2 { свойства }

если использовать :before , то список нужно поменять на ненумерованый, а цифру добавлять непосредствено к заголовку, но это много лишних стилей...

инвестиции

Иван

Сообщений: 2247 Регистрация: Янв 2014

6 Ноября 2015 18:26

Спасибо, но в то и дело, что конструкция, как у Вас:

Код
<ol> <li> <h3>Импланты корневидной формы</h3> </li> </ol>

а размер нумерованных маркеров меньше, как при обычном тексте...

Андрей

Сообщений: 72 Регистрация: Окт 2015

6 Ноября 2015 18:33

Цитата
Иван пишет: размер нумерованных маркеров меньше, как при обычном тексте...

Код
<ol> <h2><li>текст</li></h2> </ol>

А так?

bratan

Сообщений: 309 Регистрация: Апр 2012

6 Ноября 2015 18:45

В стилях пропишите:

Код
li h2, li h3 { font-size: 15px; }

15px - это размер основного шрифта

Качественный и недорогой хостинг
Высокая цена за клик и еженедельные выплаты - это мне нравится

Андрей

Сообщений: 72 Регистрация: Окт 2015

6 Ноября 2015 18:55

Стилем не получится, именно маркеры, но можно js

Код
<script> $('h2').closest('li').css('font-size','1,5em'); </script>

Валентин

Сообщений: 621 Регистрация: Май 2010

6 Ноября 2015 19:19

Цитата

Иван пишет:
Спасибо, но в то и дело, что конструкция, как у Вас:

Код
<ol> <li> <h3>Импланты корневидной формы</h3> </li> </ol>

а размер нумерованных маркеров меньше, как при обычном тексте...

нужно видеть Ваши стили...вот Вам как пример http://jsfiddle.net/h2f40qeh/

Валентин

Сообщений: 621 Регистрация: Май 2010

6 Ноября 2015 19:20

Цитата

Андрей пишет:

Цитата
Иван пишет: размер нумерованных маркеров меньше, как при обычном тексте...

Код
<ol> <h2><li>текст</li></h2> </ol>

А так?

это очень грубая ошибка

Иван

Сообщений: 2247 Регистрация: Янв 2014

6 Ноября 2015 19:55

Цитата

Валентин пишет:

Цитата

Иван пишет:
Спасибо, но в то и дело, что конструкция, как у Вас:

Код
<ol> <li> <h3>Импланты корневидной формы</h3> </li> </ol>

а размер нумерованных маркеров меньше, как при обычном тексте...

нужно видеть Ваши стили...вот Вам как пример http://jsfiddle.net/h2f40qeh/

Хух, и тыкался и мыкался... Но что-то не получилось пока (в ЛС дал пример на всякий случай). Но все равно из примера понял, что придется каждый раз вручную дописывать id, чтобы был один шрифт? Автоматом знач не получится((

Изменено: Иван - 6 Ноября 2015 20:07

Дивергент

Сообщений: 21226 Регистрация: Май 2011

#10

6 Ноября 2015 20:44

css юзайте. Конструкции ol li h3{}
P/s/ Если она где-то перебивается (и вы не знаете где), пользуйте ol li h3 {font-size:НАДО !important}

Изменено: Дивергент - 6 Ноября 2015 20:45

Мы не можем похвастаться мудростью глаз
И умелыми жестами рук,
Нам не нужно все это, чтобы друг друга понять.
Сигареты в руках, чай на столе - так замыкается круг,
И вдруг нам становится страшно что-то менять.

Валентин

Сообщений: 621 Регистрация: Май 2010

#11

6 Ноября 2015 20:49

Цитата

Иван пишет:
Хух, и тыкался и мыкался... Но что-то не получилось пока (в ЛС дал пример на всякий случай). Но все равно из примера понял, что придется каждый раз вручную дописывать id, чтобы был один шрифт? Автоматом знач не получится((

Вы используете список из одного пункта, поэтому в Вашем варианте просто попробуйте добавить в стилях такую строчку, ничего не меняя:

Код
ol li { font-size: 1.5em; font-weight: 600; }

Иван

Сообщений: 2247 Регистрация: Янв 2014

#12

6 Ноября 2015 21:06

Цитата
Дивергент пишет: пользуйте ol li h3 {font-size:НАДО !important}

К сожалению такая конструкция не работает((

Цитата
Валентин пишет: ol li { font-size: 1.5em; font-weight: 600; }

А такая работает, но у меня еще есть Н2 и Н4 в списках на сайте, а они становятся тогда неправильного размера(( Получается создавать клас дополнительный...

Валентин

Сообщений: 621 Регистрация: Май 2010

#13

6 Ноября 2015 21:15

Цитата

Иван пишет:

Цитата
Валентин пишет: ol li { font-size: 1.5em; font-weight: 600; }

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

Иван

Сообщений: 2247 Регистрация: Янв 2014

#14

6 Ноября 2015 21:18

я создал .zagolovok {все как у заголовка} и подобавлял этот клас к liВроде уже почти получилось) Просто в самих заголовков размер задан в em, и оно как я понял умножает одно на другое... Но сейчас решу)

Изменено: Иван - 6 Ноября 2015 21:19

Валентин

Сообщений: 621 Регистрация: Май 2010

#15

6 Ноября 2015 21:35

Цитата
Иван пишет: я создал .zagolovok {все как у заголовка} и подобавлял этот клас к liВроде уже почти получилось) Просто в самих заголовков размер задан в em, и оно как я понял умножает одно на другое... Но сейчас решу)

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

Код
<ol> <li class="zagolovok-h2"><h2>Импланты корневидной формы</h2></li> </ol>

Код
<ol> <li class="zagolovok-h3"><h3>Импланты корневидной формы</h3></li> </ol>

Код
<ol> <li class="zagolovok-h4"><h4>Импланты корневидной формы</h4></li> </ol>

и в стилях:

Код
.zagolovok-h2 { font-size: 1.8em; font-weight: 600; } .zagolovok-h3 { font-size: 1.5em; font-weight: 600; } .zagolovok-h4 { font-size: 1.2em; font-weight: 600; }

тогда маркеры будут соответствовать заголовкам

Похожие темы:

17.01.2024 21:09	На конкурсе Роскомнадзора студенты показали, как можно нарушать закон с помощью ChatGPT
22.08.2023 16:01	Крепкий алкоголь с 1 января 2024 года можно будет приобрести только за цифровые рубли / Сатира
29.06.2023 09:31	Конгресс США наложил (на этом можно было закончить, но да и ладно, продолжим) ограничения на использование ChatGPT
12.03.2022 13:48	СУПР возможно не будет работать
03.03.2022 21:47	Можно ли зарабатывать на «Яндекс.Дзене» 200 тысяч в месяц и что для этого нужно делать

Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)

Новые темы	Объявления	Свободное общение
12:35 TacoLoco - рекламная сеть от LosPollos. Большие объёмы качественного трафика! 15:08 Adtrafico - Правильная партнёрская сеть под бурж трафик 21:18 Webvork - международная товарная СРА сеть с сертифицированными офферами на Европу. 21:06 Кто как борется с ботами ПФ? 16:51 Buymedia.biz - рекламная сеть 13:36 Партнерская программа OWNR WALLET 14:10 3snet - гемблинг, беттинг, форекс, бинарные опционы, майнинг	23:50 Прием платежей для HIGH RISK \| Прием платежей без сайта 23:50 Услуги рассылки Viber\|Whatsapp\|IMO. 23:48 Рассылка сообщений в ЛС DISCORD 23:47 Рассылка в TELEGRAM \|Большой опыт работы \| Любые тематики \| Лучшая конверсия 10:48 DualCoin - быстрый криптовалютный обменник 21:39 Coin Click.cc - Быстрый и надежный обмен электронных валют в два клика 18:50 Европейский эквайринг	18:39 Точные прогнозы на футбол 15:43 Заказать телефонный флуд. 12:05 Ням-ням! - 8 деликатесов, которые когда-то ели только бедные люди 11:40 Кто сделает прогон для адалт сайта? 09:25 Добро пожаловать в цифровой мир... 10:31 Видимо, похороны СУПРа уже прошли как-то по-тихому 08:08 С юмором по жизни!