Перейти к содержимому

Реферальная программа Мегаплана

Партнерская программа Kredov

Помогите сделать CSS спрайт

#11 fedornabilkin

fedornabilkin
  • Пользователь
  • 696 сообщений
  • Репутация: 91
0

Отправлено 28 Август 2013 - 16:43

Тоесть надо еще подумать, стоит ли оно того.

Это точно. Если иконок не много, то не спасет. Но если их достаточное количество, то разница существенная.
  • 0
Как часто в горестной разлуке,В моей блуждающей судьбе, ФО, я думал о тебе.


#12 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 29 Август 2013 - 10:13

Как-то так
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>tst</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{
  margin: 0;
  padding: 0;
}
.menu{
  list-style: none;
  width: 340px;
  background: url(24.jpg) repeat-y;
}
.menu li a{
  display: block;
  height: 40px;
  width: 260px;
  padding-left: 40px;
  text-decoration: none;
  font: 15px/40px Verdana, Geneva, "DejaVu Sans", sans-serif;
  color: #ff5d5c;
}
.menu li a:hover{
  color: #000;
  background-color: #ffc;
}
.keks a{
  background: url(icons.png) 4px 0px no-repeat;
}
.kniga a{
  background: url(icons.png) 4px -40px no-repeat;
}
.eda a{
  background: url(icons.png) 4px -80px no-repeat;
}
.chashka a{
  background: url(icons.png) 4px -120px no-repeat;
}
.tort a{
  background: url(icons.png) 4px -160px no-repeat;
}
.file a{
  background: url(icons.png) 4px -200px no-repeat;
}
.pen a{
  background: url(icons.png) 4px -240px no-repeat;
}
</style>
</head>
<body>
<ul class="menu">
  <li class="keks"><a href="http://cooking-book.in.ua">Главная страница</a></li>
  <li class="kniga"><a href="http://cooking-book.in.ua/gb">Книга отзывов</a></li>
  <li class="eda"><a href="http://cooking-book.in.ua/publ">Еда и здоровье</a></li>
  <li class="chashka"><a href="http://cooking-book.in.ua/blog">Рестораны и кафе (отзывы)</a></li>
  <li class="tort"><a href="http://cooking-book.in.ua/dir">Кулинарные обои / открытки</a></li>
  <li class="file"><a href="http://cooking-book.in.ua/load">Кулинарные файлы</a></li>
  <li class="pen"><a href="http://cooking-book.in.ua/index/prishli_recept/0-34">Поделись своим рецептом!</a></li>
</ul>
</body>
</html>
Использованы картинки:
* со спрайтами иконок icons.png (13Кб): Изображение
* и ваша фоновая 24.jpg (24Кб): Изображение
  • 0


Оформление форума – IPBSkins.ru