CSS와 JS - div 너머로 배경 이미지 연장

현재 Niall Doherty의 Coda Slider 2에 화살표를 사용하여 선택한 탭을 강조 표시하는 방법을 찾으려고합니다. 처음에는 Mac에서 Safari로 잘 보였지만 다른 기기에서는 중심이 아니었지만 머리글 이미지의 이미지로 시도했습니다 (www.lukekendalldesign.co.uk/pss/productsandservices 참조)CSS와 JS - div 너머로 배경 이미지 연장

CSS 화살표를 사용하여 이것을 만들려고했지만 오히려 증명되었습니다. 어렵 기 때문에 배경 이미지를 사용하여 해결 방법을 찾았지만 또 다른 문제가 발생했습니다.

http://cl.ly/HovO (미안 해요, 난 이미지를 업로드 할 수 없습니다! - 초보자를)

위의 링크 된 스크린 샷을 참조하십시오. 배경과 일치하는 밝은 회색 삼각형은 헤더 이미지의 일부입니다. 검은 삼각형은 다음과 CSS 코드를 사용하여 위치 :

내가 할 노력하고있어

.coda-nav ul li a.current { 
    border-top-right-radius: 10px; 
    border-top-left-radius: 10px; 
    color: white; 
    height: 60px; 
    z-index: 20000; 
    background: url(../images/triangle.png) no-repeat 50% 100%; 
    position: relative; 
    overflow: visible; 
}

, 위치는 회색 이미지의 화살표는이 검은 색 화살표입니다 (즉, 전혀 의미가 있다면?) 내가 할 수있는 방법 이?

여백과 패딩을 추가하려고 시도했지만 회색 배경이 확장되고 배경 이미지가 검은 색 삼각형 아래로 밀리지 않습니다. 클래스 .current는 다음 JS를 사용하여 적용되기 때문에

내가 솔루션 유사한 발견하는 동안, 아무도 신청 보이지 않는다 :

// If we need a tabbed nav 
    $('#coda-nav-' + sliderCount + ' a').each(function(z) { 
     // What happens when a nav link is clicked 
     $(this).bind("click", function() { 
      navClicks++; 
      $(this).addClass('current').parents('ul').find('a').not($(this)).removeClass('current'); 
      offset = - (panelWidth*z); 
      alterPanelHeight(z); 
      currentPanel = z + 1; 
      $('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction); 
      if (!settings.crossLinking) { return false }; // Don't change the URL hash unless cross-linking is specified 
     }); 
    });

난 아주 많이 어떤 도움이 사람이 날을 제공 할 수 있습니다 감사하겠습니다 - 그것의로 JS 문제는 내 깊이에서 조금 벗어난 것입니다! : (

출처

2012-07-02 Luke Kendall

Firefox에서 Windows의 불기구를 사용하여이 작업을 시도했지만, 두 가지 문제가 있다고 생각합니다. 첫째, ul 요소의 여백은 167px 여야합니다. 검은 색 화살표는 좋은 장소에 있지 않습니다. 이미지 (가운데는 232px입니까?) 화살표는 뒤쪽 위치를 설정하여 아래로 이동해야합니다. url ("../ images/triangle.png") no- 반복 스크롤 50px 60px 투명 효과가 도움이됩니다.

출처

2012-07-02 21:02:18 john

감사합니다. John - 167px와 관련하여 수평 위치를 언급하고 있습니까? 그렇다면 각 탭의 중앙에 위치해야하므로 50 %로 설정됩니다. - 각 탭의 너비는 제목에 따라 다릅니다. 방금 언급 한 두 번째 편집을 완료했는데 이제는 화살표가 전혀 표시되지 않습니다. –

167px는 ul 요소 스타일에 사용됩니다. 그것은 읽습니다 : .coda-nav ul 여백 - 왼쪽 : 170px는 167px 여야하거나 이미지의 화살표를 이동해야합니다. 미안해, 네가 옳다는 생각이 들었다.하지만 나는 그걸 없애 버렸다. 나는 더 조심해야한다. 나는 더 생각할 것이다. – john

아 아아, 167px를 편집했습니다. 감사합니다. 이 화살은 나를 너무 괴롭 히고있다! –

CSS와 JS - div 너머로 배경 이미지 연장

답변

관련 문제