현재 페이지의 탐색 메뉴에있는 배경 이미지

Question

나는 이것을 원했던 것의 예로서 jsFiddle에서 작업 해왔다. 기본적으로 "li.current_page_item"에는 배경 이미지가 있습니다. 클릭하면 텍스트를 둘러싸고 싶습니다.

이미지 크기는 146 (W) × 44 (H) 비록 그것으로 약간 어려움이 어떤 도움을 찾고

. 그래픽을 한 가지 크기로 만들었습니다. 더 쉬운 것처럼 보였습니다.

누군가 나를 도와 줄 수 있는지 궁금합니다. 배경이 각 활성 항목으로 전환되도록하고 목록 항목이 점프하는 것을 분명히 방지합니다.

미리 감사드립니다.

Answer 1

배경 이미지가 완전히 표시되지 않는 두 가지 이유가 있습니다. 당신은 인라인 요소 인 li 태그에 height 및 width을 설정하고 있기 때문에

첫 번째

는 (그래서 세트 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/