Фоновое изображение в меню навигации для текущей страницы

Question

Я работал над этим jsFiddle в качестве примера того, что я хочу. В основном у "li.current_page_item" есть фоновое изображение. Который я хотел бы окружить текст при нажатии.

Размер изображения 146 (Ш) х 44 (В)

У меня небольшие трудности с этим и я ищу помощь. Я сделал изображение одного размера, так как это казалось более простым способом.

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

Заранее спасибо.

Answer 1

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

Во-первых, вы устанавливаете height и width для тега li, который является встроенным элементом (поэтомуне может иметь набор height или width).Таким образом, вам нужно будет установить его как элемент block или inline-block.

Второе - вы устанавливаете фоновое изображение для тега привязки, вложенного в li.current_page_item - у которого нет height или width установлено.Чтобы решить эту проблему, я бы просто переместил фоновое изображение на li.current_page_item CSS.

, чтобы работал следующий CSS:

.menu li.current_page_item {
    background: url(http://i42.tinypic.com/2mnhvh0.png) no-repeat 0 0 transparent;
}

.menu li {
    ....
    display: inline-block;
    *display: inline;     /* for IE7*/
    *zoom:1;              /* for IE7*/
    line-height: 44px;    /* center text vertically */
    text-align: center;   /* center text horizontally */
    ....
}

Рабочий пример: http://jsfiddle.net/9aUaK/2/