2012-04-07 10 views
0

새로운 기초를위한 사이트를 디자인하고 있으며 4 월 15 일을 마감일로 설정했습니다. 컨텐츠를 편집하고 디자인을 미세 조정하는 것을 제외하고는 준비가되었습니다. 미 조정에서, 나는 누군가에게 내가 풀 수 있도록 도와달라고 부탁하고 싶은 귀찮은 작은 문제와 씨름하고있다. 문제는 단순히 이것입니다. 사이트의 구조에있는 부분이 주변에 테두리가 있지 않으면 작동하도록 기능하지 않습니다. 전에는 너무 엉뚱한 것을 보지 못했습니다.테두리가있는 경우에만 CSS div 요소 기능

이 문제는 요소가 레이아웃에서 상호 작용하는 방식과 관련이있는 것 같습니다. 첫째, 배경 이미지를 담고있는 HTML 태그가 있습니다. 배경 이미지의 맨 아래에 위치하는 분할 태그 (#greengrass)에 의해 만들어진 먼 저쪽에 일부 건물이있는 크릭의 jpeg와 잔디의 녹색 숲이 있습니다. div # greengrass는 내용 div가 그 위에 놓이면 길이가 길어지면서 길게 늘어납니다. 이 # 글로피 글라스 요소는 주변에 테두리가있는 경우를 제외하고는 어색하게 수행합니다.

특히 테두리가 제거되면 배경 이미지가 끝나는 위치로 시작하더라도 위쪽으로 돌출되어 배경 이미지를 덮습니다. 따라서 위쪽으로 투영하면 전체 페이지 배경이 녹색이됩니다. 그러나 그것이 국경을 가지고있을 때, 개울의 배경 이미지는 화창한 봄 해처럼 밝게 빛난다.

따라서 한 가지 질문이 있습니다. 왜 부서 경계의 부재 또는 존재가 행동에 영향을 줍니까? 기초를위한 시험 위치에 URL가있다 : http://postmaterial.org/tests/signin-ap.php. 상단 중앙에 테두리가있는 경계선없는 div # greengrass 효과 사이를 전환 할 수있는 링크를 추가했습니다. 태그 동작에 대한 이유에 대한 단서가 없으며 설명을 이해할 수 있습니다. 감사.

답변

0

질문에 대답하려면 : "부서 경계의 부재 또는 존재가 왜 그 행동에 영향을 미칩니 까?" 나는 여백 붕괴가 문제라고 ichao (그의 대답이 말했듯이)에 동의한다.

그러나 해결책은 마진 붕괴를 방지하는 데 필요한 위쪽 테두리 만이므로 border-top: 1px solid #009900 만 유지하는 것이 해결책이라고 생각합니다. 이렇게하면 가로 스크롤 막대가 나타나지 않습니다.

+0

Scott, 나는 당신이 제안한 변화를 만들었습니다 - 나는 반드시 말해야 할 특별한 제안입니다. 내 직책 전, 나는 마진 붕괴라는 개념에 익숙하지 않았다. 이 개념을 가로 스크롤과 관련하여 내 사이트의 외관을 현저하게 개선 할 수있었습니다. @ Ichao 님의 도움에 감사드립니다. – Gosundi

0

#greengrass의 경계가 없으면 자식의 음수 여백 - 위쪽이 접히고 (전체 구조가 위쪽에서 위로 보이지 않음) 결과적으로 #greengrass가 더 이상 위에서 아래로 밀리지 않습니다.

테두리는 접기 여백을 방지합니다. 표시 : 인라인 블록 또는 표시 : table 또는 float : 왼쪽이 경우 (오버플로 : 숨김은 옵션이 아닙니다.) 이전 IE에서는 zoom : 1과 같은 haslayout 트리거를 사용해야합니다. 나는 그것을 테스트하지 않았다.

+0

Ichao, 이것은 매우 흥미 롭습니다. 또한 응답 속도는 훌륭합니다. 그 동안 나는 국경이 기능면에서만 전적으로 미적이라고 생각했습니다. 이 가정을 논리적으로 개념적으로 변경했습니다. 당신의 도움에 감사드립니다. – Gosundi