CSS раздвижные двери и спрайты с вкладками навигации - не выглядит так, вкладки

Question

Эй, я пытаюсь заставить этот навигационный аппарат работать нормально:

http://www.moreheadplanetarium.org/redesign/nav.html

Я не могу понять, почему фоновое изображение «текущей» вкладки выходит за рамки ссылки. Он не делает этого в других состояниях (обычный и при наведении) - я тестировал его с разными изображениями в этих состояниях, потому что вы не можете сказать без вкладки.

Это сводит меня с ума, что техника работает на активных и парящих, но не для специального класса на "текущих" предметах. Помощь будет принята с благодарностью! Благодаря ~

Answer 1

Я не уверен, как вы думаете, что фоновое изображение может не простираться за промежуток. Тег span находится внутри элемента привязки следующим образом:

+-----------+
|    +-----+|
|    |     ||
|    +-----+|
+-----------+

Тег span не выходит за пределы тега привязки, например:

+--------+
|    +------+
|    |      |
|    +------+
+--------+

Он действует одинаково для всех состояний, разница в том, что для нормального состояния и состояния при наведении отсутствует прозрачная часть фона пролета, где можно увидеть фон якоря (если вы не посмотрите на тень очень внимательно).

Решение не использовать прозрачность на фоновом изображении. Сделайте это твердым, похожим на тень на фоне.

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