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

Question

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

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

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

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

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

Answer 1

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

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

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

Так следующий 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/