2011-08-05 7 views
0

웹 사이트 콘텐츠가 표시되는지 여부를 콘텐츠 div로 생각하십시오. 이 div에는 헤더에서 약간의 여백이 있어야하기 때문에 20px의 여백 - 상단이 있습니다. 또한 오른쪽 사이드 바가 있습니다. 외부 div가 있음을 의미합니다. 전체 내용과 서로 인접한 두 개의 부동 div를 말합니다. 하나는 콘텐츠 용이고 다른 하나는 사이드 바 용입니다. 꽤 표준.CSS 여백 문제

이제 갑자기 콘텐츠에 이동 경로를 추가해야합니다. 이제 빵 부스러기 머리글에 여백이 없어야합니다. 그러나 콘텐츠는 현재 위치가 빵 부스러기가 활성 상태인지 여부와 관계없이 20px의 위쪽 여백을 가져야합니다.

Apparantly, 나는 빵 부스러기가 다른 div에 바로 있도록 할 수 있습니다. 바로 콘텐츠 div 상단에 있습니다. 이 경우 콘텐츠 div가 'breadcrumb'및 'main_content'라는 두 개의 div로 분리되어야합니다.

빵 부스러기가 실제로 콘텐츠의 일부라고 생각하기 때문에 이것은 나에게 좋지 않은 생각처럼 들립니다. 또한, 나는이 새로운 div 및 일반 마크 업 변경 사항을 제시하기 위해 모든 템플릿을 변경해야합니다.

breadcrumb div에 상단 여백 : 20px를 추가하려고했으나 다른 콘텐츠에도 적용되기 때문에 좋지 않습니다.

좋은 방법으로하는 방법에 대한 아이디어가 있으십니까?

P. 사이드 바 div에는 동일한 20px 여백이 없으며 기본 콘텐츠에는 내부 콘텐츠에 대한 여백 만 있습니다.

+0

우리는 아무것도 생각할 수 없다! 우리에게 코드를 보여줘. – Shef

답변

1

position: relative; top: -20px;이 적합합니까?

+0

오, 괜찮아 보이는군요! 그런 식으로 사용하는 것이 안전한가요? – Spyros

+1

이것은 "안전"이라는 단어의 정의에 따라 다릅니다. 그것은 강아지를 죽이지 않을 것입니다. – Tomalak

+0

롤, 나는 거기에 어떤 호환성 문제 또는 아무것도 뜻 : P는 다른 브라우저. 그 종류의 부정적인 여백과 상대적인 위치 때문에. 나는 그렇지 않다고 생각하지만, 단지 확인하는 것이 좋습니다. – Spyros

1

main_content div의 경우 position:relative을 지정하십시오. 그런 다음 position:absolute을 적용해야합니다. top : some-px; 하단 : 귀하의 요구 사항에 따라 일부 - px.

+0

나는 과거에 어떤 포지셔닝 요소에 대해 실제로 해왔습니다. 참으로 합리적이라고 생각합니다. – Spyros

+0

breadcrumb div를 상대적으로 배치하는 것이 잘못된 이유는 무엇입니까? – Tomalak