CSS спрайт - движущийся фон для навигации (наведение, активный и т. д.) + пробелы между элементами

Я делаю навигационное меню со спрайтом CSS, где вместо того, чтобы загружать множество изображений, вы объединяете их все вместе и можете видеть наведение, активные эффекты, перемещая фоновое положение, то есть http://www.threestyles.com/tutorials/coding-apples-navigation-bar-using-css-sprites/

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

Элементы либо всплывают слишком близко друг к другу (т. е. между элементами не остается места при наведении курсора между ними), либо фон перемещается слишком мало/сильно, если я изменяю свойства.

(http://s17.postimage.org/ska9gj065/navprrrob.jpg)

Вот моя навигация и размеры:

Кнопка "Призер" - ширина: 100px;
Расстояние между "Призер" и "Резервёр" - 15px.
"Резерв" - ширина: 120px;
Расстояние между "Резерв" и "Клуб" - 14px.
"Клуб" - ширина: 100 пикселей;

Извините, что не все вставила в картинку.

Вот мой HTML-код:

<div class="nav">
  <ul id="nav">
    <li id="list1"><a href="#"><span>Priser</span></a></li>
    <li id="list2"><a href="#"><span>Reservere</span></a></li>
    <li id="list3"><a href="#"><span>Klub</span></a></li> 
  </ul>
</div>

И мой CSS:

#nav span {
  display: none;
}

#nav li {
  list-style-type: none;
  float: left;
}

#nav a {
  height: 45px;
  display: block;
}

#list1 { width: 100px; }
#list2 { width: 130px; }
#list3 { width: 100px; }

#list1 a:hover {
  background: url(images/nav.png) 0px -45px no-repeat;
}

#list2 a:hover {
  background: url(images/nav.png) -115px -45px no-repeat;   
}

#list3 a:hover {
  background: url(images/nav.png) -260px -45px no-repeat;   
}

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

Итак, вопросы:

  1. Можно ли использовать этот CSS-спрайт, если у вас есть неиспользуемое пространство между элементами?
  2. Если да, то какие должны быть параметры в этом случае?

html css css-sprites
person IgnasK    schedule 04.06.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Конечно, вы можете это сделать. Во-первых, вы должны дать своим <li>-ам ту же ширину, что и ваши фоновые кнопки. А затем используйте margin, чтобы получить желаемый интервал, то есть:

#list2 { width: 120px; margin-right: 15px; }
person Zoltan Toth    schedule 04.06.2012
comment
О боже, это было так очевидно. Как же я соскучилась.. Большое спасибо! - person IgnasK; 04.06.2012

arrow_upward
0
arrow_downward

Вы должны указать ширину и высоту для контейнера с фоновым изображением и сделать его отображаемым: блокировать так же, как высота ширины изображения (например, ширина призера должна быть 100)

person SVS    schedule 04.06.2012
comment
Под контейнером вы имеете в виду, например, #list1 a:hover? Я пробовал - все равно не остается места между элементами, когда вы наводите на них курсор. Вроде как надо их как-то подтолкнуть правее но не пойму как. - person IgnasK; 04.06.2012
comment
На самом деле добавьте фоновое изображение к ‹a› и измените положение фона при наведении на ‹a›. Возможно ли вам показать изображение. Я использовал спрайты на одном из своих веб-сайтов (fabulloso.com /shoes-accessories/shoes/sandals/iteru-red.html) проверьте значки обмена. - person SVS; 04.06.2012
comment
Мне просто нужен был запас, вот и все. Спасибо, в любом случае. - person IgnasK; 04.06.2012