2011-05-10 6 views
0

내가 만들고있는 사이트에 콘텐츠 회전기를 추가하려고합니다. 회전 장치가 잘 작동합니다. 사실, 그것은 내가 기대했던 것보다 잘 작동합니다. 나는 어떤 스타일링 물건을 조정할 필요가있다. 그러나 그것은 요점 외에있다.이상한 div 여백 문제

로테이터 (상대적으로 배치되어 있고 내 컨테이너/래퍼 div 내부)는 상단에 여백을 추가 할 때 내 래퍼와 메뉴를 당깁니다 (margin:65px auto 0; 또는 이와 비슷한 내용). 충고하나요? 여기

페이지 : http://technoheads.org/test/ice/index.htm

답변

3

collapsing margins의 고전적인 사례처럼 들린다.

당신은 컨테이너 border-top, margin-top, padding-top, 또는 visible 이외의 overflow를 제공함으로써이 문제를 해결할 수 있습니다. (jsFiddle)

+0

두 가지가 중첩되어 있습니다. 페이지를 검사하고 슬라이드 쇼에 위쪽 여백을 추가하십시오. 파이어 폭스 3.6.6과 크롬 (어느 것이 든 최신 빌드)에서 나는 문제가 있었다. (필자는 컴퓨터가 아니기 때문에 오래된 파이어 폭스이다.) – Salem

+1

중첩 된 요소는 여백 붕괴의 영향을받습니다. jsFiddle I 링크를 확인하십시오. 나는'# wrapper'에'overflow : auto'을 추가하고 FireBug를 통해'# slidesContainer'에 언급 된 여백을 설정함으로써 의도 한대로 페이지가 작동하도록 할 수있었습니다. –

+0

[FireBug의 변경 내용 스크린 샷] (http://i51.tinypic.com/wqsoar.jpg) –

0

아마도 # slip top margin 대신 #lrapper top padding을 주면됩니다.

+0

나는 그것을 생각했지만 반창고는 원치 않는다. 나는 왜 그것이 작동하지 않는지 알고 싶다. – Salem

0

인라인 요소 안에 요소를 넣으면이 문제가 많이 발생합니다. 당신은 다음 중 하나를 수행하여 문제를 해결 할 수 있어야한다 :

  • 당신이 display: block;에 문제가있는 요소 (보통 충분히 좋은 수정)
  • 사용 최고 패딩 이미 제안과 같은 설정을 (아무것도 작동하는지
  • 정말 권장하지 않음 (float: left;에 요소를 설정) ... 반창고를 사용하여 잘못 라인까지 문제가 발생할 수 있지만, 확실히 당신
) 상단과 하단 여백을 추가 할 수
0

어때?

#menu { 
    position: relative; 
    width: auto; 
    height: 100px; 
    left: 383px; 
    top: 0px; 
}