Drupal Zen 테마에서 부동 사이드 바 접근법 사용

Question

드루팔 (Drupal Zen) 테마에서 사이드 바 및 주요 div가 모두 왼쪽으로 떠올라 서 각 div의 여백 - 오른쪽이 페이지의 0 위치로 되돌아가는 것을 보았습니다. 데모 here을 볼 수 있습니다. 동일한 결과를 얻는 방법은 여러 가지가 있지만이 방법을 사용하면 얻을 수있는 이점에 대해 궁금합니다. 왜 사이드 바를 오른쪽으로 두는 것이 좋을까요? 미리 감사드립니다! 마음에 와서

#main { 
    float: left; 
    margin-left: 20%; 
    margin-right: -80%; 
    width: 60%; 
    background-color: #eee; 
} 

#sidebar-first { 
    float: left; 
    margin-left: 0; 
    margin-right: -20%; 
    width: 20%; 
    background-color: #FFFF66; 
} 

#sidebar-second { 
    float: left; 
    margin-left: 80%; 
    margin-right: -100%; 
    width: 20%; 
    background-color: #FFFF66; 
} 

Answer 1

우선 왼쪽으로 모두 부동 다른 사람까지 버 티드 각 컨테이너를 유지하는 것입니다. 두 번째 사이드 바가 오른쪽으로 떠 있었고 두 번째 사이드 바보다 자식 div의 합계보다 큰 포함 div가 다른 것들과의 간격을 좁히게됩니다. 레이아웃 유체가 모두 왼쪽으로 떠있는 상태로 유지하는 것이 더 쉽습니다.

두 번째로 염두에 두어야 할 것은 기본적으로 한 가지 방향에서만 수레와 여백 같은 것을 적용하는 것이 좋습니다. 그들 모두가 한 방향으로 나아갈 때 당신이 개발하는 동안 추적하는 것이 훨씬 쉽습니다. 아래로 밀고 올리거나 떠오르는 여백을 가지고 있으면 개발자에게 혼란을 야기 할 수 있습니다.

마진의 방향과 관련하여 수레의 방향에 관한 몇 가지 IE 버그가 있습니다. 정확히 기억할 수는 없지만 ... 수레의 같은 방향으로 마진을 적용하지 않는 것과 같은 것 같아요 ... 따라서 왼쪽과 여백 (?) 오른쪽으로 떠있었습니다.

P.S :

해리 로버츠는 CSS 마법사 why to keep margins and things all in one direction.

에 큰 기사 그리고 IE Bug when adding a margin in the same direction of a float.의 첫 번째 기사를 썼다. 문제는 IE5/6의 여백이 두 배가된다는 것입니다. IMHO 더 이상 IE6 용으로 설계 할 필요가 없다고 생각하지만, 여백을두고 반대 방향으로 띄우는 것이 좋습니다.

Answer 2

Drupal에서 기억하는 것부터 Zen 테마를 이렇게 설정하는 주된 이유는 실제 페이지 내용이 HTML에서 처음으로 인쇄 될 수 있기 때문입니다. (선 (禅)이 최고의 예라고 생각하기는하지만 실제로 여러 가지 Drupal 테마가이 방법론을 사용했습니다.

그들은 그 사이드 바 하나가 왼쪽을 보여주고, 왼쪽 모두를 부유하고 탐색 상단에 있음을 표시하기 위해 어떤 미친 마진 수학을 사용 콘텐츠의 오른쪽에 사이드 바 2가 표시됩니다.

이

는 화면 판독기에 대한 접근성의 측면, 로봇에 더 친절 할 의도 등

나는이 오래된 목록이 외에도 문서는 일반적으로 사용하는 방법을 설명합니다 믿고

: http://alistapart.com/article/negativemargins