ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Помогите с CSS для фона заголовка
6 сообщений из 6, страница 1 из 1
Помогите с CSS для фона заголовка
    #38222475
SQLWalker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SQLWalker
Гость
Захотел, чтобы у заголовков h2 было подчеркивание в виде картинки

Код: css
1.
2.
3.
4.
5.
.cpt_product_description h2 {
    background: url("/shop/images/stroke.png") no-repeat scroll 0px 30px transparent;
    padding-bottom: 12px;
    padding-top: 10px;
}


Если слева от заголовка нет других элементов DIV на этой странице - все хорошо, картинка выводится там где надо
Вот пример: http://kozakplus.com/shop/product/youngsun-mh-fg-2000a/

Но если слева от заголовка находятся фотографии товара, то сам текст заголовка располагается нормально, правее фотографии, а вот рисунок подчеркивания заголовка уплывает влево:
http://kozakplus.com/shop/product/nozh-dlja-razrezanija-stretch-plyonki/
(Это видно на заголовке "Применение ножа CN156", его фон-подчеркивание уплыл влево)

Можно ли что-то сделать с этим средствами CSS? Верстка страницы не моя, а движка интернет-магазина, но в принципе я могу ее править.
...
Рейтинг: 0 / 0
11.04.2013, 17:59
| Ответить | Цитировать | Написать  
Помогите с CSS для фона заголовка
    #38222500
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
а если заменить
.cpt_product_description h2
на
.cpt_product_description h2 span
?
...
Рейтинг: 0 / 0
11.04.2013, 18:10
| Ответить | Цитировать | Написать  
Помогите с CSS для фона заголовка
    #38222558
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Яростный Меч
Участник
SQLWalker,

Можно обернуть содержимое h2 в дополнительный спан и выставить ему display: inline-block, а так же перенести на него паддинги и картинку.

Вот, после экспериментов в дебаггере Хрома:
Код: html
1.
2.
3.
4.
5.
6.
7.
<h2 style="padding: 0;">
  <span style="display: inline-block; padding: 10px 0 12 0;background:url(/shop/images/stroke.png) no-repeat scroll 0px 30px transparent;">
    <i class="icon-star-empty"></i> 
    <span>Применение</span> 
    ножа CN156
  </span>
</h2>
...
Рейтинг: 0 / 0
11.04.2013, 18:36
| Ответить | Цитировать | Написать  
Помогите с CSS для фона заголовка
    #38222624
SQLWalker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SQLWalker
Гость
Паганель, только что попробовал
Кое-что в этом есть. Особенно то, что не надо править исходный текст страницы, а только стили.

У меня уже было изменение цвета для span в заголовке h2:
Код: css
1.
2.
3.
.cpt_product_description h2  span{
 color: #ff0000;
}


Я это делал для выделения первого слова в заголовке. Теперь, после переноса свойств фона заголовка в span:
Код: css
1.
2.
3.
4.
5.
6.
.cpt_product_description h2 span {
	color: #ff0000; 
	background: url("/shop/images/stroke.png") no-repeat scroll 0px 30px transparent;
    padding-bottom: 12px;
    padding-top: 10px;
}


Рисунок фона не уплывает влево, если слева есть фотография, но появляется другая проблема:
Рисунок фона заголовка может обрезаться справа, если первое слово заголовка (то, что у меня в исходном коде уже было обрамлено в span) достаточно короткое. На приведенных мною страницах на слове "Автоматический" - все нормально, а уже на слове "Видеоролик" заметно обрезание фонового изображения справа.

Сделать фоновый рисунок для h2 очень коротким, чтобы подходил для всех слов тоже не выход - он не смотрится тогда вообще.
В общем, я пока оставил в варианте, предложенном Паганелем.
Вариант Яростного Меча пока не тестировал - вносить изменения в код на множестве страниц не хотелось бы.
...
Рейтинг: 0 / 0
11.04.2013, 19:25
| Ответить | Цитировать | Написать  
Помогите с CSS для фона заголовка
    #38222626
SQLWalker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SQLWalker
Гость
Попробовал добавить для span свойство CSS3
Код: css
1.
background-size: 100% auto;


Хорошо получается - рисунок подчеркивания пропорционально сжимается или растягивается по длине выделенного в заголовке слова. Можно было бы на этом и остановиться, но как же быть с неподдерживающим css3 IE7, IE8?
...
Рейтинг: 0 / 0
11.04.2013, 19:38
| Ответить | Цитировать | Написать  
Помогите с CSS для фона заголовка
    #38222808
SQLWalker
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SQLWalker
Гость
Для не поддерживающих backgroundsize браузеров найдено такое решение:
при помощи modernizr определяем, что браузер не поддерживает свойство - modernizr добавит класс no-backgroundsize к тегу html
В классе для устаревших браузеров добавляем скрипт backgroundsize.min.htc :
Код: css
1.
2.
3.
4.
5.
6.
7.
.no-backgroundsize .cpt_product_description h2 span {
    background: url('/shop/images/stroke.png') no-repeat scroll 0 75px transparent;
    padding-bottom: 12px;
	background-size: contain;
	color: #ff0000;
	-ms-behavior: url('/backgroundsize.min.htc');
}


Подробности про скрипт здесь
...
Рейтинг: 0 / 0
12.04.2013, 00:54
| Ответить | Цитировать | Написать  
6 сообщений из 6, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Помогите с CSS для фона заголовка
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=134&tid=1448458]:
 0ms
get settings:
 12ms
get forum list:
 16ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 58ms
get topic data:
 10ms
get forum data:
 3ms
get page messages:
 43ms
get tp. blocked users:
 2ms
others: 254ms
total:  404ms
созд. / загр.: 404ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]