jquery 슬라이더의 CSS 여백 문제

Question

내 컨베이어에 포함 된 배경 이미지에 문제가 있습니다. click here 한 슬라이드에서 다른 슬라이드로 클릭하면 내 사이트의 배경 이미지가 움직이지 않는 것으로 나타났습니다. 내 컨베이어의 상단 여백은 현재 margin-top:-275px;으로 설정되어 있으며 배경 이미지는 margin-top:-64px;으로 설정되어 있습니다.이 설정에 대해 약간 우려하고 있습니다.

누구에게이 문제의 해결책이 있습니까? 슬라이드가 탐색 모음

Answer 1

아래에 얇은 빨간색 탭을 클릭 활성화하기 위해

난 당신이 있기 때문에 그런 것 같아요

.rslides li { 
    top:0; 
} 

그것은 position:relative와 아무것도하지 않는 (그리고 현재 슬라이드가있다) 하지만 position:absolute (숨겨진 슬라이드)으로 슬라이드 아래로 이동합니다.

탭을 클릭하면 새 탭이 페이드 인되지만 잠시 후 position:relative이 없습니다. 그런 다음, 그 순간, 새로운 슬라이드는 당신이 원하는 곳이 아닙니다.

해당 행을 삭제하십시오.

Answer 2

애니메이션 전환 끝에서 항목을 position: absolute;에서 position: relative;으로 전환했기 때문에 점프가 발생합니다. 이것은 당신의 CSS 규칙을 제거하여 방지 할 수 있습니다 :

.rslides li { left: 0; top: 0; }

이 width 및 height 괜찮 지정을하지만, 최대한 빨리 left 및 top을 지정할로 - 다음 절대 위치를 기준으로 전환, 당신은 '당신을 뛰어 것을 얻을 다시 보게.

각 패널의 위치는 상자 배치 방식과 관련이 있습니다. 지정하는 크기가 제공하는 내용에 비해 충분히 크지 않습니다. 예를 들어 <div id="header">은 37px이며 소셜 미디어 버튼에 적합한 크기이지만 #nav-menuUL의 컨테이너로 사용됩니다. 즉 102px입니다.

이 문제를 해결하고 내용이 겹치게하려면 음수 여백을 사용하고있는 것 같습니다. 이로 인해 모두 버리게됩니다.

• http://cssgrid.net/
• http://960.gs/
• http://www.1kbgrid.com/
• http://foundation.zurb.com/docs/grid.php

을 그리고 그것을 사용 :

나의 제안은 다음 중 하나로서 표준화 된 레이아웃 시스템을 사용하는 것입니다 tryi보다는 레이아웃 작업을 수행 할 수 있습니다. 혼합 된 절대/상대 위치 지정을 사용하여 겹치는 레이어를 자기 공예로 만들 수 있습니다.

또는 겹치는 레이어 경로 (다시 말하지만, 제안되지 않음)로 이동하려는 경우에는 실제로이 작업을 수행하십시오. 배치 전반에 걸쳐 절대적으로 배치하십시오.당신은 같은 CSS 규칙을 고려해 볼 수 있습니다 이러한 목표를 달성하기 위해

: 다시

#header { 
    display: block; 
    position: absolute; 

    left: 50%; top: 0px; 
    height: 139px; /* Your Social media links height + nav buttons height */ 
    width: 1018px; /* Your current width */ 
    margin-left: -509px; /* Half the width - centers on page */ 
} 

-이 유지 관리가 훨씬 더 열심히하고 더 적은 우아한 훨씬 더 많은 작업, -하지만 당신은 적어도 일관된 간격을 얻을 것입니다/사이징.