- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Доброй ночи!
Вопрос такой:
Имеется рисунок такого вида:
Имеется текст, например "Новости", новости имеют class "news" в css получается такой код:
.news {background: url("../img.png") no-repeat scroll right center #E9DDC4;
border-radius: 3px 0 0 3px;
font-size: 12px;
line-height: 17px;
margin: 0 7px;
padding: 0 9px 0 5px;
}
В итоге в браузере получается так:
А мне надо перед словом Новости вставить иконку 16*16px.
Как это сделать? т.к. двойной background нельзя применять в одном классе. :confused:
К какому тегу применяется класс .news?
не?К какому тегу применяется класс .news?
Вот так:
Как вариант изменение разметки - сами новости делаете текстом, но добавляете перед ним тег <span>:
В таком случаем просто прописываетеИзлишняя разметка - не есть гут, но это самый простой способ)
Ну а с padding'ами там разберетесь.
Skreep
Вот этот код точно правильный?
А не так?
?
---------- Добавлено 13.04.2012 в 03:06 ----------
mff, не не, немного не так. :)
Geers, не, не так. Смысл как раз в том, чтобы добавить перед самим текстом элемент, которому потом припишется background - та самая иконка. И получится, что на фоне класса рисунок спана)
Geers, не, не так. Смысл как раз в том, чтобы добавить перед самим текстом элемент, которому потом припишется background - та самая иконка. И получится, что на фоне класса рисунок спана)
Все, понял! Спасибо, буду пробывать. :)
Не за что)
Эта хитрость часто применяется в меню, где нужно прописать динамичные фоны, hover и т.п. К слову: если необходимо выровнить текст по иконке, экспериментируйте с line-height или display:block.
Geers, не, не так. Смысл как раз в том, чтобы добавить перед самим текстом элемент, которому потом припишется background - та самая иконка. И получится, что на фоне класса рисунок спана)
Хотя еще можно так попробывать:
CSS
.news span{background: url("../img.png")
padding-left: -20px;
width: 16px;
height: 16px;
}
:)
Ладно, вообщем отпишусь если что)
Geers, нет, боюсь. Получится наложение текста на иконку. Слово "новости" вряд ли уложатся в 16px, да и сам текст сдвинется вместе с тегом.