slogin.info

ihc 468x60 1 1
Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна5 / 5
 
Автор: Администратор
Просмотров: 7788
Теги: list-style-image, css, css3, style, image

В этой статье мы объясним, каким образом можно сделать в качестве маркеров списка свое изображение.

Первый способ. Стандартный.

Чтобы задать пользовательский маркер используйте свойство list-style-image:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Страница</title>
    <link rel="stylesheet" href="/../css/template.css" type="text/css" />
</head>
<body>
	<ul>
		<li>Радость</li>
		<li>Блаженство</li>
		<li>Наслаждение</li>
	</ul>
</body>
</html>
body {
		margin:0; /* чтобы в некоторых браузеров не было стандартных отступов */
	}
	
	ul {
		list-style-image: url('/../images/smile.jpg');
	}

Результат вы можете увидеть не демо-странице, ссылка в конце статьи.

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

Способ второй. Фоновая картинка.

Это способ заключается в том, что тэгам <li> задается фоновая картинка и делает необходимый отступ слева.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Страница</title>
    <link rel="stylesheet" href="/../css/template.css" type="text/css" />
</head>
<body>
	<ul>
		<li>Радость</li>
		<li>Блаженство</li>
		<li>Наслаждение</li>
	</ul>
</body>
</html>
	ul {
		padding:0 0 0 10px;
	}
	
	ul li{
		list-style:none;
		background: url('/../images/smile.jpg') left center no-repeat;
		padding:4px 0 4px 25px;
	}
  • В 6 строке мы отключаем показ маркеров.
  • В 7 строчке добавляем фоновое изображение, отключаем его повторение и задаем позицию слева по горизонтали и по центру по вертикали.
  • В 8 строчке задаем отступы сверху и снизу, чтобы изображение полностью помещалось, а не обрезалось и добавляем отступ слева, равный размерам изображения + отступ до текста.

За счет изменения значений padding или даже позиции самого фонового изображения можно добиться, что текст будет находить по середине от изображения.

demo

Добавить комментарий

Авторизоваться с помощью:

     


Защитный код
Обновить

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • intuit89
    5.60
  • Varvarka
    4.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
  • Hozephlof
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Языки программирования сайтов

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

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее
Удобное собрание CSS хаков для самых популярных браузеров

Для каждого хорошего верстальщика в какой-то момент времени встает вопрос кроссбраузерности. Что такое кроссбраузерность? Это свойство сайта или дизайна сайта отображаться одинакого в разных барузерах. Дело в том, что при создании браузеров разработчики не сильно задумываются о стандартизации, это порождает разное представление одного и того же сайта в их продукции. Создание кроссбраузерной верстки/сайта и позволяет преодолеть эту разницу.

Теги:

css, хаки, hacks, читы

Комментариев: 0 Подробнее
!important в CSS Просмотров 2078
!important в CSS

Часто бывает, что люди, давно изучающие CSS, не имеют представления или не понимают до конца как работает директива !important в CSS. В этой статье я постараюсь описать её действие и показать пару примеров, такая статья так же пригодится тем, кто только начал изучать CSS.

Теги:

css, css3, style, !important

Комментариев: 0 Подробнее
Как подключать свои шрифты на сайт, или все о @font-face в CSS

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

Теги:

css, css3, @font-face, font, шрифт

Комментариев: 0 Подробнее

Последнее с форума

intuit89 аватар
Работаем в прежнем режиме, ждем новых заказов с интересными проектами...
Перейти в тему
ZOMRO аватар
Виртуальные выделенные сервера на облачной платформе Облачные VDS/VPS — это услуга, которая поможет...
Перейти в тему
ZOMRO аватар
Друзья, встречайте новинку в ассортименте наших услуг — тарифный план “Nano”. Тариф VDS/VPS «NANO» ...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.