묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
본문 가로 길이 자동 조절.
2009.03.17 17:50
XE의 경우
전체 본문의 길이가 980px
Content에 해당하는 오른쪽 컬럼이 770px로 고정되어있습니다.
와이드 모니터를 사용하면 상당히 많은 부분을 쓸모없이 버리게 되고 또한 큰 이미지를 사용할 일이 많아서 가능하면 자동으로 조절이 되도록 하려고 합니다.
#BodyWrap을 99%로 맞추고
ContentBody도 99%
columnRight 를 margin:0px auto; 로설정을 하면 IE 6 에서는 문제가 없습니다.
IE7 에서는 일부 페이지는 최근 게시물 리스트가 왼쪽메뉴보다 아래로 밀리고 일부는 또 괜찮더군요.
하지만 파폭은 왼쪽 메뉴보다 아랫쪽으로 본문이 위치 하게됩다.
[ IE6]
----------------------------------------------------
상단메뉴
----------------------------------------------------
왼 | 최근문서 위젯 | 최근문서 위젯
쪽 |
메 | 최근문서 위젯 | 최근문서 위젯
뉴 |
--------------------------------------------------------
푸터
---------------------------------------------------------
[IE 7]
---------------------------------------------------------
상단메뉴
--------------------------------------------------------
왼 | 최근문서 위젯 |
쪽 |
메 | 최근문서 위젯 |
뉴 |
| | 최근문서 위젯
|
| | 최근문서 위젯
-------------------------------------------------------
푸터
--------------------------------------------------------
[FF]
-------------------------------------------------------
상단메뉴
-------------------------------------------------------
왼 |
쪽 |
메 |
뉴 |
----------------------------------------------------------
최근문서 위젯 | 최근문서 위젯
최근문서 위젯 | 최근문서 위젯
----------------------------------------------------------
푸터
----------------------------------------------------------
이렇게 나와 버립니다.
#columnRight { width:770px; float:right; overflow:hidden;}
를
#columnRight { margin:0px auto; float:right; overflow:hidden;}
이렇게 바꾼겁니다.
IE 6기준으로는 쉽게 적용이 가능한데
IE 7과 FF까지 모두 호환되도록 설정하려니 죽겠네요.
브라우저의 창 크기를 조절했을때 본문의 크기가 같이 유동적으로 조절되는게 목적입니다.
긴 문서를 볼때도 770px의 좁은 공간에서 문서를 보는 것보다는 1600px의 넓은 영역을 다 활용하는게 더 좋을 테니까요.
고수 분들의 조언 부탁드립니다.
전체 본문의 길이가 980px
Content에 해당하는 오른쪽 컬럼이 770px로 고정되어있습니다.
와이드 모니터를 사용하면 상당히 많은 부분을 쓸모없이 버리게 되고 또한 큰 이미지를 사용할 일이 많아서 가능하면 자동으로 조절이 되도록 하려고 합니다.
#BodyWrap을 99%로 맞추고
ContentBody도 99%
columnRight 를 margin:0px auto; 로설정을 하면 IE 6 에서는 문제가 없습니다.
IE7 에서는 일부 페이지는 최근 게시물 리스트가 왼쪽메뉴보다 아래로 밀리고 일부는 또 괜찮더군요.
하지만 파폭은 왼쪽 메뉴보다 아랫쪽으로 본문이 위치 하게됩다.
[ IE6]
----------------------------------------------------
상단메뉴
----------------------------------------------------
왼 | 최근문서 위젯 | 최근문서 위젯
쪽 |
메 | 최근문서 위젯 | 최근문서 위젯
뉴 |
--------------------------------------------------------
푸터
---------------------------------------------------------
[IE 7]
---------------------------------------------------------
상단메뉴
--------------------------------------------------------
왼 | 최근문서 위젯 |
쪽 |
메 | 최근문서 위젯 |
뉴 |
| | 최근문서 위젯
|
| | 최근문서 위젯
-------------------------------------------------------
푸터
--------------------------------------------------------
[FF]
-------------------------------------------------------
상단메뉴
-------------------------------------------------------
왼 |
쪽 |
메 |
뉴 |
----------------------------------------------------------
최근문서 위젯 | 최근문서 위젯
최근문서 위젯 | 최근문서 위젯
----------------------------------------------------------
푸터
----------------------------------------------------------
이렇게 나와 버립니다.
#columnRight { width:770px; float:right; overflow:hidden;}
를
#columnRight { margin:0px auto; float:right; overflow:hidden;}
이렇게 바꾼겁니다.
IE 6기준으로는 쉽게 적용이 가능한데
IE 7과 FF까지 모두 호환되도록 설정하려니 죽겠네요.
브라우저의 창 크기를 조절했을때 본문의 크기가 같이 유동적으로 조절되는게 목적입니다.
긴 문서를 볼때도 770px의 좁은 공간에서 문서를 보는 것보다는 1600px의 넓은 영역을 다 활용하는게 더 좋을 테니까요.
고수 분들의 조언 부탁드립니다.