웹마스터 팁

XE를 사용하면서 불편한 것 중 하나가 고정 사이즈입니다.
980px에 본문은 770px로 고정 되어있죠.

그러다 보니 와이드 모니터나 해상도가 높은 모니터를 사용하면 1/3 에서 1/2의 화면은 그냥 하얀 바탕만 보여 버려지는 화면이 됩니다.
브라우저의 창크기가 커지면 본문의 가로 영역도 길어지고 브라우저를 작게하면 같이 작아지면 좋겠죠.

삽질에 삽질을 거듭해 수정을 해봤습니다.

사용한 레이아웃은 XE_Official 레이아웃을 기준으로 사용하였습니다.
버젼은 1.2입니다.
IE6, IE7, 파폭에서 테스트 해봤습니다.
IE8은 사이즈가 좀 고정으로 나오는 것 같습니다. // 다른 사람 PC에서 잠깐 본 정도라;;

1. /xe/layouts/xe_official/css/default.css
#bodyWrap { width:980px; margin:1.5em auto 0 auto; }
-> #bodyWrap { width:99%; margin:10px auto; }    // 크기는 좌우 여백 만들기 위해 99% margin은 상하 10px 좌우 auto로 했습니다.


#header { position:relative; width:980px; height:120px; background:url(../images/default/bgHeader.jpg) no-repeat right top; margin-bottom:10px; z-index:99;}
-> #header { position:relative; width:100%; height:85px; background:url(../images/default/bgHeader2.jpg) no-repeat right top; margin-bottom:10px; z-index:99;}     // header의 width 는100%로 바꾸고 배경이미지는 따로 하나 만들었습니다.



#contentBody { position:relative; width:980px; padding-bottom:30px; overflow:hidden; background:url(../images/default/bgContentBody.gif) repeat-y left top; border-bottom:1px solid #dddddd;}
->#contentBody {width:100%; padding-bottom:30px; overflow:hidden; background:#FFFFFF;}
 // width는 100% 배경은 그냥 단색으로 했습니다.


#columnRight { width:770px; float:right; overflow:hidden;}
-> #columnRight {margin:10px 10px 10px 210px; overflow:hidden;}
// width는 설정하지 않았고  margin 왼쪽 margin을 210을 줬습니다. 왼쪽 로그인 폼 + 왼쪽 메뉴의 사이즈가 201px이라 210px을 마진을 줬습니다.

===============================================================================
요기까지 하시면 기본 레이아웃 에서는 정상적으로표시가 됩니다.
다만 IE6 에서 게시판 사용시 게시판의 header 아래 부분이 밑으로밀리는 현상이 있어 추가 수정을 하였습니다.

2. /xe/modules/board/skins/xe_board/css/common.css
.boardInformation { width100%; clear:both; margin:5px 0 2px 0; overflow:hidden; color:#666666;}
->.boardInformation { width:99%; margin:5px 0 2px 0; overflow:hidden; color:#666666;}


.boardRead { margin:10px  0 10px 0; }
->.boardRead {width:99%; margin:10px  0 10px 0; }

.boardList { width:100%; border:1px solid #e0e1db; border-top:none; overflow:hidden; }
->.boardList { width:99%; border:1px solid #e0e1db; border-top:none; overflow:hidden; }

상단부분과 내용보기, 내용리스트의 길이를 99%로 수정해주니 제대로 올라가더군요.

아무튼 MS는 IE6,7,8 이 왜 다 설정이 다른건지 미치겠네요 ㅡㅡ;;

IE6,7과 FF만 테스트 해본 내용입니다.
(코더가 아니라 레이어로 코딩하기 힘드네요ㅠ .ㅠ)


// 추가   :
WIKI와 ISSUETRACKER도 board 모듈처럼 별도로 css를 수정해야 되는 것 같습니다.

근데 나는 왜  ... 왜 추가 앞에 //로  주석처리를 하는거지 ㅡㅡ??

제목 글쓴이 날짜
로그인 포인트 출력 위젯을 수정해보자 [花穗] 2009.03.27
글 읽을 때마다 조회수 증가하는 법 알려주세요 [1] 홍정환873 2009.03.27
(CSS) IE8용 웹조각 기능 file Simulz 2009.03.26
각종 좌절 금지 그림들 [2] file winter548 2009.03.23
제로보드의 아이콘을 내 맘대로 변경하기...(2) [2] file winter548 2009.03.23
제로보드의 아이콘을 내 맘대로 변경하기...(1) [3] file winter548 2009.03.23
1.2.0 업뎃후 위젯 문제 [1] ♡不明♡ 2009.03.22
제로보드 XE나 개인 블로그에 GPS 로그(궤적)를 나타낸 구글맵 삽입하기 상오기 2009.03.21
미국 야후 호스팅 쓰시는 분들 보세요(이미지 퍼미션) 텍사수 2009.03.21
왕초보용 xe 1.2.0 버전 사용 기본 레이아웃 좌측에 배너 삽입 방법. [7] 『june™』 2009.03.20
페이지모듈에서 내용직접추가할때 "본문내이미지조절" 애드온 적용하기 [5] 왜만지냐 2009.03.19
브라우저 크기에 따라 본문 가로 크기 자동 조절 [1] 개돌 2009.03.18
1.2.0 설치 후 페이지모듈에 위젯사용시 문제 [2] Digitalife 2009.03.17
XE DB 백업한거 복원 하기 [2] 라르게덴 2009.03.17
관리자 페이지 (module=admin) 백지 문제 [5] 개돌 2009.03.17
추천 비추천 레벨 권한 [4] 한이73 2009.03.17
제로보드에서 아이프레임(iframe) 높이 자동조절(파폭,IE, 모두 작동) [10] HaruKaze 2009.03.17
각종 스킨 파일 보호 하기 (HTML 소스 보기 방지법) [18] 퍼니엑스이 2009.03.16
확장변수 출력 방법 초 심플하게 적어봅니다. [15] 라르게덴 2009.03.16
게시물 가운데 정렬 문제 임시해결법 한신일 2009.03.15